{"version":3,"file":"ScrollColorText.DSlsOPOA.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/Eg3FD2VMSiG6Ue9dDSxI/gTB2u3gs1TN1dsC7iSAH/ScrollColorText.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition,useMemo}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// Helper function to interpolate between two colors\nfunction interpolateColor(color1,color2,factor){// Parse hex colors\nconst c1=color1.startsWith(\"#\")?color1.slice(1):color1;const c2=color2.startsWith(\"#\")?color2.slice(1):color2;const r1=parseInt(c1.substring(0,2),16);const g1=parseInt(c1.substring(2,4),16);const b1=parseInt(c1.substring(4,6),16);const r2=parseInt(c2.substring(0,2),16);const g2=parseInt(c2.substring(2,4),16);const b2=parseInt(c2.substring(4,6),16);const r=Math.round(r1+(r2-r1)*factor);const g=Math.round(g1+(g2-g1)*factor);const b=Math.round(b1+(b2-b1)*factor);return`#${((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1)}`;}/**\n * Scroll Text Progress\n *\n * A text component that changes color as you scroll, like a progress bar\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ScrollTextProgress(props){const{text=\"Scroll down to see this text change color progressively, like a progress bar filling up.\",colorStart=\"#CCCCCC\",colorEnd=\"#000000\",background,textStyle,speed=1,startTrigger=\"start\",style}=props;const containerRef=useRef(null);const[scrollProgress,setScrollProgress]=useState(0);const isStatic=useIsStaticRenderer();const rafRef=useRef(null);const lastProgressRef=useRef(0);// Split text into words\nconst words=useMemo(()=>text.split(/(\\s+)/),[text]);useEffect(()=>{if(!containerRef.current||isStatic)return;const handleScroll=()=>{// Cancel any pending animation frame\nif(rafRef.current!==null){cancelAnimationFrame(rafRef.current);}// Use requestAnimationFrame to throttle calculations\nrafRef.current=requestAnimationFrame(()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const viewportHeight=window.innerHeight;const elementHeight=rect.height;const elementTop=rect.top;// Determine start position based on trigger point\nlet triggerPoint;if(startTrigger===\"start\"){// Animation starts when top of element reaches bottom of viewport\ntriggerPoint=viewportHeight;}else if(startTrigger===\"center\"){// Animation starts when top of element reaches center of viewport\ntriggerPoint=viewportHeight/2;}else{// Animation starts when top of element reaches top of viewport\ntriggerPoint=0;}// Calculate scroll distance needed (affected by speed)\n// Lower speed = more scroll distance needed = slower animation\nconst scrollDistance=elementHeight/speed;// Calculate progress based on how far element has scrolled past trigger point\nconst scrolledPastTrigger=triggerPoint-elementTop;let progress=scrolledPastTrigger/scrollDistance;// Clamp between 0 and 1\nprogress=Math.max(0,Math.min(1,progress));// Only update state if progress has changed significantly (reduces re-renders)\nif(Math.abs(progress-lastProgressRef.current)>.001){lastProgressRef.current=progress;startTransition(()=>setScrollProgress(progress));}});};window.addEventListener(\"scroll\",handleScroll,{passive:true});handleScroll()// Initial calculation\n;return()=>{window.removeEventListener(\"scroll\",handleScroll);if(rafRef.current!==null){cancelAnimationFrame(rafRef.current);}};},[isStatic,speed,startTrigger]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,background,paddingTop:24,paddingBottom:24,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",...textStyle},children:words.map((word,index)=>{// Calculate which word should be colored based on progress\nconst totalWords=words.filter(w=>w.trim().length>0).length;const wordIndex=words.slice(0,index+1).filter(w=>w.trim().length>0).length-1;// Calculate the progress range for this word\nconst wordStart=wordIndex/totalWords;const wordEnd=(wordIndex+1)/totalWords;// Calculate color based on scroll progress\nlet color;if(scrollProgress<=wordStart){// Before this word - use start color\ncolor=colorStart;}else if(scrollProgress>=wordEnd){// After this word - use end color\ncolor=colorEnd;}else{// During this word - interpolate\nconst wordProgress=(scrollProgress-wordStart)/(wordEnd-wordStart);color=interpolateColor(colorStart,colorEnd,wordProgress);}return /*#__PURE__*/_jsx(\"span\",{style:{color},children:word},index);})})});}addPropertyControls(ScrollTextProgress,{text:{type:ControlType.String,title:\"Text\",displayTextArea:true,defaultValue:\"Scroll down to see this text change color progressively, like a progress bar filling up.\"},textStyle:{type:ControlType.Font,title:\"Text Style\",controls:\"extended\",defaultFontType:\"sans-serif\"},colorStart:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#CCCCCC\"},colorEnd:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.1,max:5,step:.1,displayStepper:false},startTrigger:{type:ControlType.Enum,title:\"Start Trigger\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],defaultValue:\"start\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollTextProgress\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}