{"version":3,"file":"SpringVisualiser.BQLzevcm.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/zHKSLOAckjaYbPt3V0fn/tqIazSjPy27macrnFm0i/SpringVisualiser.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState}from\"react\";import{clamp,spring}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";const baseOptions={keyframes:[0,1],restSpeed:5e-6,restDelta:1e-6};function buildPath({width,height,margin},{type,stiffness,damping,mass,duration,bounce,isVisualDuration}){let generator;if(type===\"time\"){if(isVisualDuration){const root=2*Math.PI/(duration*1.2);stiffness=root*root;damping=2*clamp(.05,1,1-bounce)*Math.sqrt(stiffness);generator=spring({stiffness,damping,mass,...baseOptions});}else{generator=spring({duration:duration*1e3,bounce,...baseOptions});}}else{generator=spring({stiffness,damping,mass,...baseOptions});}let curve=`M${margin} ${margin+height}`;let durationMarker=\"\";duration=duration*1e3;const step=type===\"time\"?3:2;for(let i=0;i<=width;i++){const t=i*step;if(type===\"time\"&&t>duration&&durationMarker===\"\"){durationMarker=`M${margin+i} ${margin} L${margin+i} ${margin+height}`;}curve+=`L${margin+i} ${margin+(height-generator.next(t).value*(height/2))}`;}return{curve,durationMarker};}/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/components/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function SpringVisualiser(props){const[type,setType]=useState(\"time\");const[stiffness,setStiffness]=useState(props.stiffness);const[damping,setDamping]=useState(props.damping);const[mass,setMass]=useState(props.mass);const[duration,setDuration]=useState(props.duration);const[bounce,setBounce]=useState(props.bounce);const[isVisualDuration,setIsVisualDuration]=useState(props.isVisualDuration);return /*#__PURE__*/_jsxs(\"section\",{className:\"spring-visualiser\",children:[/*#__PURE__*/_jsx(Graph,{...props,type:type,stiffness:stiffness,damping:damping,mass:mass,duration:duration,bounce:bounce,isVisualDuration:isVisualDuration}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:10,paddingTop:10},children:[/*#__PURE__*/_jsx(\"div\",{className:\"select-container\",children:/*#__PURE__*/_jsxs(\"select\",{value:type,onChange:e=>setType(e.target.value),children:[/*#__PURE__*/_jsx(\"option\",{value:\"time\",children:\"Time\"},\"time\"),/*#__PURE__*/_jsx(\"option\",{value:\"physics\",children:\"Physics\"},\"physics\")]})}),type===\"physics\"?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(\"label\",{children:[/*#__PURE__*/_jsx(\"span\",{children:\"Stiffness\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"inputs\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"number\",min:\"10\",max:\"2000\",step:\"1\",value:stiffness,onChange:e=>setStiffness(Number(e.target.value))}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"10\",max:\"2000\",step:\"1\",value:stiffness,onChange:e=>setStiffness(Number(e.target.value))})]})]}),/*#__PURE__*/_jsxs(\"label\",{children:[/*#__PURE__*/_jsx(\"span\",{children:\"Damping\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"inputs\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"number\",min:\"0\",max:\"200\",step:\"1\",value:damping,onChange:e=>setDamping(Number(e.target.value))}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"0\",max:\"200\",step:\"1\",value:damping,onChange:e=>setDamping(Number(e.target.value))})]})]}),/*#__PURE__*/_jsxs(\"label\",{children:[/*#__PURE__*/_jsx(\"span\",{children:\"Mass\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"inputs\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"number\",min:\"0.1\",max:\"5\",step:\"0.1\",value:mass,onChange:e=>setMass(Number(e.target.value))}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"0.1\",max:\"5\",step:\"0.1\",value:mass,onChange:e=>setMass(Number(e.target.value))})]})]})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(\"label\",{children:[/*#__PURE__*/_jsx(\"span\",{children:\"Duration\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"inputs\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"number\",min:\"0.1\",max:\"2\",step:\"0.05\",value:duration,onChange:e=>setDuration(Number(e.target.value))}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"0.1\",max:\"2\",step:\"0.05\",value:duration,onChange:e=>setDuration(Number(e.target.value))})]})]}),/*#__PURE__*/_jsxs(\"label\",{children:[/*#__PURE__*/_jsx(\"span\",{children:\"Bounce\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"inputs\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"number\",min:\"0\",max:\"1\",step:\"0.01\",value:bounce,onChange:e=>setBounce(Number(e.target.value))}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"0\",max:\"1\",step:\"0.01\",value:bounce,onChange:e=>setBounce(Number(e.target.value))})]})]}),/*#__PURE__*/_jsxs(\"label\",{className:\"use-visual-duration\",children:[/*#__PURE__*/_jsx(\"input\",{type:\"checkbox\",checked:isVisualDuration,onChange:e=>setIsVisualDuration(e.target.checked)}),\"Use visual duration\"]})]})]})]});}function Graph({margin=0,lineColor=\"#4FF0B7\",durationColor=\"#2B323D\",lineWidth=2,...springOptions}){const width=500;const height=300;const path=buildPath({width,height,margin},springOptions);return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsxs(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",width:\"100%\",height:\"100%\",viewBox:`0 0 ${width} ${height}`,children:[/*#__PURE__*/_jsx(\"path\",{d:path.durationMarker,fill:\"transparent\",stroke:durationColor,strokeWidth:lineWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:path.curve,fill:\"transparent\",stroke:lineColor,strokeWidth:lineWidth,strokeLinecap:\"round\",strokeLinejoin:\"round\"})]})});}// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\nconst containerStyle={height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};addPropertyControls(SpringVisualiser,{duration:{type:ControlType.Number,title:\"Duration\",defaultValue:.5,min:0,max:2,step:.05},bounce:{type:ControlType.Number,title:\"Bounce\",defaultValue:.3,min:0,max:1,step:.05},stiffness:{type:ControlType.Number,title:\"Stiffness\",defaultValue:1e3,step:1,min:0,max:2e3},damping:{type:ControlType.Number,title:\"Damping\",min:0,max:200,defaultValue:100,step:1},mass:{type:ControlType.Number,title:\"Mass\",defaultValue:1,min:0,max:10,step:.1},lineColor:{type:ControlType.Color,title:\"Line color\",defaultValue:\"#4FF0B7\"},durationColor:{type:ControlType.Color,title:\"Duration color\",defaultValue:\"#2B323D\"},isVisualDuration:{type:ControlType.Boolean,title:\"Use visual duration\",defaultValue:true},margin:{type:ControlType.Number,title:\"Margin\",defaultValue:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SpringVisualiser\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SpringVisualiser.map"],"mappings":"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"}