{"version":3,"file":"PixelatedAnimation.DOCfR9OQ.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/tZ0NPvPjQQNp6mMxzMZ9/0cuB0L2YupQ13wJbNIrM/PixelatedAnimation.js"],"sourcesContent":["// Pixelated grid animation with configurable colors and animation controls based on user specified image\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useRef,useMemo,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Pixelated Grid Animation\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function PixelatedAnimation(props){const{pixelSize,color,specialColor,background,specialPercentage,animationDuration,animate,borderRadius,pixelDensity,avoidCenter,style}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[dimensions,setDimensions]=useState({width:300,height:300});const rows=Math.floor(dimensions.height/pixelSize);const cols=Math.floor(dimensions.width/pixelSize);const total=rows*cols;const numSpecial=Math.max(1,Math.floor(specialPercentage/100*total));const numCircles=Math.max(1,Math.floor(.01*total))// 1% will be circles\n;// Seed for reproducible randomness\nconst[seed]=useState(()=>Math.floor(Math.random()*1e5));// Track visible clusters for animation\nconst[visibleClusters,setVisibleClusters]=useState(0);const[flickerState,setFlickerState]=useState(0);// Observe container size changes\nuseEffect(()=>{if(!containerRef.current)return;const updateDimensions=()=>{if(containerRef.current){const rect=containerRef.current.getBoundingClientRect();startTransition(()=>{setDimensions({width:rect.width||300,height:rect.height||300});});}};updateDimensions();const resizeObserver=new ResizeObserver(updateDimensions);resizeObserver.observe(containerRef.current);return()=>resizeObserver.disconnect();},[]);// Assign special pixels by seeded shuffle\nfunction seededRandom(i){// Simple oscillator\nreturn Math.abs(Math.sin(seed+i*7919))%1;}const specialPixelIdxs=useMemo(()=>{// Assign based on deterministic random\nreturn Array(total).fill(0).map((_,i)=>({i,v:seededRandom(i)})).sort((a,b)=>a.v-b.v).slice(0,numSpecial).map(obj=>obj.i);},[total,numSpecial,seed]);const circlePixelIdxs=useMemo(()=>{// Assign circles based on deterministic random (different offset)\nreturn Array(total).fill(0).map((_,i)=>({i,v:seededRandom(i+12345)})).sort((a,b)=>a.v-b.v).slice(0,numCircles).map(obj=>obj.i);},[total,numCircles,seed]);// Animate pixel appearance\nuseEffect(()=>{if(isStatic){startTransition(()=>{setVisibleClusters(1e3);setFlickerState(0);});return;}if(!animate){startTransition(()=>{setVisibleClusters(1e3);setFlickerState(0);});return;}let timeout;let shown=0;const totalClusters=Math.ceil(total*.05/3)// Estimate cluster count\n;function step(){shown+=1;startTransition(()=>setVisibleClusters(shown));if(shownsetFlickerState(prev=>prev+1));timeout=window.setTimeout(randomFlicker,Math.max(320,animationDuration*6));}randomFlicker();}}shown=0;startTransition(()=>{setVisibleClusters(0);setFlickerState(0);});timeout=window.setTimeout(step,animationDuration);return()=>clearTimeout(timeout);},[rows,cols,animationDuration,animate,isStatic,total,seed]);// Construct pixels\nconst pixels=useMemo(()=>{const result=[];let k=0;// Use clusters instead of full grid\n// Group contiguous pixels together in random clusters\n// Cluster size: 2 to 9 pixels, randomly chosen for each cluster\nconst totalPixels=rows*cols;const taken=Array(totalPixels).fill(false);let clusters=[];let remaining=totalPixels;// Use 5-10% of the grid for more visible pixels\nconst targetPixelCount=Math.floor(totalPixels*(pixelDensity/100));let pixelsToPlace=targetPixelCount;while(pixelsToPlace>0){// Find a random free pixel (not sequential)\nlet attempts=0;let startIdx=-1;while(attempts<100){const randomIdx=Math.floor(Math.abs(Math.sin(seed+attempts*997+clusters.length*313))*totalPixels);if(!taken[randomIdx]){// Check if we should avoid center\nif(avoidCenter){const row=Math.floor(randomIdx/cols);const col=randomIdx%cols;const centerRow=rows/2;const centerCol=cols/2;const radiusRow=rows*.25// 25% of height from center\n;const radiusCol=cols*.25// 25% of width from center\n;// Skip if in central area\nconst inCenterZone=Math.abs(row-centerRow)0&&!taken[ni-cols])nbs.push(ni-cols);if(row0&&!taken[ni-1])nbs.push(ni-1);if(col