{"version":3,"file":"TextStaggerCustom.DBgX9RI2.mjs","names":["useState","useRef","React"],"sources":["https:/framerusercontent.com/modules/RNsX3H5fDgUWCApSJXtQ/RMsIxRnX3lq9xkOitMCd/TextStaggerCustom.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion}from\"framer-motion\";import React,{useRef,useState,useLayoutEffect}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */function getFontSizeForWidth(w,fontSizeMobile,fontSizeTablet,fontSizeDesktop){if(w<768)return fontSizeMobile;if(w<1024)return fontSizeTablet;return fontSizeDesktop;}// Live animation component — font size now tracks the REAL viewport width,\n// measured only in the browser (useLayoutEffect never runs during SSR),\n// and updates on resize instead of freezing at the first (possibly wrong) read.\nfunction TextStaggerLive({text,fontFamily,fontSizeDesktop,fontSizeTablet,fontSizeMobile,fontWeight,color,lineHeight,letterSpacing,stagger,duration,yOffset,style}){const[fontSize,setFontSize]=useState(null);const containerRef=useRef(null);const[wordLines,setWordLines]=useState(null);const words=text.split(\" \");// Measure the real viewport width — guaranteed client-side only.\nuseLayoutEffect(()=>{const updateFontSize=()=>{setFontSize(getFontSizeForWidth(window.innerWidth,fontSizeMobile,fontSizeTablet,fontSizeDesktop));};updateFontSize();window.addEventListener(\"resize\",updateFontSize);return()=>window.removeEventListener(\"resize\",updateFontSize);},[fontSizeMobile,fontSizeTablet,fontSizeDesktop]);// Recompute word→line mapping once we know the real font size\nuseLayoutEffect(()=>{if(!containerRef.current||fontSize===null)return;const spans=containerRef.current.querySelectorAll(\"[data-word-idx]\");const topMap=new Map;spans.forEach(span=>{const idx=parseInt(span.getAttribute(\"data-word-idx\"));const top=Math.round(span.getBoundingClientRect().top);if(!topMap.has(top))topMap.set(top,[]);topMap.get(top).push(idx);});const result={};let lineNum=0;[...topMap.entries()].sort(([a],[b])=>a-b).forEach(([,indices])=>{indices.forEach(idx=>{result[idx]=lineNum;});lineNum++;});setWordLines(result);},[fontSize,text]);// Not measured yet — stay hidden so nothing ever paints at the wrong size\nif(fontSize===null){return /*#__PURE__*/_jsx(\"div\",{style:{fontFamily,fontSize:fontSizeMobile,fontWeight,color,lineHeight,letterSpacing,overflow:\"visible\",paddingBottom:\"0.15em\",margin:0,padding:0,visibility:\"hidden\",...style},children:text});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{fontFamily,fontSize,fontWeight,color,lineHeight,letterSpacing,overflow:\"visible\",paddingBottom:\"0.15em\",margin:0,padding:0,...style},children:words.map((word,i)=>/*#__PURE__*/_jsxs(React.Fragment,{children:[wordLines!==null?/*#__PURE__*/_jsx(motion.span,{style:{display:\"inline-block\",overflow:\"visible\"},initial:{opacity:0,y:yOffset},animate:{opacity:1,y:0},transition:{duration,delay:wordLines[i]*stagger,ease:\"easeOut\"},children:word}):/*#__PURE__*/_jsx(\"span\",{\"data-word-idx\":i,style:{display:\"inline-block\",visibility:\"hidden\"},children:word}),i