{"version":3,"file":"ScrollColorText.BbYAqF2y.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/9L1ZGZQKfqYM8r9Qik3P/TZ7kWdxh6EoKlgKxO3Cr/ScrollColorText.js"],"sourcesContent":["// Scroll-triggered text color animation component - words change from gray to target color based on scroll position\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef,useMemo,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * Scroll Text Animation\n * \n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ScrollColorText(props){const{text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",font,activeColor=\"#000000\",inactiveColor=\"#CCCCCC\",direction=\"down\",speed=50}=props;const containerRef=useRef(null);const[scrollProgress,setScrollProgress]=useState(0);const isInView=useInView(containerRef,{margin:\"-20%\"});const isStatic=useIsStaticRenderer();const words=useMemo(()=>text.split(\" \"),[text]);useEffect(()=>{if(isStatic||!isInView)return;const handleScroll=()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const windowHeight=window.innerHeight;const elementTop=rect.top;const elementHeight=rect.height;// Calculate scroll progress based on element position\nlet progress=0;if(direction===\"down\"){// Progress increases as element moves up (scrolling down)\nprogress=Math.max(0,Math.min(1,(windowHeight-elementTop)/(windowHeight+elementHeight)));}else{// Progress increases as element moves down (scrolling up)\nprogress=Math.max(0,Math.min(1,(elementTop+elementHeight)/(windowHeight+elementHeight)));}// Apply speed multiplier\nprogress=Math.min(1,progress*(speed/50));startTransition(()=>setScrollProgress(progress));};if(typeof window!==\"undefined\"){window.addEventListener(\"scroll\",handleScroll,{passive:true});handleScroll()// Initial calculation\n;}return()=>{if(typeof window!==\"undefined\"){window.removeEventListener(\"scroll\",handleScroll);}};},[direction,speed,isInView,isStatic]);const getWordColor=index=>{if(isStatic)return activeColor;const wordProgress=scrollProgress*words.length-index;const normalizedProgress=Math.max(0,Math.min(1,wordProgress));// Smooth color interpolation using RGB values\nif(normalizedProgress>=1)return activeColor;if(normalizedProgress<=0)return inactiveColor;// Parse colors and interpolate\nconst parseColor=color=>{// Handle hex colors\nif(color.startsWith(\"#\")){const hex=color.slice(1);const r=parseInt(hex.slice(0,2),16);const g=parseInt(hex.slice(2,4),16);const b=parseInt(hex.slice(4,6),16);return{r,g,b};}// Handle rgb/rgba colors\nconst match=color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);if(match){return{r:parseInt(match[1]),g:parseInt(match[2]),b:parseInt(match[3])};}// Fallback to black\nreturn{r:0,g:0,b:0};};const inactiveRGB=parseColor(inactiveColor);const activeRGB=parseColor(activeColor);const r=Math.round(inactiveRGB.r+(activeRGB.r-inactiveRGB.r)*normalizedProgress);const g=Math.round(inactiveRGB.g+(activeRGB.g-inactiveRGB.g)*normalizedProgress);const b=Math.round(inactiveRGB.b+(activeRGB.b-inactiveRGB.b)*normalizedProgress);return`rgb(${r}, ${g}, ${b})`;};const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",...isFixedWidth?{...props?.style}:{width:\"max-content\"},...font,lineHeight:font?.lineHeight||\"1.4em\"},children:words.map((word,index)=>{const wordProgress=scrollProgress*words.length-index;const normalizedProgress=Math.max(0,Math.min(1,wordProgress));return /*#__PURE__*/_jsxs(\"span\",{style:{color:normalizedProgress>=1?activeColor:inactiveColor,transition:isStatic?\"none\":\"color 0.2s ease-out\"},children:[word,index