{"version":3,"file":"WordFadeIn.CySHbF4r.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/wnD9VIXbfGkiyM6baZ9m/oNUyqgHg46vcWScFrEfZ/WordFadeIn.js"],"sourcesContent":["// Animated Paragraph: Each word starts at 0.5 opacity, animates to 1 as it enters viewport, in random order\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Animated Paragraph\n *\n * Each word in the paragraph starts at 0.5 opacity. As the user scrolls and words enter the viewport, they animate to 1 opacity in a random order (not sequential).\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function WordFadeIn(props){const{text,font,color,style,align=\"center\",minOpacity=.2,maxOpacity=1,transitionDuration=.5,transitionEasing=\"cubic-bezier(.4,2,.6,1)\",wordSpacing=.25,lineGap=0,randomOrder=true,scrub=true}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[visibleWords,setVisibleWords]=useState([]);const words=text.split(/\\s+/);// Shuffle indices for random animation order\nconst[shuffledIndices]=useState(()=>{const arr=Array.from({length:words.length},(_,i)=>i);if(!randomOrder)return arr;for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[arr[i],arr[j]]=[arr[j],arr[i]];}return arr;});useEffect(()=>{if(isStatic){startTransition(()=>setVisibleWords(shuffledIndices));return;}if(!scrub){const observer=new window.IntersectionObserver(entries=>{const toAdd=[];entries.forEach(entry=>{if(entry.isIntersecting){const idx=Number(entry.target.getAttribute(\"data-idx\"));toAdd.push(idx);}});if(toAdd.length>0){const shuffled=randomOrder?[...toAdd].sort(()=>Math.random()-.5):toAdd;shuffled.forEach((idx,i)=>{setTimeout(()=>{startTransition(()=>setVisibleWords(prev=>prev.includes(idx)?prev:[...prev,idx]));},i*80+Math.random()*100);});}},{threshold:.2});if(containerRef.current){const spans=containerRef.current.querySelectorAll(\"span[data-idx]\");spans.forEach(el=>observer.observe(el));}return()=>observer.disconnect();}else{// Scrub: animate based on scroll progress\nfunction onScroll(){if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const vh=window.innerHeight||document.documentElement.clientHeight;// Calculate scroll progress based on center of container\nconst center=rect.top+rect.height/2;const progress=Math.max(0,Math.min(1,1-(center-vh/2)/vh));const count=Math.floor(progress*words.length);startTransition(()=>setVisibleWords(shuffledIndices.slice(0,count)));}window.addEventListener(\"scroll\",onScroll,{passive:true});onScroll();return()=>window.removeEventListener(\"scroll\",onScroll);}},[isStatic,shuffledIndices,randomOrder,scrub,words.length]);// Improved: Only one word animates at a time as you scroll, with smooth transition\n// Calculate which word should be animating based on scroll progress\nlet animatedWords=visibleWords;if(scrub&&!randomOrder){// Sequential: only one word at a time is at maxOpacity, previous are at maxOpacity, next at minOpacity\nconst count=visibleWords.length;animatedWords=Array.from({length:words.length},(_,i)=>ii!==null);}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,color,...font,width:\"100%\",display:\"flex\",flexWrap:\"wrap\",gap:`${wordSpacing}em`,lineHeight:font?.lineHeight||\"1.3em\",minHeight:40,position:\"relative\",justifyContent:align===\"center\"?\"center\":align===\"right\"?\"flex-end\":\"flex-start\",textAlign:align,rowGap:lineGap},children:words.map((word,i)=>/*#__PURE__*/_jsx(\"span\",{\"data-idx\":i,\"aria-label\":word,style:{opacity:animatedWords.includes(i)?maxOpacity:minOpacity,transition:`opacity ${transitionDuration}s ${transitionEasing}`,willChange:\"opacity\",...font,color,display:\"inline-block\"},children:word+(i