{"version":3,"file":"TextStagger.DBwCZge5.mjs","names":["useState","useRef","React","useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/5fiWi0cruM972MerYwxU/r980R9SjmbxL79UOg1nh/TextStagger.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 *\n * @framerIntrinsicWidth 1400\n * @framerIntrinsicHeight 1000\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function TextStagger(props){const{text,stagger,transition,font,color,style,trigger=\"appear\",largeFontSize,tag=\"div\"}=props;const[hasAnimated,setHasAnimated]=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,{once:true,amount:.3});const[isLargeScreen,setIsLargeScreen]=useState(false);// Detect screen size for responsive font\nuseEffect(()=>{if(typeof window===\"undefined\"||!largeFontSize)return;const checkScreenSize=()=>{startTransition(()=>setIsLargeScreen(window.innerWidth>1920));};checkScreenSize();window.addEventListener(\"resize\",checkScreenSize);return()=>window.removeEventListener(\"resize\",checkScreenSize);},[largeFontSize]);// Calculate responsive font size\nconst responsiveFontSize=useMemo(()=>{if(largeFontSize&&isLargeScreen){return largeFontSize;}return font.fontSize;},[font.fontSize,largeFontSize,isLargeScreen]);// 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,responsiveFontSize]);// Determine whether to fire animation trigger\nconst shouldAnimate=useMemo(()=>{if(isStatic)return false;if(trigger===\"appear\")return!hasAnimated;if(trigger===\"inView\")return inView&&!hasAnimated;return false;},[isStatic,inView,hasAnimated,trigger]);useEffect(()=>{if(!isStatic&&shouldAnimate){if((trigger===\"appear\"||trigger===\"inView\")&&!hasAnimated){controls.start(i=>({y:0,transition:{...transition,delay:(transition?.delay||0)+i*stagger}}));setHasAnimated(true);}}},[controls,stagger,transition,isStatic,shouldAnimate,hasAnimated,trigger]);// 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\";// Create the appropriate HTML tag component\nconst ContainerTag=tag;return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{ref:measureRef,style:{position:\"absolute\",visibility:\"hidden\",pointerEvents:\"none\",whiteSpace:\"pre-wrap\",...font,fontSize:responsiveFontSize,fontFamily,width:style?.width||\"100%\"},\"aria-hidden\":\"true\",children:text}),/*#__PURE__*/_jsx(ContainerTag,{ref:containerRef,style:{...style,position:\"relative\",display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",color,...font,fontSize:responsiveFontSize,fontFamily,margin:0,padding:0},children:wrappedLines.map((line,i)=>{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,fontSize:responsiveFontSize,fontFamily,color,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...\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:40,lineHeight:\"1em\",letterSpacing:\"-0.02em\",variant:\"Regular\",textAlign:\"left\"}},largeFontSize:{type:ControlType.Number,title:\"Font Size (>1920px)\",defaultValue:60,min:10,max:200,step:1,unit:\"px\",displayStepper:true},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000000\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"appear\",\"inView\"],optionTitles:[\"On Appear\",\"Layer in View\"],defaultValue:\"appear\",displaySegmentedControl:true},transition:{type:ControlType.Transition,title:\"Transition\"},stagger:{type:ControlType.Number,title:\"Stagger\",defaultValue:.08,min:0,max:1,step:.01,unit:\"s\"},tag:{type:ControlType.Enum,title:\"HTML Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\",\"div\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"Paragraph\",\"Span\",\"Div\"],defaultValue:\"div\",description:\"Made by [Hvade](https://framer.link/bW8FSw7)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextStagger\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"1000\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"1400\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextStagger.map"],"mappings":"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"}