{"version":3,"file":"ScrollColorText.DkdwFGda.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/IXkWRQB26QYtkecSsXj1/HKiqDBUeJbS3sKrjMhoU/ScrollColorText.js"],"sourcesContent":["// Headline text with scroll-triggered color animation - characters change from primary to secondary color as user scrolls\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ScrollColorText(props){const{text,startColor,endColor,font,triggerAlignment,animationUnit,animationSpeed,transitionDuration,transitionType,transitionEasing,springTension,springFriction,tag,animationScrollDistance}=props;const[scrollProgress,setScrollProgress]=useState(0);const containerRef=useRef(null);const isStatic=useIsStaticRenderer();useEffect(()=>{if(isStatic||typeof window===\"undefined\"||!containerRef.current)return;let targetElement=containerRef.current;const updateProgress=()=>{const rect=targetElement.getBoundingClientRect();const windowHeight=window.innerHeight;// Get element's position relative to viewport\nconst elementTop=rect.top;const elementBottom=rect.bottom;const elementHeight=rect.height;// Calculate the scroll distance needed based on percentage of viewport height\nconst scrollDistanceNeeded=windowHeight*(animationScrollDistance/100);let progress=0;if(triggerAlignment===\"top\"){// Animation starts when element top enters viewport from bottom\nif(elementTop>=windowHeight){progress=0;}else if(elementTop<=windowHeight-scrollDistanceNeeded){progress=1;}else{// Progress from 0 to 1 based on scroll distance\nprogress=(windowHeight-elementTop)/scrollDistanceNeeded;}}else if(triggerAlignment===\"middle\"){// Animation based on element center position relative to viewport center\nconst elementCenter=elementTop+elementHeight/2;const viewportCenter=windowHeight/2;if(elementCenter>=viewportCenter+scrollDistanceNeeded/2){progress=0;}else if(elementCenter<=viewportCenter-scrollDistanceNeeded/2){progress=1;}else{// Progress from 0 to 1 as element center moves through viewport\nprogress=(viewportCenter+scrollDistanceNeeded/2-elementCenter)/scrollDistanceNeeded;}}else if(triggerAlignment===\"bottom\"){// Animation starts when element bottom enters viewport\nif(elementBottom>=windowHeight){progress=0;}else if(elementBottom<=windowHeight-scrollDistanceNeeded){progress=1;}else{// Progress from 0 to 1 based on scroll distance\nprogress=(windowHeight-elementBottom)/scrollDistanceNeeded;}}// Apply animation speed\nprogress=Math.pow(progress,1/animationSpeed);startTransition(()=>setScrollProgress(Math.max(0,Math.min(1,progress))));};// Use both intersection observer and scroll listener for smoother updates\nconst observer=new IntersectionObserver(()=>updateProgress(),{threshold:Array.from({length:21},(_,i)=>i/20),rootMargin:\"100px\"});const handleScroll=()=>{requestAnimationFrame(updateProgress);};observer.observe(targetElement);window.addEventListener(\"scroll\",handleScroll,{passive:true});window.addEventListener(\"resize\",updateProgress,{passive:true});// Initial calculation\nupdateProgress();return()=>{observer.disconnect();window.removeEventListener(\"scroll\",handleScroll);window.removeEventListener(\"resize\",updateProgress);};},[animationSpeed,triggerAlignment,animationScrollDistance,isStatic]);const getTextUnits=()=>{if(animationUnit===\"character\"){return text.split(\"\");}else if(animationUnit===\"word\"){return text.split(/(\\s+)/);}else{// line mode - split by line breaks or approximate line breaks\nreturn text.split(/\\n/);}};const textUnits=getTextUnits();const totalUnits=textUnits.length;// Calculate how many units should be colored based on scroll progress\nconst unitsToColor=Math.floor(scrollProgress*totalUnits);const TextTag=tag;const getTransitionStyle=()=>{if(transitionType===\"spring\"){// Convert spring values to cubic-bezier approximation\nconst tension=springTension/100;const friction=springFriction/100;const cubicBezier=`cubic-bezier(${.25+tension*.5}, ${.1+tension*.4}, ${.25+friction*.5}, ${1-friction*.3})`;return`color ${transitionDuration}s ${cubicBezier}`;}else{return`color ${transitionDuration}s ${transitionEasing}`;}};const transitionStyle=getTransitionStyle();return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",...font},role:\"region\",\"aria-label\":`Scroll-animated text: ${text}`,\"aria-live\":\"polite\",\"aria-atomic\":\"false\",tabIndex:0,onKeyDown:e=>{if(e.key===\"Enter\"||e.key===\" \"){e.preventDefault();// Announce current progress for keyboard users\nconst announcement=scrollProgress>=1?\"Text animation complete\":`Text animation ${Math.round(scrollProgress*100)}% complete`;// Create temporary announcement element\nconst announcer=document.createElement(\"div\");announcer.setAttribute(\"aria-live\",\"assertive\");announcer.setAttribute(\"aria-atomic\",\"true\");announcer.style.position=\"absolute\";announcer.style.left=\"-10000px\";announcer.textContent=announcement;document.body.appendChild(announcer);setTimeout(()=>{document.body.removeChild(announcer);},1e3);}},children:[/*#__PURE__*/_jsx(TextTag,{style:{display:\"block\",wordWrap:\"break-word\",whiteSpace:\"normal\",width:\"100%\",margin:0,padding:0,fontSize:font.fontSize,fontFamily:font.fontFamily,fontWeight:font.fontWeight,fontStyle:font.fontStyle,lineHeight:font.lineHeight,letterSpacing:font.letterSpacing},role:\"text\",\"aria-describedby\":\"scroll-progress-description\",children:animationUnit===\"character\"?textUnits.map((char,index)=>/*#__PURE__*/_jsx(\"span\",{style:{color:index<unitsToColor?endColor:startColor,transition:isStatic?\"none\":transitionStyle},\"aria-hidden\":char===\" \"?\"true\":\"false\",role:char.trim()?\"text\":\"presentation\",children:char},index)):animationUnit===\"word\"?textUnits.map((unit,index)=>/*#__PURE__*/_jsx(\"span\",{style:{color:index<unitsToColor?endColor:startColor,transition:isStatic?\"none\":transitionStyle},role:unit.trim()?\"text\":\"presentation\",\"aria-hidden\":!unit.trim()?\"true\":\"false\",children:unit},index)):textUnits.map((line,index)=>/*#__PURE__*/_jsx(\"div\",{style:{color:index<unitsToColor?endColor:startColor,transition:isStatic?\"none\":transitionStyle},role:\"text\",\"aria-label\":`Line ${index+1}: ${line}`,children:line},index))}),/*#__PURE__*/_jsxs(\"div\",{id:\"scroll-progress-description\",style:{position:\"absolute\",left:\"-10000px\",width:\"1px\",height:\"1px\",overflow:\"hidden\"},\"aria-hidden\":\"true\",children:[\"Text changes color as you scroll. Animation unit: \",animationUnit,\". Trigger alignment: \",triggerAlignment,\". Press Enter or Space to announce progress.\"]}),/*#__PURE__*/_jsxs(\"div\",{\"aria-live\":\"polite\",\"aria-atomic\":\"true\",role:\"status\",style:{position:\"absolute\",left:\"-10000px\",width:\"1px\",height:\"1px\",overflow:\"hidden\"},children:[scrollProgress>0&&scrollProgress<1&&`Text animation ${Math.round(scrollProgress*100)}% complete`,scrollProgress>=1&&\"Text animation complete\"]})]});}addPropertyControls(ScrollColorText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Scroll to reveal\"},tag:{type:ControlType.Enum,title:\"HTML Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"Paragraph\"],defaultValue:\"h1\"},startColor:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#CCCCCC\"},endColor:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},triggerAlignment:{type:ControlType.Enum,title:\"Trigger Alignment\",options:[\"top\",\"middle\",\"bottom\"],optionTitles:[\"Top\",\"Middle\",\"Bottom\"],defaultValue:\"top\",displaySegmentedControl:true},animationScrollDistance:{type:ControlType.Number,title:\"Scroll Distance\",defaultValue:100,min:10,max:200,step:5,unit:\"%\"},animationUnit:{type:ControlType.Enum,title:\"Animation Unit\",options:[\"character\",\"word\",\"line\"],optionTitles:[\"Character\",\"Word\",\"Line\"],defaultValue:\"character\",displaySegmentedControl:true},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:1.5,min:.1,max:5,step:.1},transitionDuration:{type:ControlType.Number,title:\"Transition Duration\",defaultValue:.3,min:.05,max:2,step:.05,unit:\"s\"},transitionType:{type:ControlType.Enum,title:\"Transition Type\",options:[\"ease\",\"spring\"],optionTitles:[\"Ease\",\"Spring\"],defaultValue:\"ease\",displaySegmentedControl:true},transitionEasing:{type:ControlType.Enum,title:\"Easing\",options:[\"ease\",\"ease-in\",\"ease-out\",\"ease-in-out\"],optionTitles:[\"Ease\",\"Ease In\",\"Ease Out\",\"Ease In Out\"],defaultValue:\"ease-out\",hidden:({transitionType})=>transitionType!==\"ease\"},springTension:{type:ControlType.Number,title:\"Spring Tension\",defaultValue:50,min:0,max:100,step:1,hidden:({transitionType})=>transitionType!==\"spring\"},springFriction:{type:ControlType.Number,title:\"Spring Friction\",defaultValue:25,min:0,max:100,step:1,hidden:({transitionType})=>transitionType!==\"spring\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollColorText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}