{"version":3,"file":"TextStagger_1.ChG1mDWK.mjs","names":["useState","useRef","React","useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/mSgDXxyaeuAZaglvCFdo/Hvo4hOZbhQ2AtVsk1ijh/TextStagger_1.js"],"sourcesContent":["// Text stagger per line animation, editable text, BDO Grotesk font (simulated with sans-serif), variable setting\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useMemo,useState,startTransition,useRef,useLayoutEffect}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useAnimationControls,useInView}from\"framer-motion\";import React from\"react\";/**\n * Staggered text per line with editable text, BDO Grotesk (sans-serif), and variable toggle\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function TextStagger(props){const{text=\"\",delay=.08,duration=.5,font={},color=\"#000000\",variable,variableWeight=700,style,trigger=\"inView\",halfOpacity=false}=props;const[hasAnimated,setHasAnimated]=useState(false);const[clicked,setClicked]=useState(false);const isStatic=useIsStaticRenderer();const[wrappedLines,setWrappedLines]=useState([]);const[measureWidth,setMeasureWidth]=useState(null);const measureRef=useRef(null);const controls=useAnimationControls();// Use useRef, not useState for a DOM ref\nconst containerRef=React.useRef(null);const inView=useInView(containerRef,{amount:.2,once:true});useLayoutEffect(()=>{if(typeof window===\"undefined\")return;const el=containerRef.current;if(!el||typeof ResizeObserver===\"undefined\")return;const ro=new ResizeObserver(entries=>{const entry=entries[0];if(!entry)return;const w=entry.contentRect?.width;if(!w||!Number.isFinite(w))return;startTransition(()=>setMeasureWidth(w));});ro.observe(el);return()=>ro.disconnect();},[]);// Measure actual rendered lines including auto-wrap\nuseLayoutEffect(()=>{if(!measureRef.current||typeof window===\"undefined\")return;const measureLines=()=>{const element=measureRef.current;if(!element)return;const range=document.createRange();const textNode=element.firstChild;if(!textNode||textNode.nodeType!==Node.TEXT_NODE)return;const lines=[];const fullText=text||\"\";let currentLine=\"\";let lastBottom=-1;// Measure character by character to detect line breaks\nfor(let i=0;i<fullText.length;i++){if(fullText[i]===\"\\n\"){lines.push(currentLine);currentLine=\"\";lastBottom=-1;continue;}range.setStart(textNode,0);range.setEnd(textNode,i+1);const rect=range.getBoundingClientRect();if(lastBottom===-1){lastBottom=rect.bottom;}// New line detected\nif(rect.bottom>lastBottom+2){lines.push(currentLine);currentLine=fullText[i];lastBottom=rect.bottom;}else{currentLine+=fullText[i];}}// Push the last line\nif(currentLine){lines.push(currentLine);}if(fullText.endsWith(\"\\n\")){lines.push(\"\");}startTransition(()=>setWrappedLines(lines.length>0?lines:[fullText]));};measureLines();window.addEventListener(\"resize\",measureLines);return()=>window.removeEventListener(\"resize\",measureLines);},[text,font,style,measureWidth]);// Determine whether to fire animation trigger\nconst shouldAnimate=useMemo(()=>{if(isStatic)return false;if(trigger===\"inView\")return inView;if(trigger===\"hover\")return hasAnimated;if(trigger===\"click\")return clicked;return false;},[isStatic,inView,hasAnimated,clicked,trigger]);useEffect(()=>{if(isStatic||!shouldAnimate)return;if(wrappedLines.length===0)return;// Ensure newly mounted lines (after re-measure) always animate, even if we already triggered once.\ncontrols.set(()=>({y:70}));controls.start(i=>({y:0,transition:{delay:i*delay,duration,ease:[.44,0,.34,.98]}}));if(trigger!==\"inView\"&&!hasAnimated){startTransition(()=>setHasAnimated(true));}},[controls,delay,duration,isStatic,shouldAnimate,wrappedLines.length,trigger,hasAnimated]);// Simulate BDO Grotesk with sans-serif; for real, user must select it on font control if installed\nconst fontFamily=font&&font.fontFamily||\"'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif\";const variableStyle=useMemo(()=>{if(!variable)return{};const w=Number.isFinite(variableWeight)?Math.max(1,Math.min(1e3,variableWeight)):700;return{fontVariationSettings:`\"wght\" ${w}`,fontWeight:w};},[variable,variableWeight]);// Event handlers for hover/click triggers\nconst handleMouseEnter=()=>{if(trigger===\"hover\"&&!hasAnimated)startTransition(()=>setHasAnimated(true));};const handleClick=()=>{if(trigger===\"click\"&&!clicked)startTransition(()=>setClicked(true));};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{ref:measureRef,style:{position:\"absolute\",visibility:\"hidden\",pointerEvents:\"none\",whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",overflowWrap:\"break-word\",...font,...variableStyle,fontFamily,width:measureWidth!=null?`${measureWidth}px`:style?.width||\"100%\"},\"aria-hidden\":\"true\",children:text}),/*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",color,...font,...variableStyle,fontFamily,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",overflowWrap:\"break-word\"},onMouseEnter:trigger===\"hover\"?handleMouseEnter:undefined,onClick:trigger===\"click\"?handleClick:undefined,children:wrappedLines.map((line,i)=>{// Calculate cumulative character count up to this line\nconst charCountBeforeLine=wrappedLines.slice(0,i).reduce((sum,l)=>sum+l.length,0);const totalChars=(text||\"\").length;const halfPoint=totalChars/2;// Determine if this line is in the second half\nconst lineOpacity=halfOpacity&&charCountBeforeLine>=halfPoint?.5:1;return /*#__PURE__*/_jsx(\"span\",{style:{display:\"block\",overflow:\"hidden\",width:\"100%\",whiteSpace:\"pre\",wordBreak:\"normal\",overflowWrap:\"normal\",marginBottom:0,lineHeight:font.lineHeight||1.2},children:/*#__PURE__*/_jsx(motion.span,{custom:i,initial:isStatic?{y:0}:{y:70},animate:isStatic?undefined:controls,style:{display:\"inline-block\",maxWidth:\"100%\",whiteSpace:\"pre\",wordBreak:\"normal\",overflowWrap:\"normal\",...font,...variableStyle,fontFamily,color,opacity:lineOpacity,WebkitClipPath:\"inset(0 0 0 0)\",clipPath:\"inset(0 0 0 0)\",willChange:\"transform\",lineHeight:font.lineHeight||1.2},children:line||\" \"})},i);})})]});}addPropertyControls(TextStagger,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Editable\\nStaggered\\nText\",displayTextArea:true,placeholder:\"Type your text...\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:.08,min:.01,max:1,step:.01,unit:\"s\"},duration:{type:ControlType.Number,title:\"Dur. per line\",defaultValue:.5,min:.05,max:2,step:.01,unit:\"s\"},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:40,lineHeight:\"1em\",letterSpacing:\"-0.02em\",variant:\"Regular\",textAlign:\"left\"}},variable:{type:ControlType.Boolean,title:\"Variable Weight\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},variableWeight:{type:ControlType.Number,title:\"Weight\",defaultValue:700,min:1,max:1e3,step:1,hidden:({variable})=>!variable},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"inView\",\"hover\",\"click\"],optionTitles:[\"When in view\",\"On hover\",\"On click\"],defaultValue:\"inView\",displaySegmentedControl:true},halfOpacity:{type:ControlType.Boolean,title:\"Half Opacity\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextStagger\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextStagger_1.map"],"mappings":"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"}