{"version":3,"file":"InteractiveDots.3KHBSEXf.mjs","names":["React.useRef","p"],"sources":["https:/framerusercontent.com/modules/gATuMUIMAPdv3PlkgPD9/OYGfKxtcsl6FwHNmomx7/InteractiveDots.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function InteractiveDotGrid(props){const canvasRef=React.useRef(null);const mouse=React.useRef({x:-1e3,y:-1e3});const isVisible=React.useRef(false);const isDesktop=React.useRef(false);React.useEffect(()=>{const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");let animationFrameId;let particles=[];const checkDevice=()=>{isDesktop.current=window.innerWidth>1024;};const resize=()=>{canvas.width=canvas.offsetWidth;canvas.height=canvas.offsetHeight;initParticles();if(!isDesktop.current)drawStatic();};const initParticles=()=>{particles=[];for(let x=props.spacing/2;x<canvas.width;x+=props.spacing){for(let y=props.spacing/2;y<canvas.height;y+=props.spacing){particles.push({x:x,y:y,baseX:x,baseY:y});}}};const drawStatic=()=>{ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle=props.dotColor;particles.forEach(p=>{ctx.beginPath();ctx.arc(p.baseX,p.baseY,props.dotSize,0,Math.PI*2);ctx.fill();});};const draw=()=>{if(!isVisible.current||!isDesktop.current){animationFrameId=requestAnimationFrame(draw);return;}ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle=props.dotColor;particles.forEach(p=>{let dx=mouse.current.x-p.baseX;let dy=mouse.current.y-p.baseY;let distance=Math.sqrt(dx*dx+dy*dy);let targetX=p.baseX;let targetY=p.baseY;if(distance<props.hoverRadius){const force=(props.hoverRadius-distance)/props.hoverRadius;targetX-=dx*force*.6;targetY-=dy*force*.6;}p.x+=(targetX-p.x)*.1;p.y+=(targetY-p.y)*.1;ctx.beginPath();ctx.arc(p.x,p.y,props.dotSize,0,Math.PI*2);ctx.fill();});animationFrameId=requestAnimationFrame(draw);};const observer=new IntersectionObserver(([entry])=>{isVisible.current=entry.isIntersecting;},{threshold:.1});const handleMouseMove=e=>{if(!isDesktop.current)return;const rect=canvas.getBoundingClientRect();mouse.current.x=e.clientX-rect.left;mouse.current.y=e.clientY-rect.top;};const handleMouseLeave=()=>{mouse.current.x=-1e3;mouse.current.y=-1e3;};observer.observe(canvas);window.addEventListener(\"resize\",()=>{checkDevice();resize();});window.addEventListener(\"mousemove\",handleMouseMove);window.addEventListener(\"mouseleave\",handleMouseLeave);checkDevice();resize();draw();return()=>{observer.disconnect();window.removeEventListener(\"resize\",resize);window.removeEventListener(\"mousemove\",handleMouseMove);window.removeEventListener(\"mouseleave\",handleMouseLeave);cancelAnimationFrame(animationFrameId);};},[props.dotColor,props.spacing,props.dotSize,props.hoverRadius]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",backgroundColor:props.backgroundColor,display:\"block\"}});}addPropertyControls(InteractiveDotGrid,{dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"rgba(100, 130, 140, 0.4)\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"transparent\"},spacing:{type:ControlType.Number,title:\"Spacing\",defaultValue:36,min:10,max:100},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:1.5,min:.5,max:10,step:.1},hoverRadius:{type:ControlType.Number,title:\"Hover Radius\",defaultValue:120,min:0,max:300}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"InteractiveDotGrid\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./InteractiveDots.map"],"mappings":"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"}