{"version":3,"file":"ClickSpark.Cbp3l-Rn.mjs","names":["useRef","useCallback"],"sources":["https:/framerusercontent.com/modules/lukGAMaxfFJNYLUqTOXj/DMDjp5vVRTuKZFZYLkIY/ClickSpark.js"],"sourcesContent":["// Click Spark component that creates animated sparks on click\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 100\n * @framerIntrinsicHeight 100\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ClickSpark(props){const{sparkColor=\"#FFFFFF\",sparkSize=10,sparkRadius=15,sparkCount=8,duration=400,easing=\"ease-out\",extraScale=1,style}=props;const canvasRef=useRef(null);const sparksRef=useRef([]);const startTimeRef=useRef(null);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;let resizeTimeout;const resizeCanvas=()=>{if(typeof window!==\"undefined\"){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}};const handleResize=()=>{if(typeof window!==\"undefined\"){clearTimeout(resizeTimeout);resizeTimeout=window.setTimeout(resizeCanvas,100);}};if(typeof window!==\"undefined\"){resizeCanvas();window.addEventListener(\"resize\",handleResize);return()=>{window.removeEventListener(\"resize\",handleResize);clearTimeout(resizeTimeout);};}},[]);const easeFunc=useCallback(t=>{switch(easing){case\"linear\":return t;case\"ease-in\":return t*t;case\"ease-in-out\":return t<.5?2*t*t:-1+(4-2*t)*t;default:return t*(2-t);}},[easing]);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;let animationId;const draw=timestamp=>{if(!startTimeRef.current){startTimeRef.current=timestamp;}ctx?.clearRect(0,0,canvas.width,canvas.height);sparksRef.current=sparksRef.current.filter(spark=>{const elapsed=timestamp-spark.startTime;if(elapsed>=duration){return false;}const progress=elapsed/duration;const eased=easeFunc(progress);const distance=eased*sparkRadius*extraScale;const lineLength=sparkSize*(1-eased);const x1=spark.x+distance*Math.cos(spark.angle);const y1=spark.y+distance*Math.sin(spark.angle);const x2=spark.x+(distance+lineLength)*Math.cos(spark.angle);const y2=spark.y+(distance+lineLength)*Math.sin(spark.angle);ctx.strokeStyle=sparkColor;ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();return true;});if(typeof window!==\"undefined\"){animationId=requestAnimationFrame(draw);}};if(typeof window!==\"undefined\"){animationId=requestAnimationFrame(draw);}return()=>{if(typeof window!==\"undefined\"){cancelAnimationFrame(animationId);}};},[sparkColor,sparkSize,sparkRadius,sparkCount,duration,easeFunc,extraScale]);const handleClick=e=>{const x=e.clientX;const y=e.clientY;if(typeof window!==\"undefined\"){const now=performance.now();const newSparks=Array.from({length:sparkCount},(_,i)=>({x,y,angle:2*Math.PI*i/sparkCount,startTime:now}));startTransition(()=>{sparksRef.current.push(...newSparks);});}};useEffect(()=>{if(typeof window===\"undefined\")return;window.addEventListener(\"click\",handleClick);return()=>{window.removeEventListener(\"click\",handleClick);};},[sparkCount]);return /*#__PURE__*/_jsx(\"div\",{style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",minWidth:\"5px\",minHeight:\"5px\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{position:\"fixed\",top:0,left:0,width:\"100vw\",height:\"100vh\",zIndex:9999,pointerEvents:\"none\"}})});}addPropertyControls(ClickSpark,{sparkColor:{type:ControlType.Color,title:\"Spark Color\",defaultValue:\"#FFFFFF\"},sparkSize:{type:ControlType.Number,title:\"Spark Size\",defaultValue:10,min:1,max:50,step:1},sparkRadius:{type:ControlType.Number,title:\"Spark Radius\",defaultValue:15,min:5,max:100,step:1},sparkCount:{type:ControlType.Number,title:\"Spark Count\",defaultValue:8,min:3,max:20,step:1},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:400,min:100,max:2e3,step:50,unit:\"ms\"},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"linear\",\"ease-in\",\"ease-out\",\"ease-in-out\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\"],defaultValue:\"ease-out\"},extraScale:{type:ControlType.Number,title:\"Extra Scale\",defaultValue:1,min:.1,max:3,step:.1,description:\"More Components at [DiverseKit](https://framer.link/se2heI4)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ClickSpark\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"100\",\"framerIntrinsicHeight\":\"100\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ClickSpark.map"],"mappings":"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"}