{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/9Utm1i17lc4epzKrGohm/6hlvvHhtDnTvfKnremyK/SquiggleEffect.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any-prefer-auto\n * @framerSupportedLayoutHeight any-prefer-auto\n */export default function TurbulentDisplace(props){const{text,font,fontColor,frequency,octaves,scale,animation,mode}=props;const[seed,setSeed]=React.useState(Math.floor(Math.random()*1e3));const[currentScale,setCurrentScale]=React.useState(scale);const[filterKey,setFilterKey]=React.useState(0);const turbulenceRef=React.useRef(null);const displacementMapRef=React.useRef(null);const overlayRef=React.useRef(null);// Use a ref to store a stable filter ID\nconst filterIdRef=`framer-university-${Math.random().toString(36).substr(2,9)}`;React.useEffect(()=>{setCurrentScale(scale);},[scale]);React.useEffect(()=>{setFilterKey(prevKey=>prevKey+1);},[frequency,octaves,scale]);React.useEffect(()=>{if(animation.animate){const interval=setInterval(()=>{const newSeed=Math.floor(Math.random()*1e3);const strengthPercentage=animation.strength/100;const maxDeviation=scale*strengthPercentage;const newScale=scale+(Math.random()*2-1)*maxDeviation;setSeed(newSeed);setCurrentScale(newScale);if(turbulenceRef.current){turbulenceRef.current.setAttribute(\"seed\",newSeed.toString());}if(displacementMapRef.current){displacementMapRef.current.setAttribute(\"scale\",newScale.toString());}if(overlayRef.current){overlayRef.current.style.filter=`url(#${filterIdRef})`;overlayRef.current.style.backdropFilter=`url(#${filterIdRef})`;}},animation.delay);return()=>clearInterval(interval);}},[animation,scale]);const baseFrequency=frequency/100*Math.pow(1.1,octaves-1);const filterSvg=/*#__PURE__*/_jsx(\"svg\",{style:{width:0,height:0,position:\"absolute\"},\"aria-hidden\":\"true\",focusable:\"false\",children:/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"filter\",{id:filterIdRef,\"color-interpolation-filters\":\"sRGB\",children:[/*#__PURE__*/_jsx(\"feTurbulence\",{ref:turbulenceRef,type:\"fractalNoise\",baseFrequency:baseFrequency,numOctaves:octaves,seed:seed,stitchTiles:\"stitch\"}),/*#__PURE__*/_jsx(\"feDisplacementMap\",{ref:displacementMapRef,in:\"SourceGraphic\",scale:currentScale,xChannelSelector:\"R\",yChannelSelector:\"G\"})]})})});const contentStyle={family:\"Inter\",weight:800,fontSize:56,lineHeight:1.2,letterSpacing:\"-0.03em\",...font,color:fontColor,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:font.textAlign===\"center\"?\"center\":font.textAlign===\"right\"?\"flex-end\":\"flex-start\"};const overlayStyle={position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",pointerEvents:\"none\",backdropFilter:`url(#${filterIdRef})`,WebkitBackdropFilter:`url(#${filterIdRef})`,filter:`url(#${filterIdRef})`};return /*#__PURE__*/_jsxs(React.Fragment,{children:[filterSvg,mode===\"overlay\"?/*#__PURE__*/_jsx(\"div\",{ref:overlayRef,style:overlayStyle},filterKey):/*#__PURE__*/_jsx(motion.div,{style:{...contentStyle,filter:`url(#${filterIdRef})`},children:text})]});}TurbulentDisplace.displayName=\"Squiggle Effect\";TurbulentDisplace.defaultProps={mode:\"text\",text:\"Squiggle Effect\",font:{family:\"Inter\",style:\"normal\",weight:800,fontSize:44,lineHeight:1.5,letterSpacing:0,textAlign:\"center\",textTransform:\"none\"},fontColor:\"#fff\",frequency:2,octaves:2,scale:5,animation:{animate:true,strength:5,delay:100}};addPropertyControls(TurbulentDisplace,{mode:{type:ControlType.Enum,title:\"Mode\",options:[\"text\",\"overlay\"],optionTitles:[\"Text\",\"Overlay\"],description:\"Apply 'pointer-events: none' style on the component when using it in overlay mode.\",defaultValue:\"text\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},text:{type:ControlType.String,title:\"Text\",hidden:props=>props.mode===\"overlay\"},font:{type:ControlType.Font,controls:\"extended\",title:\"Font\",hidden:props=>props.mode===\"overlay\"},fontColor:{type:ControlType.Color,title:\"Font Color\",hidden:props=>props.mode===\"overlay\"},frequency:{type:ControlType.Number,title:\"Frequency\",min:0,max:100,step:1},octaves:{type:ControlType.Number,title:\"Octaves\",min:1,max:10,step:1},scale:{type:ControlType.Number,title:\"Scale\",min:1,max:500,step:1},animation:{type:ControlType.Object,description:\"More components at [Framer University](https://framer.university?utm_source=component).\",controls:{animate:{type:ControlType.Boolean,title:\"Animate\"},strength:{type:ControlType.Number,title:\"Flux\",description:\"Controls how much the 'Scale' property fluctuates during the animation, as a percentage of the Scale value.\",min:0,max:100,step:1,unit:\"%\",hidden:props=>!props.animate},delay:{type:ControlType.Number,title:\"Delay\",min:0,max:1e4,step:10,unit:\"ms\",hidden:props=>!props.animate}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TurbulentDisplace\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-auto\",\"framerSupportedLayoutWidth\":\"any-prefer-auto\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SquiggleEffect.map"],
  "mappings": "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",
  "names": ["TurbulentDisplace", "props", "text", "font", "fontColor", "frequency", "octaves", "scale", "animation", "mode", "seed", "setSeed", "ye", "currentScale", "setCurrentScale", "filterKey", "setFilterKey", "turbulenceRef", "pe", "displacementMapRef", "overlayRef", "filterIdRef", "ue", "prevKey", "interval", "newSeed", "strengthPercentage", "maxDeviation", "newScale", "baseFrequency", "filterSvg", "p", "u", "contentStyle", "overlayStyle", "x", "motion", "addPropertyControls", "ControlType"]
}