{"version":3,"file":"TextShuffle.pWUlSu-D.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/1GsHSLq2bLMbYQf3lFo4/P4OIVa5n4ajcHfPJfYaK/TextShuffle.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState,useRef}from\"react\";/**\n * @copyright ©framersnippets.com\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 84\n * @framerDisableUnlink\n **/export default function TextShuffle({content,color,font,triggerEffect,duration,delay,tag}){const[displayedText,setDisplayedText]=useState(content);const scramblerRef=useRef(null);const timeoutIdRef=useRef(null);useEffect(()=>{setDisplayedText(content);scramblerRef.current=scrambleEffect(content,duration);if(triggerEffect===\"Appear\"){timeoutIdRef.current=setTimeout(()=>{scramblerRef.current.start(setDisplayedText);},delay);return()=>clearTimeout(timeoutIdRef.current);}return()=>scramblerRef.current.stop();},[content,triggerEffect,duration,delay]);const handleInteraction=()=>{const scrambler=scrambleEffect(content,duration);scrambler.start(setDisplayedText);};const Tag=tag||\"p\";return /*#__PURE__*/_jsx(Tag,{style:{all:\"unset\",margin:0,padding:0,display:\"flex\",color:color,fontFamily:font.fontFamily,fontSize:font.fontSize,fontWeight:font.fontWeight,lineHeight:font.lineHeight,letterSpacing:font.letterSpacing,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",...font},initial:false,onTap:triggerEffect===\"Hover/Tap\"?handleInteraction:undefined,onMouseEnter:triggerEffect===\"Hover/Tap\"?handleInteraction:undefined,children:displayedText});}addPropertyControls(TextShuffle,{content:{type:ControlType.String,title:\"Content\",defaultValue:\"ShuffleShift\",placeholder:\"Type something…\",displayTextArea:true},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",displayTextAlignment:false,defaultFontType:\"sans-serif\",defaultValue:{fontSize:15,lineHeight:1,letterSpacing:0}},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000\"},triggerEffect:{type:ControlType.Enum,title:\"Effect\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"Hover/Tap\",\"Appear\"],optionTitles:[\"Hover\",\"Appear\"],defaultValue:\"Hover/Tap\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:800,min:100,max:5e3,unit:\"ms\",step:100},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:0,min:0,max:5e3,unit:\"ms\",step:100,hidden:({triggerEffect})=>triggerEffect!==\"Appear\"},tag:{type:ControlType.Enum,title:\"Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\"],optionTitles:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\"],defaultValue:\"p\",description:`\nImportant: Update the component in Framer (Assets > Components > Click purple update button) to prevent crashes.\n`}});function scrambleEffect(originalText,duration=800,characters=\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`~!@#$%^&*()_-+={[}]|\\\\:;\\\"',.?/‛‟„‼‽⁇⁈⁉↑↓\"){const frameRate=40// FPS\n;const totalFrames=Math.max(1,Math.floor(duration/frameRate));let currentFrame=0;const textArray=[...originalText];let intervalId;let callback;function scramble(){const progress=currentFrame/totalFrames;const easeOut=t=>t*(2-t);const scrambleThreshold=1-easeOut(progress);const scrambledText=textArray.map((char,index)=>{if(Math.random()<scrambleThreshold||progress<.5){return characters.charAt(Math.floor(Math.random()*characters.length));}return originalText.charAt(index);});return scrambledText.join(\"\");}return{start:cb=>{callback=cb// Set the callback\n;intervalId=setInterval(()=>{const outputText=scramble();callback(outputText);currentFrame++;if(currentFrame>totalFrames){clearInterval(intervalId);callback(originalText);}},1e3/frameRate);},stop:()=>{clearInterval(intervalId);if(callback){callback(originalText);}}};}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextShuffle\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"84\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextShuffle.map"],"mappings":"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"}