{"version":3,"file":"PixelPattern.BC0Dxe3d.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/hHke4hR8TTogqtU3mY7t/dCIgYF2zy9mRhOyPZ4ar/PixelPattern.js"],"sourcesContent":["// Animated pixel background pattern with customizable box size, timing, and random fill\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useMemo,startTransition,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n */export default function PixelPattern(props){const{boxSize=20,fillPercentage=50,animationDuration=.5,staggerDelay=.05,backgroundColor=\"#000000\",pixelColor=\"#FFFFFF\",randomize=true,positionMode=\"full\",customLeft=0,customRight=100,customTop=0,customBottom=100,animationType=\"scale\"}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[dimensions,setDimensions]=useState({width:800,height:600});useEffect(()=>{if(typeof window===\"undefined\"||!containerRef.current)return;const updateDimensions=()=>{if(containerRef.current){const{width,height}=containerRef.current.getBoundingClientRect();startTransition(()=>setDimensions({width,height}));}};updateDimensions();const resizeObserver=new ResizeObserver(updateDimensions);resizeObserver.observe(containerRef.current);return()=>resizeObserver.disconnect();},[]);const pixels=useMemo(()=>{const cols=Math.ceil(dimensions.width/boxSize);const rows=Math.ceil(dimensions.height/boxSize);// Calculate bounds based on position mode\nlet leftBound=0;let rightBound=cols;let topBound=0;let bottomBound=rows;switch(positionMode){case\"left\":rightBound=Math.floor(cols/2);break;case\"right\":leftBound=Math.ceil(cols/2);break;case\"top\":bottomBound=Math.floor(rows/2);break;case\"bottom\":topBound=Math.ceil(rows/2);break;case\"custom\":leftBound=Math.floor(cols*customLeft/100);rightBound=Math.ceil(cols*customRight/100);topBound=Math.floor(rows*customTop/100);bottomBound=Math.ceil(rows*customBottom/100);break;}const allPositions=[];for(let row=topBound;row<bottomBound;row++){for(let col=leftBound;col<rightBound;col++){allPositions.push({row,col,id:`${row}-${col}`});}}const totalPixels=allPositions.length;const pixelsToShow=Math.floor(totalPixels*fillPercentage/100);if(randomize){for(let i=allPositions.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[allPositions[i],allPositions[j]]=[allPositions[j],allPositions[i]];}}return allPositions.slice(0,pixelsToShow).map((pos,index)=>({...pos,delay:index*staggerDelay}));},[dimensions,boxSize,fillPercentage,randomize,staggerDelay,positionMode,customLeft,customRight,customTop,customBottom]);const getAnimationVariants=type=>{switch(type){case\"fade\":return{initial:{opacity:0},animate:{opacity:1}};case\"scale\":return{initial:{opacity:0,scale:0},animate:{opacity:1,scale:1}};case\"blink\":return{initial:{opacity:0},animate:{opacity:[0,1,1,.3,1,0,1]}};case\"slideUp\":return{initial:{opacity:0,y:boxSize},animate:{opacity:1,y:0}};case\"slideDown\":return{initial:{opacity:0,y:-boxSize},animate:{opacity:1,y:0}};case\"slideLeft\":return{initial:{opacity:0,x:boxSize},animate:{opacity:1,x:0}};case\"slideRight\":return{initial:{opacity:0,x:-boxSize},animate:{opacity:1,x:0}};case\"rotate\":return{initial:{opacity:0,rotate:-180,scale:0},animate:{opacity:1,rotate:0,scale:1}};case\"bounce\":return{initial:{opacity:0,scale:0,y:-boxSize*2},animate:{opacity:1,scale:1,y:0}};case\"flip\":return{initial:{opacity:0,rotateY:90},animate:{opacity:1,rotateY:0}};case\"wave\":return{initial:{opacity:0,scale:0,rotate:0},animate:{opacity:1,scale:[0,1.2,1],rotate:[0,10,-10,0]}};default:return{initial:{opacity:0,scale:0},animate:{opacity:1,scale:1}};}};const getEasing=type=>{switch(type){case\"bounce\":return\"easeOut\";case\"wave\":return\"easeInOut\";case\"blink\":return\"easeInOut\";default:return\"easeOut\";}};if(isStatic){return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",backgroundColor,position:\"relative\",overflow:\"hidden\"},children:pixels.map(pixel=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:pixel.col*boxSize,top:pixel.row*boxSize,width:boxSize,height:boxSize,backgroundColor:pixelColor}},pixel.id))});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",backgroundColor,position:\"relative\",overflow:\"hidden\"},children:pixels.map(pixel=>{const variants=getAnimationVariants(animationType);const isBlinkMode=animationType===\"blink\";const blinkDuration=isBlinkMode?1.5+Math.random()*2.5:animationDuration;return /*#__PURE__*/_jsx(motion.div,{initial:variants.initial,animate:variants.animate,transition:{duration:isBlinkMode?blinkDuration:animationDuration,delay:pixel.delay,ease:getEasing(animationType),repeat:isBlinkMode?Infinity:0,repeatDelay:isBlinkMode?Math.random()*1:0},style:{position:\"absolute\",left:pixel.col*boxSize,top:pixel.row*boxSize,width:boxSize,height:boxSize,backgroundColor:pixelColor}},pixel.id);})});}addPropertyControls(PixelPattern,{boxSize:{type:ControlType.Number,title:\"Box Size\",defaultValue:50,min:5,max:100,step:1,unit:\"px\"},fillPercentage:{type:ControlType.Number,title:\"Fill %\",defaultValue:30,min:0,max:100,step:1,unit:\"%\"},animationType:{type:ControlType.Enum,title:\"Animation\",defaultValue:\"blink\",options:[\"fade\",\"scale\",\"slideUp\",\"slideDown\",\"slideLeft\",\"slideRight\",\"rotate\",\"bounce\",\"flip\",\"wave\",\"blink\"],optionTitles:[\"Fade\",\"Scale\",\"Slide Up\",\"Slide Down\",\"Slide Left\",\"Slide Right\",\"Rotate\",\"Bounce\",\"Flip\",\"Wave\",\"Blink\"]},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:1,min:.1,max:3,step:.1,unit:\"s\"},staggerDelay:{type:ControlType.Number,title:\"Stagger Delay\",defaultValue:.02,min:0,max:.5,step:.01,unit:\"s\"},randomize:{type:ControlType.Boolean,title:\"Random Pattern\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0, 0, 0, 0)\"},pixelColor:{type:ControlType.Color,title:\"Pixel Color\",defaultValue:\"#808080\"},positionMode:{type:ControlType.Enum,title:\"Position\",defaultValue:\"full\",options:[\"full\",\"left\",\"right\",\"top\",\"bottom\",\"custom\"],optionTitles:[\"Full\",\"Left Half\",\"Right Half\",\"Top Half\",\"Bottom Half\",\"Custom\"]},customLeft:{type:ControlType.Number,title:\"Left %\",defaultValue:0,min:0,max:100,step:1,unit:\"%\",hidden:props=>props.positionMode!==\"custom\"},customRight:{type:ControlType.Number,title:\"Right %\",defaultValue:100,min:0,max:100,step:1,unit:\"%\",hidden:props=>props.positionMode!==\"custom\"},customTop:{type:ControlType.Number,title:\"Top %\",defaultValue:0,min:0,max:100,step:1,unit:\"%\",hidden:props=>props.positionMode!==\"custom\"},customBottom:{type:ControlType.Number,title:\"Bottom %\",defaultValue:100,min:0,max:100,step:1,unit:\"%\",hidden:props=>props.positionMode!==\"custom\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelPattern\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PixelPattern.map"],"mappings":"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"}