{"version":3,"file":"PulsatingDots_2.B8LPqolt.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/eehosYHl7ldgwuq7aCix/f3YhT9S1W8F8ZsCEbe9A/PulsatingDots_2.js"],"sourcesContent":["// Visual component with pulsating dots at every grid intersection, random on/off pattern, color changes only when invisible\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function PulsatingDots(props){const{gridSize=40,dotSize=8,speed=1,randomness=1,color1=\"#0099FF\",color2=\"#FF5588\",enableFade=true,fadeSpeed=1,style={}}=props;const isStatic=useIsStaticRenderer();const width=typeof style.width===\"number\"?style.width:400;const height=typeof style.height===\"number\"?style.height:300;const padding=typeof props.padding===\"number\"?props.padding:0;const innerWidth=width-2*padding;const innerHeight=height-2*padding;const gridCols=Math.max(1,Math.floor(innerWidth/gridSize));const gridRows=Math.max(1,Math.floor(innerHeight/gridSize));// Alignment offset\nlet offsetX=0,offsetY=0;if(props.gridAlign===\"center\"){offsetX=(innerWidth-gridCols*gridSize)/2;offsetY=(innerHeight-gridRows*gridSize)/2;}else if(props.gridAlign===\"bottom\"){offsetY=innerHeight-gridRows*gridSize;}else if(props.gridAlign===\"right\"){offsetX=innerWidth-gridCols*gridSize;}// top/left is default (0)\n// Build dot positions at every grid intersection, with padding and alignment\nconst dots=[];for(let col=0;col<=gridCols;col++){for(let row=0;row<=gridRows;row++){dots.push({id:`${col}-${row}`,x:padding+offsetX+col*gridSize,y:padding+offsetY+row*gridSize});}}// State: for each dot, track visible (boolean) and color (color1/color2)\nconst[dotStates,setDotStates]=useState(()=>dots.map(()=>({visible:Math.random()>.5,color:color1})));const dotStatesRef=useRef(dotStates);dotStatesRef.current=dotStates;// Randomly update dot visibility and color\nuseEffect(()=>{if(isStatic)return;let mounted=true;function updateDots(){setDotStates(prev=>prev.map((state,i)=>{// Randomly decide if this dot should toggle\n    if(Math.random()<.08*randomness){// If currently visible, turn invisible (keep color)\n    if(state.visible){return{...state,visible:false};}else{// If currently invisible, become visible and swap color\n    return{visible:true,color:state.color===color1?color2:color1};}}return state;}));}const interval=setInterval(updateDots,enableFade?60/fadeSpeed:60/speed);return()=>{mounted=false;clearInterval(interval);};},[dots.length,color1,color2,speed,enableFade,fadeSpeed,isStatic]);// Reset all dot colors if color1/color2 changes\nuseEffect(()=>{setDotStates(states=>states.map(state=>({...state,color:color1})));},[color1,dots.length]);if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\"},children:dots.map((dot,i)=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:dot.x-dotSize/2,top:dot.y-dotSize/2,width:dotSize,height:dotSize,borderRadius:\"50%\",backgroundColor:color1,opacity:.7}},dot.id))});}return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\"},children:dots.map((dot,i)=>{const state=dotStates[i]||{visible:true,color:color1};return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:dot.x-dotSize/2,top:dot.y-dotSize/2,width:dotSize,height:dotSize,borderRadius:\"50%\",backgroundColor:state.color,opacity:state.visible?1:0,transition:enableFade?`opacity ${.18/fadeSpeed}s linear`:\"opacity 0s\"}},dot.id);})});}addPropertyControls(PulsatingDots,{gridSize:{type:ControlType.Number,title:\"Grid Size\",defaultValue:40,min:10,max:100,step:2,unit:\"px\"},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:8,min:2,max:32,step:1,unit:\"px\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.1,max:3,step:.1},randomness:{type:ControlType.Number,title:\"Randomness\",defaultValue:1,min:.1,max:3,step:.1},color1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#0099FF\"},color2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#FF5588\"},enableFade:{type:ControlType.Boolean,title:\"Fade In/Out\",defaultValue:true,enabledTitle:\"Fade\",disabledTitle:\"Sharp\"},fadeSpeed:{type:ControlType.Number,title:\"Fade Speed\",defaultValue:1,min:.1,max:3,step:.1,hidden:({enableFade})=>!enableFade},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,max:100,step:1,unit:\"px\"},gridAlign:{type:ControlType.Enum,title:\"Grid Align\",defaultValue:\"center\",options:[\"top\",\"center\",\"bottom\",\"left\",\"right\"],optionTitles:[\"Top\",\"Center\",\"Bottom\",\"Left\",\"Right\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PulsatingDots\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PulsatingDots_2.map"],"mappings":"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"}