{"version":3,"file":"ScrambleAppear_Prod.CeXNAagb.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/x9N74fQKlr6QLCpcJIqg/MBzROdhIRkZU6bH01ovN/ScrambleAppear_Prod.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useState,useRef,useMemo}from\"react\";import{useInView,animate}from\"framer-motion\";const HIDDEN=0;const SCRAMBLED=1;const REVEALED=2;/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n */export default function ScrambleAppear(props){const{from,scrambledLetters,text,scrambledColor,animation,speed}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const Tag=props.tag;const ref=useRef(null);const encryptedText=useRef(randomString(props));const[progress,setProgress]=useState(0);const[currentAnimation,setCurrentAnimation]=useState(null);const intervalRef=useRef(null);const isInView=useInView(ref,{once:!props.animation.replay,amount:\"some\"});const characterDelay=mapRange(speed,1,100,.2,.002)// seconds per character\n;const shuffledIndices=useMemo(()=>{if(from===\"random\"){const indices=Array.from({length:text.length},(_,i)=>i);return indices.sort(()=>Math.random()-.5);}return[];},[text,from]);const runAnimation=()=>{if(!isCanvas){if(currentAnimation){currentAnimation.stop();}if(intervalRef.current){clearInterval(intervalRef.current);}// Add timeout for delay\nsetTimeout(()=>{intervalRef.current=setInterval(()=>{encryptedText.current=randomString(props);},characterDelay*1e3);setCurrentAnimation(animate(0,1,{type:\"ease\",ease:\"linear\",duration:characterDelay*(text.length+scrambledLetters),onUpdate:setProgress,onComplete:()=>{if(intervalRef.current){clearInterval(intervalRef.current);}}}));},animation.delay*1e3);}};useEffect(()=>{if(animation.trigger==\"appear\"){runAnimation();}return()=>{if(intervalRef.current){clearInterval(intervalRef.current);}};},[]);useEffect(()=>{if(animation.trigger==\"layerInView\"){if(isInView){runAnimation();}else{if(currentAnimation){currentAnimation.stop();setProgress(0);if(intervalRef.current){clearInterval(intervalRef.current);}}}}},[isInView]);let segments=[];switch(from){case\"left\":{const leftCutoff=mapRange(progress,0,1,-scrambledLetters,text.length);const rightCutoff=mapRange(progress,0,1,0,text.length+scrambledLetters);segments.push([text.substring(0,clamp(leftCutoff,0,text.length)),REVEALED],[encryptedText.current.substring(clamp(leftCutoff,0,text.length),clamp(rightCutoff,0,text.length)),SCRAMBLED],[text.substring(clamp(rightCutoff,0,text.length)),HIDDEN]);break;}case\"center\":{const center=Math.ceil(text.length/2);const letters=Math.max(Math.floor(scrambledLetters/2),1);const leftCutoff=mapRange(progress,0,1,center,-letters);const rightCutoff=mapRange(progress,0,1,center+letters,0);segments.push([text.substring(0,clamp(leftCutoff,0,text.length)),HIDDEN],[encryptedText.current.substring(clamp(leftCutoff,0,center),clamp(rightCutoff,0,center)),SCRAMBLED],[text.substring(clamp(rightCutoff,0,center),clamp(text.length-rightCutoff,center,text.length)),REVEALED],[encryptedText.current.substring(clamp(text.length-leftCutoff,center,text.length),clamp(text.length-rightCutoff,center,text.length)),SCRAMBLED],[text.substring(clamp(text.length-leftCutoff,0,text.length),text.length),HIDDEN]);break;}case\"right\":{const leftCutoff=mapRange(progress,0,1,text.length,-scrambledLetters);const rightCutoff=mapRange(progress,0,1,text.length+scrambledLetters,0);segments.push([text.substring(0,clamp(leftCutoff,0,text.length)),HIDDEN],[encryptedText.current.substring(clamp(leftCutoff,0,text.length),clamp(rightCutoff,0,text.length)),SCRAMBLED],[text.substring(clamp(rightCutoff,0,text.length),text.length),REVEALED]);break;}case\"random\":{// Show all hidden characters if progress is 0 (during delay)\nif(progress===0){segments.push([text,HIDDEN]);}else if(progress>=1){segments.push([text,REVEALED]);}else{// Calculate two thresholds for each character based on its position in shuffledIndices\nfor(let i=0;i<text.length;i++){const indexInSequence=shuffledIndices.indexOf(i);// Adjust the windows to maintain consistent number of scrambled letters\nconst scrambleWindow=scrambledLetters/text.length// Size of the \"window\" of scrambled letters\n;const startScrambleAt=indexInSequence/text.length*(1-scrambleWindow)// When this character starts scrambling\n;const startRevealAt=startScrambleAt+scrambleWindow// When this character starts revealing\n;if(progress>=startRevealAt){// Past reveal threshold - show actual character\nsegments.push([text[i],REVEALED]);}else if(progress>=startScrambleAt){// Between scramble and reveal threshold - show scrambled\nsegments.push([encryptedText.current[i],SCRAMBLED]);}else{// Before scramble threshold - show hidden\nsegments.push([text[i],HIDDEN]);}}}break;}}return /*#__PURE__*/_jsx(Tag,{ref:ref,style:{color:props.color,userSelect:\"none\",pointerEvents:\"none\",margin:0,whiteSpace:props.style?.width?undefined:\"nowrap\",...props.font,...props.style},children:isCanvas?text:consolidateSegments(segments).map(([text,state],index)=>{switch(state){case HIDDEN:return /*#__PURE__*/_jsx(\"span\",{style:{opacity:0},children:text},index);case SCRAMBLED:return scrambledColor?/*#__PURE__*/_jsx(\"span\",{style:{color:scrambledColor},children:text},index):text;case REVEALED:return text;}})});}ScrambleAppear.displayName=\"Scramble Appear\";addPropertyControls(ScrambleAppear,{text:{type:ControlType.String,defaultValue:\"Learn Framer With Framer University\",displayTextArea:true},characters:{type:ControlType.String,defaultValue:\"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{}|;:,.<>?~\",displayTextArea:true},from:{type:ControlType.Enum,defaultValue:\"left\",options:[\"left\",\"center\",\"right\",\"random\"],optionTitles:[\"Left\",\"Center\",\"Right\",\"Random\"]},font:{type:\"font\",controls:\"extended\",defaultFontType:\"monospace\",defaultValue:{fontSize:24,lineHeight:1.4}},color:{type:ControlType.Color,defaultValue:\"#000\"},scrambledColor:{type:ControlType.Color,optional:true,title:\"Scrambled\"},speed:{type:ControlType.Number,defaultValue:75,min:1,max:100,step:1,unit:\"%\"},scrambledLetters:{type:ControlType.Number,defaultValue:10,min:1,step:1,displayStepper:true,title:\"Letters\"},animation:{type:ControlType.Object,icon:\"effect\",controls:{trigger:{type:ControlType.Enum,defaultValue:\"layerInView\",options:[\"appear\",\"layerInView\"],optionTitles:[\"Appear\",\"Layer in View\"],displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},replay:{type:ControlType.Boolean,defaultValue:true,hidden:props=>props.trigger!==\"layerInView\"},delay:{type:ControlType.Number,defaultValue:0,min:0,step:.01}}},options:{type:ControlType.Object,buttonTitle:\"Options\",controls:{matchCase:{type:ControlType.Boolean,defaultValue:true},keepSpaces:{type:ControlType.Boolean,defaultValue:false,title:\"Spaces\",enabledTitle:\"Keep\",disabledTitle:\"Replace\",description:\"\"}}},userSelect:{type:ControlType.Boolean,defaultValue:true},tag:{type:ControlType.Enum,title:\"Tag\",defaultValue:\"p\",displaySegmentedControl:true,options:[\"h1\",\"h2\",\"h3\",\"p\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"P\"],description:\"More components at [Framer University](https://frameruni.link/cc).\"}});const randomString=props=>{const length=props.text.length;const characters=props.characters;const originalText=props.text;const matchCase=props.options.matchCase;const keepSpaces=props.options.keepSpaces;if(length<=0){return\"\";}let result=\"\";let lastChar=\"\";for(let i=0;i<length;i++){const originalChar=originalText[i];// Preserve spaces and tabs if keepSpaces is true\nif(keepSpaces&&(originalChar===\" \"||originalChar===\"\t\")){result+=originalChar;continue;}let newChar;do{newChar=characters[Math.floor(Math.random()*characters.length)];// Match case if matchCase is true\nif(matchCase&&originalChar){newChar=originalChar===originalChar.toUpperCase()?newChar.toUpperCase():newChar.toLowerCase();}}while(newChar===lastChar&&characters.length>=8)result+=newChar;lastChar=newChar;}return result;};function mapRange(value,fromLow,fromHigh,toLow,toHigh){if(fromLow===fromHigh){return toLow;}const percentage=(value-fromLow)/(fromHigh-fromLow);return toLow+percentage*(toHigh-toLow);}function clamp(value,min,max){return Math.max(min,Math.min(value,max));}function consolidateSegments(segments){return segments.filter(([text])=>text.length>0).reduce((acc,curr)=>{// If array is empty or last segment has different state, add new segment\nif(acc.length===0||acc[acc.length-1][1]!==curr[1]){acc.push(curr);}else{// Combine text with the last segment that has the same state\nacc[acc.length-1][0]+=curr[0];}return acc;},[]);}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrambleAppear\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrambleAppear_Prod.map"],"mappings":"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"}