{"version":3,"file":"SineWaveVisualizer.B9q-R_3y.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/27RfbKlGLgNFimeJ8o2b/R2m3IWPGGyjqN86tD5JO/SineWaveVisualizer.js"],"sourcesContent":["\"use client\";import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * SineWaveVisualizer\n * A Framer-compatible component that visualizes the relationship\n * between circular motion and a sine wave.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function SineWaveVisualizer(props){const{rotationSpeed=2,amplitude=50,frequency=.02,graphLength=800,waveColor=\"#fff\",dotColor=\"#fff\",circleColor=\"rgba(255, 255, 255, 0.2)\",lineColor=\"rgba(255, 255, 255, 0.5)\",strokeWidth=2,dotSize=6,showCircle=true,showLine=true,zIndex=10,pointerEvents=\"none\",animateEntrance=true,entryDuration=.8,blurAmount=10}=props;const containerRef=useRef(null);const[time,setTime]=useState(0);const[dimensions,setDimensions]=useState({width:0,height:0});// Handle resizing with ResizeObserver for better Framer integration\nuseEffect(()=>{const observer=new ResizeObserver(entries=>{for(let entry of entries){setDimensions({width:entry.contentRect.width,height:entry.contentRect.height});}});if(containerRef.current){observer.observe(containerRef.current);}return()=>observer.disconnect();},[]);// Animation loop\nuseEffect(()=>{let frameId;const animate=()=>{setTime(t=>t+rotationSpeed*.02);frameId=requestAnimationFrame(animate);};frameId=requestAnimationFrame(animate);return()=>cancelAnimationFrame(frameId);},[rotationSpeed]);// Fallback dimensions for initial render in Framer canvas\nconst width=dimensions.width||600;const height=dimensions.height||300;// Positions optimized for larger wave area\nconst centerY=height/2;const circleRadius=amplitude;const circleCenterX=circleRadius+20// Reduced from 40\n;const graphStartX=circleCenterX+circleRadius+20// Reduced from 40\n;// Current dot position on circle\nconst dotX=circleCenterX+Math.cos(time)*circleRadius;const dotY=centerY+Math.sin(time)*circleRadius;// Generate sine wave path\nconst points=[];for(let x=0;x<=graphLength;x+=2){// The sine wave should connect to the current dot's Y position at x=0\n// We offset the internal sine phase by the current time\nconst y=centerY+Math.sin(time-x*frequency)*amplitude;points.push(`${graphStartX+x},${y}`);}const wavePath=`M ${points.join(\" L \")}`;return /*#__PURE__*/_jsx(motion.div,{ref:containerRef,initial:animateEntrance?\"initial\":false,animate:\"animate\",variants:{initial:{opacity:0,filter:`blur(${blurAmount}px)`},animate:{opacity:1,filter:\"blur(0px)\",transition:{duration:entryDuration,ease:\"easeOut\"}}},style:{...containerStyle,zIndex,pointerEvents},children:/*#__PURE__*/_jsxs(\"svg\",{width:graphStartX+graphLength+100,height:\"100%\",style:{overflow:\"visible\"},children:[showCircle&&/*#__PURE__*/_jsx(\"circle\",{cx:circleCenterX,cy:centerY,r:circleRadius,fill:\"none\",stroke:circleColor,strokeWidth:strokeWidth}),showCircle&&/*#__PURE__*/_jsx(\"line\",{x1:circleCenterX,y1:centerY-circleRadius-10,x2:circleCenterX,y2:centerY+circleRadius+10,stroke:circleColor,strokeWidth:1,strokeDasharray:\"4 4\"}),/*#__PURE__*/_jsx(\"circle\",{cx:dotX,cy:dotY,r:dotSize,fill:dotColor,style:{filter:\"drop-shadow(0 0 8px rgba(255,255,255,0.8))\"}}),showLine&&/*#__PURE__*/_jsx(\"line\",{x1:dotX,y1:dotY,x2:graphStartX,y2:dotY,stroke:lineColor,strokeWidth:1,strokeDasharray:\"4 4\"}),/*#__PURE__*/_jsx(\"path\",{d:wavePath,fill:\"none\",stroke:waveColor,strokeWidth:strokeWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\"}),showLine&&/*#__PURE__*/_jsx(\"line\",{x1:graphStartX,y1:dotY,x2:width,y2:dotY,stroke:lineColor,strokeWidth:.5,strokeDasharray:\"2 2\",opacity:.5})]})});}const containerStyle={width:\"100%\",height:\"100%\",minWidth:\"200px\",minHeight:\"150px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:\"transparent\",overflow:\"visible\",position:\"relative\"};// Framer Property Controls\naddPropertyControls(SineWaveVisualizer,{rotationSpeed:{type:ControlType.Number,title:\"Speed\",min:0,max:10,step:.1,defaultValue:2},amplitude:{type:ControlType.Number,title:\"Amplitude\",min:10,max:200,step:1,defaultValue:50},frequency:{type:ControlType.Number,title:\"Frequency\",min:.001,max:.1,step:.001,defaultValue:.02},graphLength:{type:ControlType.Number,title:\"Graph Width\",min:100,max:5e3,step:10,defaultValue:1200},waveColor:{type:ControlType.Color,title:\"Wave Color\",defaultValue:\"#00d1ff\"},dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"#fff\"},circleColor:{type:ControlType.Color,title:\"Circle Color\",defaultValue:\"rgba(255, 255, 255, 0.2)\"},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"rgba(255, 255, 255, 0.5)\"},strokeWidth:{type:ControlType.Number,title:\"Stroke\",min:1,max:10,defaultValue:2},dotSize:{type:ControlType.Number,title:\"Dot Size\",min:1,max:20,defaultValue:6},showCircle:{type:ControlType.Boolean,title:\"Show Circle\",defaultValue:true},showLine:{type:ControlType.Boolean,title:\"Show Line\",defaultValue:true},zIndex:{type:ControlType.Number,title:\"Z Index\",min:-1,max:100,step:1,defaultValue:10},pointerEvents:{type:ControlType.Enum,title:\"Pointer Events\",options:[\"auto\",\"none\"],optionTitles:[\"Interactable\",\"Transparent\"],defaultValue:\"none\"},animateEntrance:{type:ControlType.Boolean,title:\"Animate Entrance\",defaultValue:true},entryDuration:{type:ControlType.Number,title:\"Entry Duration\",min:0,max:5,step:.1,defaultValue:.8},blurAmount:{type:ControlType.Number,title:\"Blur Amount\",min:0,max:50,step:1,defaultValue:10}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SineWaveVisualizer\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SineWaveVisualizer.map"],"mappings":"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"}