{"version":3,"file":"InteractiveDotGrid_1.5MsAwGfh.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/qEw2E1QBHAljABJJYcW3/2dM9NFG6Jmq01DkqOxDk/InteractiveDotGrid_1.js"],"sourcesContent":["// Interactive dot grid with mouse hover distortion effect\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Interactive Dot Grid\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 600\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function InteractiveDotGrid(props){const{dotSize=1,dotSpacing=20,dotColor=\"#FFFFFF\",backgroundColor=\"#000000\",distortionRadius=100,distortionStrength=30,animationSpeed=.15}=props;const canvasRef=useRef(null);const mousePos=useRef({x:-1e3,y:-1e3});const animationFrameId=useRef();const needsUpdateRef=useRef(true);const dotsRef=useRef([]);const isStatic=useIsStaticRenderer();// Initialize dots based on canvas size\nconst initializeDots=(width,height)=>{const cols=Math.ceil(width/dotSpacing);const rows=Math.ceil(height/dotSpacing);dotsRef.current=[];for(let row=0;row<rows;row++){for(let col=0;col<cols;col++){const x=col*dotSpacing+dotSpacing/2;const y=row*dotSpacing+dotSpacing/2;dotsRef.current.push({originalX:x,originalY:y,currentX:x,currentY:y,randomOffsetX:0,randomOffsetY:0,isRandomized:false,col,row});}}};useEffect(()=>{if(isStatic)return;const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;const resizeCanvas=()=>{const rect=canvas.getBoundingClientRect();canvas.width=rect.width;canvas.height=rect.height;initializeDots(canvas.width,canvas.height);needsUpdateRef.current=true;};// Initial setup\nresizeCanvas();// Add resize observer\nconst resizeObserver=new ResizeObserver(()=>{resizeCanvas();});resizeObserver.observe(canvas);const animate=()=>{// Only clear and redraw if something changed\nif(needsUpdateRef.current){ctx.clearRect(0,0,canvas.width,canvas.height);// Calculate which dots to check based on mouse position\nconst mouseCol=Math.floor(mousePos.current.x/dotSpacing);const mouseRow=Math.floor(mousePos.current.y/dotSpacing);const checkRadius=Math.ceil(distortionRadius/dotSpacing)+1;// Batch rendering\nctx.fillStyle=dotColor;ctx.beginPath();let hasMovingDots=false;dotsRef.current.forEach(dot=>{// Only check distance for dots near the mouse\nconst colDiff=Math.abs(dot.col-mouseCol);const rowDiff=Math.abs(dot.row-mouseRow);if(colDiff<=checkRadius&&rowDiff<=checkRadius){const dx=mousePos.current.x-dot.originalX;const dy=mousePos.current.y-dot.originalY;const distance=Math.sqrt(dx*dx+dy*dy);let targetX=dot.originalX;let targetY=dot.originalY;if(distance<distortionRadius){if(!dot.isRandomized){dot.randomOffsetX=(Math.random()-.5)*distortionStrength*2;dot.randomOffsetY=(Math.random()-.5)*distortionStrength*2;dot.isRandomized=true;}targetX=dot.originalX+dot.randomOffsetX;targetY=dot.originalY+dot.randomOffsetY;}else{if(dot.isRandomized){dot.isRandomized=false;}}// Smooth interpolation\nconst oldX=dot.currentX;const oldY=dot.currentY;dot.currentX+=(targetX-dot.currentX)*animationSpeed;dot.currentY+=(targetY-dot.currentY)*animationSpeed;// Check if still moving\nif(Math.abs(dot.currentX-targetX)>.1||Math.abs(dot.currentY-targetY)>.1){hasMovingDots=true;}}else{// Reset dots far from mouse\nif(dot.isRandomized){dot.isRandomized=false;}const targetX=dot.originalX;const targetY=dot.originalY;dot.currentX+=(targetX-dot.currentX)*animationSpeed;dot.currentY+=(targetY-dot.currentY)*animationSpeed;if(Math.abs(dot.currentX-targetX)>.1||Math.abs(dot.currentY-targetY)>.1){hasMovingDots=true;}}ctx.moveTo(dot.currentX+dotSize/2,dot.currentY);ctx.arc(dot.currentX,dot.currentY,dotSize/2,0,Math.PI*2);});ctx.fill();// Only continue animating if dots are still moving\nneedsUpdateRef.current=hasMovingDots;}animationFrameId.current=requestAnimationFrame(animate);};animate();return()=>{if(animationFrameId.current){cancelAnimationFrame(animationFrameId.current);}resizeObserver.disconnect();};},[dotSize,dotSpacing,dotColor,backgroundColor,distortionRadius,distortionStrength,animationSpeed,isStatic]);const handleMouseMove=e=>{if(isStatic)return;const canvas=canvasRef.current;if(!canvas)return;const rect=canvas.getBoundingClientRect();mousePos.current={x:e.clientX-rect.left,y:e.clientY-rect.top};needsUpdateRef.current=true;};const handleMouseLeave=()=>{if(isStatic)return;mousePos.current={x:-1e3,y:-1e3};needsUpdateRef.current=true;};// Static preview rendering in useEffect\nuseEffect(()=>{if(!isStatic)return;const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;const rect=canvas.getBoundingClientRect();canvas.width=rect.width;canvas.height=rect.height;ctx.fillStyle=backgroundColor;ctx.fillRect(0,0,canvas.width,canvas.height);const cols=Math.ceil(canvas.width/dotSpacing);const rows=Math.ceil(canvas.height/dotSpacing);ctx.fillStyle=dotColor;for(let row=0;row<rows;row++){for(let col=0;col<cols;col++){const x=col*dotSpacing+dotSpacing/2;const y=row*dotSpacing+dotSpacing/2;ctx.beginPath();ctx.arc(x,y,dotSize/2,0,Math.PI*2);ctx.fill();}}},[isStatic,dotSize,dotSpacing,dotColor,backgroundColor]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",cursor:\"none\"},onMouseMove:isStatic?undefined:handleMouseMove,onMouseLeave:isStatic?undefined:handleMouseLeave});}addPropertyControls(InteractiveDotGrid,{dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:1,min:.5,max:5,step:.5,unit:\"px\"},dotSpacing:{type:ControlType.Number,title:\"Dot Spacing\",defaultValue:20,min:10,max:50,step:1,unit:\"px\"},dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"#FFFFFF\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},distortionRadius:{type:ControlType.Number,title:\"Distortion Radius\",defaultValue:100,min:50,max:300,step:10,unit:\"px\"},distortionStrength:{type:ControlType.Number,title:\"Distortion Strength\",defaultValue:30,min:0,max:100,step:5,unit:\"px\"},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:.15,min:.05,max:.5,step:.05}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"InteractiveDotGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"800\",\"framerIntrinsicHeight\":\"600\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./InteractiveDotGrid_1.map"],"mappings":"0LASG,SAAwB,EAAmB,EAAM,CAAC,GAAK,CAAC,UAAQ,EAAE,aAAW,GAAG,WAAS,UAAU,kBAAgB,UAAU,mBAAiB,IAAI,qBAAmB,GAAG,iBAAe,KAAK,EAAY,EAAUA,EAAO,KAAK,CAAO,EAASA,EAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAO,EAAiBA,GAAQ,CAAO,EAAeA,EAAO,GAAK,CAAO,EAAQA,EAAO,EAAE,CAAC,CAAO,EAAS,GAAqB,CAClY,GAAgB,EAAM,IAAS,CAAC,IAAM,EAAK,KAAK,KAAK,EAAM,EAAW,CAAO,EAAK,KAAK,KAAK,EAAO,EAAW,CAAC,EAAQ,QAAQ,EAAE,CAAC,IAAI,IAAI,EAAI,EAAE,EAAI,EAAK,IAAO,IAAI,IAAI,EAAI,EAAE,EAAI,EAAK,IAAM,CAAC,IAAM,EAAE,EAAI,EAAW,EAAW,EAAQ,EAAE,EAAI,EAAW,EAAW,EAAE,EAAQ,QAAQ,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,GAAM,MAAI,MAAI,CAAC,GAWkR,OAX7Q,MAAc,CAAC,GAAG,EAAS,OAAO,IAAM,EAAO,EAAU,QAAQ,GAAG,CAAC,EAAO,OAAO,IAAM,EAAI,EAAO,WAAW,KAAK,CAAC,GAAG,CAAC,EAAI,OAAO,IAAM,MAAiB,CAAC,IAAM,EAAK,EAAO,uBAAuB,CAAC,EAAO,MAAM,EAAK,MAAM,EAAO,OAAO,EAAK,OAAO,EAAe,EAAO,MAAM,EAAO,OAAO,CAAC,EAAe,QAAQ,IAC3sB,GAAc,CACd,IAAM,EAAe,IAAI,mBAAmB,CAAC,GAAc,EAAG,CAAC,EAAe,QAAQ,EAAO,CAAC,IAAM,MAAY,CAChH,GAAG,EAAe,QAAQ,CAAC,EAAI,UAAU,EAAE,EAAE,EAAO,MAAM,EAAO,OAAO,CACxE,IAAM,EAAS,KAAK,MAAM,EAAS,QAAQ,EAAE,EAAW,CAAO,EAAS,KAAK,MAAM,EAAS,QAAQ,EAAE,EAAW,CAAO,EAAY,KAAK,KAAK,EAAiB,EAAW,CAAC,EAC3K,EAAI,UAAU,EAAS,EAAI,WAAW,CAAC,IAAI,EAAc,GAAM,EAAQ,QAAQ,QAAQ,GAAK,CAC5F,IAAM,EAAQ,KAAK,IAAI,EAAI,IAAI,EAAS,CAAO,EAAQ,KAAK,IAAI,EAAI,IAAI,EAAS,CAAC,GAAG,GAAS,GAAa,GAAS,EAAY,CAAC,IAAM,EAAG,EAAS,QAAQ,EAAE,EAAI,UAAgB,EAAG,EAAS,QAAQ,EAAE,EAAI,UAAgB,EAAS,KAAK,KAAK,EAAG,EAAG,EAAG,EAAG,CAAK,EAAQ,EAAI,UAAc,EAAQ,EAAI,UAAa,EAAS,GAAkB,AAA0I,EAAI,gBAAxH,EAAI,eAAe,KAAK,QAAQ,CAAC,IAAI,EAAmB,EAAE,EAAI,eAAe,KAAK,QAAQ,CAAC,IAAI,EAAmB,EAAmB,IAAM,EAAQ,EAAI,UAAU,EAAI,cAAc,EAAQ,EAAI,UAAU,EAAI,eAAyC,EAAI,eAAa,GAC/lB,EAAI,SAAoB,EAAI,SAAS,EAAI,WAAW,EAAQ,EAAI,UAAU,EAAe,EAAI,WAAW,EAAQ,EAAI,UAAU,GACtI,KAAK,IAAI,EAAI,SAAS,EAAQ,CAAC,IAAI,KAAK,IAAI,EAAI,SAAS,EAAQ,CAAC,MAAI,EAAc,QAAW,CAClG,AAAqB,EAAI,eAAa,GAAO,IAAM,EAAQ,EAAI,UAAgB,EAAQ,EAAI,UAAU,EAAI,WAAW,EAAQ,EAAI,UAAU,EAAe,EAAI,WAAW,EAAQ,EAAI,UAAU,GAAkB,KAAK,IAAI,EAAI,SAAS,EAAQ,CAAC,IAAI,KAAK,IAAI,EAAI,SAAS,EAAQ,CAAC,MAAI,EAAc,IAAO,EAAI,OAAO,EAAI,SAAS,EAAQ,EAAE,EAAI,SAAS,CAAC,EAAI,IAAI,EAAI,SAAS,EAAI,SAAS,EAAQ,EAAE,EAAE,KAAK,GAAG,EAAE,EAAG,CAAC,EAAI,MAAM,CACja,EAAe,QAAQ,EAAe,EAAiB,QAAQ,sBAAsB,EAAQ,EAAa,OAAV,GAAS,KAAW,CAAI,EAAiB,SAAS,qBAAqB,EAAiB,QAAQ,CAAE,EAAe,YAAY,GAAK,CAAC,EAAQ,EAAW,EAAS,EAAgB,EAAiB,EAAmB,EAAe,EAAS,CAAC,CAC5U,MAAc,CAAC,GAAG,CAAC,EAAS,OAAO,IAAM,EAAO,EAAU,QAAQ,GAAG,CAAC,EAAO,OAAO,IAAM,EAAI,EAAO,WAAW,KAAK,CAAC,GAAG,CAAC,EAAI,OAAO,IAAM,EAAK,EAAO,uBAAuB,CAAC,EAAO,MAAM,EAAK,MAAM,EAAO,OAAO,EAAK,OAAO,EAAI,UAAU,EAAgB,EAAI,SAAS,EAAE,EAAE,EAAO,MAAM,EAAO,OAAO,CAAC,IAAM,EAAK,KAAK,KAAK,EAAO,MAAM,EAAW,CAAO,EAAK,KAAK,KAAK,EAAO,OAAO,EAAW,CAAC,EAAI,UAAU,EAAS,IAAI,IAAI,EAAI,EAAE,EAAI,EAAK,IAAO,IAAI,IAAI,EAAI,EAAE,EAAI,EAAK,IAAM,CAAC,IAAM,EAAE,EAAI,EAAW,EAAW,EAAQ,EAAE,EAAI,EAAW,EAAW,EAAE,EAAI,WAAW,CAAC,EAAI,IAAI,EAAE,EAAE,EAAQ,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,EAAI,MAAM,GAAK,CAAC,EAAS,EAAQ,EAAW,EAAS,EAAgB,CAAC,CAAqB,EAAK,SAAS,CAAC,IAAI,EAAU,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,QAAQ,OAAO,OAAO,CAAC,YAAY,EAAS,IAAA,GADlc,GAAG,CAAC,GAAG,EAAS,OAAO,IAAM,EAAO,EAAU,QAAQ,GAAG,CAAC,EAAO,OAAO,IAAM,EAAK,EAAO,uBAAuB,CAAC,EAAS,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAK,IAAI,CAAC,EAAe,QAAQ,IACqR,aAAa,EAAS,IAAA,OADzQ,CAAI,IAAgB,EAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAe,QAAQ,KACwN,CAAC,kBApBt0B,IAAoC,IAAwE,CAoB4tB,EAAoB,EAAmB,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,iBAAiB,CAAC,KAAK,EAAY,OAAO,MAAM,oBAAoB,aAAa,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG,KAAK,KAAK,CAAC,mBAAmB,CAAC,KAAK,EAAY,OAAO,MAAM,sBAAsB,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,eAAe,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,IAAI,IAAI,IAAI,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC"}