{"version":3,"file":"TextStagger_1.px0CSmPA.mjs","names":["useState","useRef","React","useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/nc8BSMmhgBMaJO5J25t8/PO4auWbMH6L2FfYbKAFS/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,duration,font,color,variable,style,trigger=\"inView\",halfOpacity=false}=props;const[hasAnimated,setHasAnimated]=useState(false);const[clicked,setClicked]=useState(false);const isStatic=useIsStaticRenderer();const[wrappedLines,setWrappedLines]=useState([]);const measureRef=useRef(null);const controls=useAnimationControls();// Use useRef, not useState for a DOM ref\nconst containerRef=React.useRef(null);const inView=useInView(containerRef);// 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++){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);}setWrappedLines(lines.length>0?lines:[fullText]);};measureLines();window.addEventListener(\"resize\",measureLines);return()=>window.removeEventListener(\"resize\",measureLines);},[text,font,style]);// 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){if(!hasAnimated){controls.start(i=>({y:0,transition:{delay:i*delay,duration,ease:[.44,0,.34,.98]}}));setHasAnimated(true);}}},[controls,delay,duration,isStatic,hasAnimated,shouldAnimate]);// 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\";// 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\",...font,fontFamily,width: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,fontFamily},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%\",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\",whiteSpace:\"pre-wrap\",...font,fontFamily,color,opacity:lineOpacity,fontVariationSettings:variable?'\"wght\" 700':'\"wght\" 500',fontWeight:variable?700:500,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:\"Bold\",disabledTitle:\"Regular\"},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\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextStagger_1.map"],"mappings":"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"}