{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/wkNDjEs1YoXmO1TRzCq0/u4L3yeJxZLL9saplM4WU/TextScrambler_2.js"],
  "sourcesContent": ["// Text Scrambler \u2013 hover FX fixed & controls closed\n// -----------------------------------------------------------------------------\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/* -------------------------------------------------------------------------- *//* Defaults & constants                                                       *//* -------------------------------------------------------------------------- */const DEFAULT_TEXT=\"We blend deep audience research with conversion\u2011focused UX and Core\u2011Web\u2011Vitals\u2011ready code\u2014building websites that drive revenue and please engineers alike.\";const CHARS=\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=<>?\".split(\"\");const defaultFont={fontFamily:\"Inter, sans\u2011serif\",fontWeight:600,letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"};/* -------------------------------------------------------------------------- *//* Helpers                                                                    *//* -------------------------------------------------------------------------- */function scrambleString(len){let out=\"\";for(let i=0;i<len;i++)out+=CHARS[Math.random()*CHARS.length|0];return out;}/* -------------------------------------------------------------------------- *//* Component                                                                  *//* -------------------------------------------------------------------------- */export default function TextScrambler(props){const{text=DEFAULT_TEXT,delayBeforeStart:startDelay,delayBetweenLetters:revealDelay,background,textColor,hoverColor,hoverEffect=\"color\",blurRadius=3,scrambleSpeed=50,shatterDistance=4,font=defaultFont,textAlign=\"left\",scramble=true,fontSizeDesktop=32,fontSizeTablet=24,fontSizeMobile=18,tabletBreakpoint=900,mobileBreakpoint=600,style}=props;/* ---------------------------- baseline scramble ------------------------- */const rootRef=useRef(null);const[display,setDisplay]=useState(\"\");const[done,setDone]=useState(false);const revealed=useRef(0);const raf=useRef(null);const revealRaf=useRef(null);const cancelLoops=()=>{if(raf.current!==null)cancelAnimationFrame(raf.current);if(revealRaf.current!==null)clearTimeout(revealRaf.current);raf.current=revealRaf.current=null;};useEffect(()=>{cancelLoops();revealed.current=0;setDisplay(\"\");setDone(false);if(!scramble){setDisplay(text);setDone(true);return;}const startTimer=window.setTimeout(revealNext,startDelay);return()=>{clearTimeout(startTimer);cancelLoops();};// eslint-disable-next-line react-hooks/exhaustive-deps\n},[text,startDelay,revealDelay,scramble]);const scrambleFrame=()=>{if(revealed.current>=text.length)return;const out=text.split(\"\").map((c,i)=>{if(i<revealed.current)return c;if(c===\" \")return\" \";return CHARS[Math.random()*CHARS.length|0];});setDisplay(out.join(\"\"));raf.current=requestAnimationFrame(scrambleFrame);};const revealNext=()=>{if(revealed.current>=text.length){setDone(true);setDisplay(text);cancelLoops();return;}startTransition(()=>{revealed.current+=1;});scrambleFrame();revealRaf.current=window.setTimeout(revealNext,revealDelay);};useEffect(()=>{if(!scramble||done)return;raf.current=requestAnimationFrame(scrambleFrame);return()=>cancelLoops();},[done,scramble]);/* ------------------------- responsive font size ------------------------- */const[responsiveFontSize,setResponsiveFontSize]=useState(fontSizeDesktop);useEffect(()=>{if(!rootRef.current)return;const el=rootRef.current;const observer=new ResizeObserver(entries=>{const w=entries[0].contentRect.width;setResponsiveFontSize(w<=mobileBreakpoint?fontSizeMobile:w<=tabletBreakpoint?fontSizeTablet:fontSizeDesktop);});observer.observe(el);return()=>observer.disconnect();},[fontSizeDesktop,fontSizeTablet,fontSizeMobile,tabletBreakpoint,mobileBreakpoint]);/* ----------------------------- hover effects --------------------------- */const[hoveredWord,setHoveredWord]=useState(null);const[scrambleWordDisplay,setScrambleWordDisplay]=useState(null);const scrambleIntervalRef=useRef(null);const handleMouseEnter=(index,word)=>{setHoveredWord(index);if(hoverEffect===\"scramble\"){if(scrambleIntervalRef.current!==null)clearInterval(scrambleIntervalRef.current);setScrambleWordDisplay(scrambleString(word.length));scrambleIntervalRef.current=window.setInterval(()=>{setScrambleWordDisplay(scrambleString(word.length));},scrambleSpeed);}};const handleMouseLeave=()=>{setHoveredWord(null);if(hoverEffect===\"scramble\"&&scrambleIntervalRef.current!==null){clearInterval(scrambleIntervalRef.current);scrambleIntervalRef.current=null;setScrambleWordDisplay(null);}};/* ---------------------------- tokenise display -------------------------- */const displayTokens=useMemo(()=>{const regex=/(\\S+|\\s+)/g;return display.match(regex)||[];},[display]);/* -------------------------------- render -------------------------------- */return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,style:{...style,width:\"100%\",height:\"100%\",background,color:textColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\",transition:\"background 0.2s\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",width:1,height:1,overflow:\"hidden\",clip:\"rect(0 0 0 0)\"},\"aria-live\":\"polite\",children:text}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{...font,fontSize:responsiveFontSize,color:textColor,textAlign:font.textAlign||textAlign,userSelect:\"none\",wordBreak:\"break-word\",width:\"100%\",whiteSpace:\"normal\",display:\"block\"},children:displayTokens.map((token,i)=>{if(/^\\s+$/.test(token))return /*#__PURE__*/_jsx(\"span\",{children:token},i);const isHovered=hoveredWord===i;let content=token;if(isHovered&&hoverEffect===\"scramble\"&&scrambleWordDisplay)content=scrambleWordDisplay;const baseStyle={transition:\"all 0.2s cubic-bezier(.4,0,.2,1)\",color:isHovered&&hoverEffect===\"color\"?hoverColor:textColor,cursor:\"default\",display:\"inline-block\"};if(hoverEffect===\"blur\")baseStyle.filter=isHovered?`blur(${blurRadius}px)`:\"none\";if(hoverEffect===\"shatter\")baseStyle.transform=isHovered?`translate(${(Math.random()-.5)*shatterDistance}px, ${(Math.random()-.5)*shatterDistance}px) rotate(${(Math.random()-.5)*10}deg)`:\"none\";return /*#__PURE__*/_jsx(\"span\",{style:baseStyle,onMouseEnter:()=>handleMouseEnter(i,token),onMouseLeave:handleMouseLeave,children:content},i);})})]});}/* -------------------------------------------------------------------------- *//* Property Controls                                                          *//* -------------------------------------------------------------------------- */addPropertyControls(TextScrambler,{text:{type:ControlType.String,title:\"Text\",defaultValue:DEFAULT_TEXT,displayTextArea:true},delayBeforeStart:{type:ControlType.Number,title:\"Start Delay\",defaultValue:30,min:0,max:1e3,unit:\"ms\",step:10},delayBetweenLetters:{type:ControlType.Number,title:\"Letter Delay\",defaultValue:18,min:1,max:200,unit:\"ms\",step:1},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0,0,0,0)\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000\"},hoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"#FF4A00\"},hoverEffect:{type:ControlType.Enum,title:\"Hover Effect\",options:[\"color\",\"blur\",\"scramble\",\"shatter\"],optionTitles:[\"Color\",\"Blur\",\"Scramble\",\"Shatter\"],defaultValue:\"color\",displaySegmentedControl:true},blurRadius:{type:ControlType.Number,title:\"Blur px\",defaultValue:3,min:1,max:20,hidden(props){return props.hoverEffect!==\"blur\";}},scrambleSpeed:{type:ControlType.Number,title:\"Scramble ms\",defaultValue:50,min:20,max:500,unit:\"ms\",hidden(props){return props.hoverEffect!==\"scramble\";}},shatterDistance:{type:ControlType.Number,title:\"Shatter px\",defaultValue:4,min:1,max:20,hidden(props){return props.hoverEffect!==\"shatter\";}},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:defaultFont},textAlign:{type:ControlType.Enum,title:\"Text Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},scramble:{type:ControlType.Boolean,title:\"Scramble Effect\",defaultValue:true},fontSizeDesktop:{type:ControlType.Number,title:\"Font Size Desktop\",defaultValue:32,min:10,max:120,unit:\"px\",step:1},fontSizeTablet:{type:ControlType.Number,title:\"Font Size Tablet\",defaultValue:24,min:8,max:80,unit:\"px\",step:1},fontSizeMobile:{type:ControlType.Number,title:\"Font Size Mobile\",defaultValue:18,min:6,max:60,unit:\"px\",step:1},tabletBreakpoint:{type:ControlType.Number,title:\"Tablet \u2265 px\",defaultValue:900,min:400,max:1600,step:10},mobileBreakpoint:{type:ControlType.Number,title:\"Mobile \u2264 px\",defaultValue:600,min:200,max:1e3,step:10}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextScrambler\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextScrambler_2.map"],
  "mappings": "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",
  "names": ["DEFAULT_TEXT", "CHARS", "defaultFont", "scrambleString", "len", "out", "i", "TextScrambler", "props", "text", "startDelay", "revealDelay", "background", "textColor", "hoverColor", "hoverEffect", "blurRadius", "scrambleSpeed", "shatterDistance", "font", "textAlign", "scramble", "fontSizeDesktop", "fontSizeTablet", "fontSizeMobile", "tabletBreakpoint", "mobileBreakpoint", "style", "rootRef", "pe", "display", "setDisplay", "ye", "done", "setDone", "revealed", "raf", "revealRaf", "cancelLoops", "ue", "startTimer", "window", "revealNext", "scrambleFrame", "c", "Z", "responsiveFontSize", "setResponsiveFontSize", "el", "observer", "entries", "w", "hoveredWord", "setHoveredWord", "scrambleWordDisplay", "setScrambleWordDisplay", "scrambleIntervalRef", "handleMouseEnter", "index", "word", "handleMouseLeave", "displayTokens", "se", "regex", "u", "token", "isHovered", "content", "baseStyle", "addPropertyControls", "ControlType"]
}