{"version":3,"file":"TextScramble.BCOUn8IF.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/pwDFGhmFx9szdsWRBjTD/vhRsXOSUMyIldIO8PUHW/TextScramble.js"],"sourcesContent":["// Text scramble hover effect with random character animation\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function TextScramble(props){const{text=\"UX Designer\\nProduct Designer\\nDesign Researcher\",duration=1e3,characters=\"!@#$%^&*()_+-=[]{}|;:,.<>?\",scrambleIntensity=100,textColor,font,triggerMode=\"hover\",appearDelay=0,style}=props;const[displayText,setDisplayText]=useState(text);const[isHovering,setIsHovering]=useState(false);const[hasAppeared,setHasAppeared]=useState(false);const frameRef=useRef(0);const startTimeRef=useRef(0);const containerRef=useRef(null);const textRef=useRef(null);const[minWidth,setMinWidth]=useState(undefined);// Detect if width/height are set to fill (100%)\nconst isFixedWidth=style?.width===\"100%\";const isFixedHeight=style?.height===\"100%\";// Measure initial text width\nuseEffect(()=>{if(textRef.current&&!isFixedWidth){const width=textRef.current.offsetWidth;startTransition(()=>setMinWidth(width));}},[text,font,isFixedWidth]);// Handle appear mode with Intersection Observer\nuseEffect(()=>{if(triggerMode!==\"appear\"||hasAppeared)return;let timeoutId;const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){timeoutId=setTimeout(()=>{startTransition(()=>setHasAppeared(true));},appearDelay);}});},{threshold:.1});const currentContainer=containerRef.current;if(currentContainer){observer.observe(currentContainer);}return()=>{if(timeoutId){clearTimeout(timeoutId);}if(currentContainer){observer.unobserve(currentContainer);}};},[triggerMode,appearDelay,hasAppeared]);useEffect(()=>{const shouldAnimate=triggerMode===\"hover\"?isHovering:hasAppeared;if(!shouldAnimate){startTransition(()=>setDisplayText(text));return;}startTimeRef.current=Date.now();let lastFrameTime=0;const animate=()=>{const now=Date.now();const elapsed=now-startTimeRef.current;const progress=Math.min(elapsed/duration,1);if(progress>=1){startTransition(()=>setDisplayText(text));return;}// Add a minimum delay between frames to make scrambling more visible\nif(now-lastFrameTime<50){frameRef.current=requestAnimationFrame(animate);return;}lastFrameTime=now;// Easing function for smoother animation\nconst easeProgress=1-Math.pow(1-progress,3);const scrambled=text.split(\"\").map((char,index)=>{if(char===\" \")return\" \";// Use scrambleIntensity to control how many characters scramble\nconst shouldScramble=Math.random()*100<scrambleIntensity;if(shouldScramble&&Math.random()>easeProgress){return characters[Math.floor(Math.random()*characters.length)];}return text[index];}).join(\"\");startTransition(()=>setDisplayText(scrambled));frameRef.current=requestAnimationFrame(animate);};frameRef.current=requestAnimationFrame(animate);return()=>{if(frameRef.current){cancelAnimationFrame(frameRef.current);}};},[isHovering,text,duration,characters,scrambleIntensity,triggerMode,hasAppeared]);const handleMouseEnter=()=>{if(triggerMode===\"hover\"){startTransition(()=>setIsHovering(true));}};const handleMouseLeave=()=>{if(triggerMode===\"hover\"){startTransition(()=>setIsHovering(false));}};const shouldAnimate=triggerMode===\"hover\"?isHovering:hasAppeared;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:\"flex-start\",cursor:triggerMode===\"hover\"?\"pointer\":\"default\",userSelect:\"none\",width:isFixedWidth?\"100%\":\"fit-content\",height:isFixedHeight?\"100%\":\"fit-content\"},onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:/*#__PURE__*/_jsx(\"span\",{ref:textRef,style:{...font,color:textColor,fontFamily:font.fontFamily||\"monospace\",whiteSpace:\"pre-wrap\",width:isFixedWidth?\"100%\":\"max-content\",minWidth:!isFixedWidth&&minWidth?`${minWidth}px`:undefined},children:displayText})});}addPropertyControls(TextScramble,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"UX Designer\\nProduct Designer\\nDesign Researcher\"},triggerMode:{type:ControlType.Enum,title:\"Trigger\",options:[\"hover\",\"appear\"],optionTitles:[\"Hover\",\"Appear\"],defaultValue:\"hover\",displaySegmentedControl:true},appearDelay:{type:ControlType.Number,title:\"Appear Delay\",defaultValue:0,min:0,max:5e3,step:100,unit:\"ms\",displayStepper:true,hidden:props=>props.triggerMode!==\"appear\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:2e3,min:100,max:5e3,step:100,unit:\"ms\",displayStepper:true},scrambleIntensity:{type:ControlType.Number,title:\"Intensity\",defaultValue:100,min:0,max:100,step:5,unit:\"%\",displayStepper:true},characters:{type:ControlType.String,title:\"Characters\",defaultValue:\"!@#$%^&*()_+-=[]{}|;:,.<>?\",displayTextArea:true},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#00FF00\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"monospace\",defaultValue:{fontSize:\"32px\",letterSpacing:\"0em\",lineHeight:\"1.2em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextScramble\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextScramble.map"],"mappings":"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"}