{"version":3,"file":"MorphingText.B8ZftFuP.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/4PruHtTPlyzuwTEUPDtO/lrj2St2es17om3kjB0Hp/MorphingText.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useCallback,useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Morphing Text Effect\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */// @framerDisableUnlink\nexport default function MorphingText(props){const{texts=[\"Hello\",\"World\",\"Framer\"],morphTime=1.5,cooldownTime=.5,fontSize=40,fontColor=\"#000000\",font,textAlign=\"center\",style}=props;const textIndexRef=useRef(0);const morphRef=useRef(0);const cooldownRef=useRef(cooldownTime);const timeRef=useRef(performance.now());const text1Ref=useRef(null);const text2Ref=useRef(null);const[mounted,setMounted]=useState(false);useEffect(()=>{setMounted(true);},[]);const getCalculatedHeight=()=>{let lineHeight=1.2;if(font?.lineHeight){const lh=font.lineHeight;if(typeof lh===\"number\")lineHeight=lh;else if(typeof lh===\"string\"){if(lh.includes(\"em\"))lineHeight=parseFloat(lh);else if(lh.includes(\"%\"))lineHeight=parseFloat(lh)/100;else if(lh.includes(\"px\"))lineHeight=parseFloat(lh)/fontSize;}}return fontSize*lineHeight+fontSize*.3;};const setStyles=useCallback(fraction=>{const el1=text1Ref.current;const el2=text2Ref.current;if(!el1||!el2)return;// Text 1: Fades out\nconst inv=1-fraction;el1.style.filter=`blur(${Math.min(8/inv-8,100)}px)`;el1.style.opacity=`${Math.pow(inv,.4)*100}%`;// Text 2: Fades in\nel2.style.filter=`blur(${Math.min(8/fraction-8,100)}px)`;el2.style.opacity=`${Math.pow(fraction,.4)*100}%`;},[]);const resetToStatic=useCallback(()=>{const el1=text1Ref.current;const el2=text2Ref.current;if(!el1||!el2)return;// Atomic swap: Sync text based on current index\nel1.textContent=texts[textIndexRef.current%texts.length];el2.textContent=texts[(textIndexRef.current+1)%texts.length];// Reset to initial state: El1 visible, El2 hidden\nel1.style.filter=\"none\";el1.style.opacity=\"1\";el2.style.filter=\"none\";el2.style.opacity=\"0\";},[texts]);useEffect(()=>{if(!mounted)return;resetToStatic();let frameId;timeRef.current=performance.now();const animate=now=>{frameId=requestAnimationFrame(animate);const dt=(now-timeRef.current)/1e3;timeRef.current=now;if(cooldownRef.current>0){cooldownRef.current-=dt;if(cooldownRef.current<=0){morphRef.current=0;}}else{morphRef.current+=dt;let fraction=morphRef.current/morphTime;if(fraction>=1){fraction=1;cooldownRef.current=cooldownTime;textIndexRef.current++;// Immediate swap to prevent flicker\nresetToStatic();}else{setStyles(fraction);}}};frameId=requestAnimationFrame(animate);return()=>cancelAnimationFrame(frameId);},[mounted,morphTime,cooldownTime,setStyles,resetToStatic]);const justify=textAlign===\"left\"?\"flex-start\":textAlign===\"right\"?\"flex-end\":\"center\";const commonStyle={position:\"absolute\",inset:0,margin:\"auto\",display:\"flex\",alignItems:\"center\",justifyContent:justify,width:\"100%\"};return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",textAlign,color:fontColor,...font,...style},children:[/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",height:getCalculatedHeight(),width:\"100%\",filter:\"url(#threshold) blur(0.6px)\",overflow:\"visible\",fontSize:`${fontSize}px`,display:\"flex\",alignItems:\"center\",justifyContent:justify},children:[/*#__PURE__*/_jsx(\"span\",{ref:text1Ref,style:{...commonStyle,opacity:1},children:texts[0]}),/*#__PURE__*/_jsx(\"span\",{ref:text2Ref,style:{...commonStyle,opacity:0},children:texts[1]||texts[0]})]}),/*#__PURE__*/_jsx(\"svg\",{style:{position:\"absolute\",height:0,width:0,visibility:\"hidden\"},\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsx(\"filter\",{id:\"threshold\",children:/*#__PURE__*/_jsx(\"feColorMatrix\",{in:\"SourceGraphic\",type:\"matrix\",values:\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140\"})})})})]});}addPropertyControls(MorphingText,{texts:{type:ControlType.Array,title:\"Texts\",control:{type:ControlType.String},defaultValue:[\"Hello\",\"World\",\"Framer\"],maxCount:10},morphTime:{type:ControlType.Number,title:\"Morph Time\",defaultValue:1.5,min:.1,max:5,step:.1,displayStepper:true},cooldownTime:{type:ControlType.Number,title:\"Cooldown Time\",defaultValue:.5,min:.1,max:3,step:.1,displayStepper:true},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:40,min:10,max:100},fontColor:{type:ControlType.Color,title:\"Font Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultValue:{variant:\"Bold\",lineHeight:\"1em\"}},textAlign:{type:ControlType.Enum,title:\"Text Align\",description:\"Explore more components at [THE DESIGN FUTURIST](https://thedesignfuturist.zip)\",options:[\"left\",\"center\",\"right\"],defaultValue:\"center\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MorphingText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MorphingText.map"],"mappings":"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"}