{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/qSdo7e8g4IrRlKrhnJdl/yxrYrIsqKvFTbkglIzTu/DotGrid.js"],
  "sourcesContent": ["// White dots on black background, dots thicken variably on hover with smooth animation\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useRef,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Dots Thicken on Hover\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 400\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */function DotGrid(props){const{dotCount,dotCountY,dotMin,dotMax,dotSpacing,backgroundColor,dotColor,animationDuration,style,areaWidth,areaHeight,dotOpacity,dotOpacityHover}=props;const[hovered,setHovered]=useState(false);const isStatic=useIsStaticRenderer();const canvasRef=useRef(null);const[dotStates,setDotStates]=useState(()=>Array(dotCount*dotCountY).fill(0));const[dotTargets,setDotTargets]=useState(()=>Array(dotCount*dotCountY).fill(0));const[mouse,setMouse]=useState({x:-1,y:-1});// Fix: update dotStates and dotTargets arrays if dotCount or dotCountY changes\nuseEffect(()=>{setDotStates(Array(dotCount*dotCountY).fill(0));setDotTargets(Array(dotCount*dotCountY).fill(0));},[dotCount,dotCountY]);const areaRadius=Math.min(areaWidth,areaHeight)/2// radius is half the smallest dimension\n;// Animate dot thickness on hover and mouse move\nuseEffect(()=>{if(isStatic)return;let frame;function animate(){setDotStates(prev=>{let changed=false;const next=prev.map((v,i)=>{const target=dotTargets[i]||0;const delta=target-v;// Smooth step\nconst step=Math.max(.12*Math.abs(delta),.01)*Math.sign(delta);if(Math.abs(delta)>.01){changed=true;return v+step;}else{return target;}});if(changed){frame=requestAnimationFrame(animate);}else{// Reset to 0 if not hovered and not at 0\nif(!hovered&&next.some(v=>v!==0)){for(let i=0;i<next.length;i++){if(next[i]!==0)next[i]=0;}frame=requestAnimationFrame(animate);}}return next;});}if(dotTargets.some((t,i)=>Math.abs(t-dotStates[i])>.01)){frame=requestAnimationFrame(animate);}return()=>cancelAnimationFrame(frame);},[dotTargets,isStatic,dotStates,hovered]);// On hover/mouse move, set target thickness for each dot based on distance to mouse\nuseEffect(()=>{if(isStatic)return;if(hovered&&mouse.x>=0&&mouse.y>=0){const targets=[];for(let y=0;y<dotCountY;y++){for(let x=0;x<dotCount;x++){const dotX=dotSpacing/2+x*dotSpacing;const dotY=dotSpacing/2+y*dotSpacing;const dx=dotX-mouse.x;const dy=dotY-mouse.y;const dist=Math.sqrt(dx*dx+dy*dy);let t=0;if(dist<props.animatedAreaRadius){t=1-dist/props.animatedAreaRadius;t=Math.max(0,Math.min(1,t));t=t*t// ease\n;}targets.push(t);}}setDotTargets(targets);}else if(!hovered){setDotTargets(Array(dotCount*dotCountY).fill(0));}},[hovered,mouse,dotCount,dotCountY,dotSpacing,isStatic,props.animatedAreaRadius]);// Draw dots\nuseEffect(()=>{const ctx=canvasRef.current?.getContext(\"2d\");if(!ctx)return;ctx.clearRect(0,0,areaWidth,areaHeight);ctx.fillStyle=backgroundColor;ctx.fillRect(0,0,areaWidth,areaHeight);for(let y=0;y<dotCountY;y++){for(let x=0;x<dotCount;x++){const idx=y*dotCount+x;const t=dotStates[idx]||0;const r=dotMin+(dotMax-dotMin)*t;let opacity=dotOpacity;if(t>0){opacity=dotOpacity+(dotOpacityHover-dotOpacity)*t;}ctx.globalAlpha=opacity;ctx.beginPath();ctx.arc(dotSpacing/2+x*dotSpacing,dotSpacing/2+y*dotSpacing,r,0,2*Math.PI);ctx.fillStyle=dotColor;ctx.fill();}}ctx.globalAlpha=1;},[dotStates,dotCount,dotCountY,dotSpacing,dotMin,dotMax,backgroundColor,dotColor,areaWidth,areaHeight,dotOpacity,dotOpacityHover]);function handleMouseMove(e){if(isStatic)return;const rect=e.currentTarget.getBoundingClientRect();const x=(e.clientX-rect.left)/rect.width*areaWidth;const y=(e.clientY-rect.top)/rect.height*areaHeight;startTransition(()=>setMouse({x,y}));}function handleMouseLeave(){if(isStatic)return;startTransition(()=>setHovered(false));startTransition(()=>setMouse({x:-1,y:-1}));// Reset dotTargets to normal state on mouse leave\nsetDotTargets(Array(dotCount*dotCountY).fill(0));}return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:areaWidth,height:areaHeight,background:backgroundColor,display:\"block\",position:\"relative\",overflow:\"hidden\",cursor:\"pointer\"},onMouseEnter:()=>!isStatic&&startTransition(()=>setHovered(true)),onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave,children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,width:areaWidth,height:areaHeight,style:{width:\"100%\",height:\"100%\",display:\"block\"},\"aria-label\":\"Animated dots\"})});}addPropertyControls(DotGrid,{dotCount:{type:ControlType.Number,title:\"Dots/Row\",defaultValue:16,min:1,max:100,step:1},dotCountY:{type:ControlType.Number,title:\"Dots/Col\",defaultValue:16,min:1,max:100,step:1},dotMin:{type:ControlType.Number,title:\"Min Size\",defaultValue:2,min:1,max:10,step:.5},dotMax:{type:ControlType.Number,title:\"Max Size\",defaultValue:10,min:2,max:30,step:.5},dotSpacing:{type:ControlType.Number,title:\"Spacing\",defaultValue:25,min:10,max:60,step:1},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"#FFFFFF\"},animationDuration:{type:ControlType.Number,title:\"Anim Duration\",defaultValue:.5,min:.1,max:2,step:.05,unit:\"s\"},areaWidth:{type:ControlType.Number,title:\"Width\",defaultValue:1200,min:100,max:2e3,step:1},areaHeight:{type:ControlType.Number,title:\"Height\",defaultValue:800,min:100,max:2e3,step:1},animatedAreaRadius:{type:ControlType.Number,title:\"Hover Area Radius\",defaultValue:200,min:10,max:1e3,step:1},dotOpacity:{type:ControlType.Number,title:\"Dot Opacity\",defaultValue:.5,min:0,max:1,step:.01},dotOpacityHover:{type:ControlType.Number,title:\"Dot Opacity Hover\",defaultValue:1,min:0,max:1,step:.01}});export default DotGrid;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DotGrid\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"400\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DotGrid.map"],
  "mappings": "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",
  "names": ["DotGrid", "props", "dotCount", "dotCountY", "dotMin", "dotMax", "dotSpacing", "backgroundColor", "dotColor", "animationDuration", "style", "areaWidth", "areaHeight", "dotOpacity", "dotOpacityHover", "hovered", "setHovered", "ye", "isStatic", "useIsStaticRenderer", "canvasRef", "pe", "dotStates", "setDotStates", "dotTargets", "setDotTargets", "mouse", "setMouse", "ue", "areaRadius", "frame", "animate", "prev", "changed", "next", "v", "i", "target", "delta", "step", "t", "targets", "y", "x", "dotX", "dotY", "dx", "dy", "dist", "ctx", "idx", "r", "opacity", "handleMouseMove", "e", "rect", "Z", "handleMouseLeave", "p", "addPropertyControls", "ControlType", "DotGrid_default"]
}