{"version":3,"file":"ScrollColorText.Do6Mrcvx.mjs","names":["useRef","useState","useMemo","endPos","__esmMin","pe","init_npm_react_18_3_1","init_ssg_sandbox_shims","te","_e","ce","de","window","motion","useTransform","useScroll","init_framer_motion_DhsWWWsN","addPropertyControls","init_framer_DcxuU94H","useIsStaticRenderer","ControlType","ScrollTextColor","props","containerRef","isStatic","elementTop","setElementTop","elementHeight","setElementHeight","updatePosition","rect","scrollTop","content","characters","getAnimationRange","windowHeight","trigger","getPositionOffset","position","animationStart","animationEnd","colorStart","font","animationStartPos","animationEndPos","animationDistance","wordStartPos","index","startOffset","wordEndPos","wordProgress","scrollY","replay","colorEnd","item","init_ScrollColorText","init_jsx_runtime"],"sources":["https:/framerusercontent.com/modules/tT9dONxZBwLkH3sspnuk/61ee5suspfJ3drkZHEad/ScrollColorText.js"],"sourcesContent":["// Text color animation on scroll - changes each character's color individually\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useRef,useMemo,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useScroll,useTransform,motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ScrollTextColor(props){const{content=\"Hello World\",colorStart=\"#CCCCCC\",colorEnd=\"#000000\",trigger=\"layer-in-view\",animationStart=\"bottom\",animationEnd=\"center\",startOffset=0,replay=true,font}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const[elementTop,setElementTop]=useState(0);const[elementHeight,setElementHeight]=useState(0);const{scrollY}=useScroll();// Calculate element position\nuseEffect(()=>{if(isStatic||!containerRef.current)return;const updatePosition=()=>{if(containerRef.current){const rect=containerRef.current.getBoundingClientRect();const scrollTop=window.pageYOffset||document.documentElement.scrollTop;startTransition(()=>{setElementTop(rect.top+scrollTop);setElementHeight(rect.height);});}};updatePosition();window.addEventListener(\"resize\",updatePosition);return()=>window.removeEventListener(\"resize\",updatePosition);},[isStatic,content]);// Split content into characters\nconst characters=useMemo(()=>{// Split by words, preserve spaces\nconst words=content.split(/(\\s+)/);return words.map((word,index)=>({word,index}));},[content]);// Calculate animation range based on trigger and positions\nconst getAnimationRange=()=>{const windowHeight=typeof window!==\"undefined\"?window.innerHeight:800;if(trigger===\"scroll-position\"){// For scroll position trigger, use viewport percentages\nconst startPos=0;const endPos=windowHeight;return[startPos,endPos];}else{// For layer in view trigger, calculate based on element position\nconst getPositionOffset=position=>{switch(position){case\"top\":return windowHeight;case\"center\":return windowHeight/2;case\"bottom\":return 0;default:return 0;}};const startPos=elementTop-getPositionOffset(animationStart);const endPos=elementTop-getPositionOffset(animationEnd);return[startPos,endPos];}};const isFixedWidth=props?.style&&props.style.width===\"100%\";if(isStatic){return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,color:colorStart,wordWrap:\"break-word\",overflowWrap:\"break-word\",whiteSpace:\"normal\",...font},children:content});}const[animationStartPos,animationEndPos]=getAnimationRange();const animationDistance=animationEndPos-animationStartPos;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,wordWrap:\"break-word\",overflowWrap:\"break-word\",whiteSpace:\"normal\",...font},children:characters.map((item,index)=>{const wordStartPos=animationStartPos+index/characters.length*animationDistance+startOffset;const wordEndPos=animationStartPos+(index+1)/characters.length*animationDistance+startOffset;const wordProgress=useTransform(scrollY,[wordStartPos,wordEndPos],[0,1],{clamp:!replay});return /*#__PURE__*/_jsx(motion.span,{style:{color:useTransform(wordProgress,[0,1],[colorStart,colorEnd]),display:\"inline\"},children:item.word},index);})});}// Helper to map Framer font variant to font weight\nconst variantNameToFontWeight={Regular:400,Thin:100,\"Extra Light\":200,Light:300,Medium:500,Semibold:600,Bold:700,\"Extra Bold\":800,Black:900,\"Thin Italic\":100,\"Extra Light Italic\":200,\"Light Italic\":300,Italic:400,\"Medium Italic\":500,\"Semibold Italic\":600,\"Bold Italic\":700,\"Extra Bold Italic\":800,\"Black Italic\":900,\"Regular Italic\":400,Variable:400,\"Variable Italic\":400};function variantToFontWeight(variant){return variantNameToFontWeight[variant]||400;}addPropertyControls(ScrollTextColor,{font:{type:ControlType.Font,title:\"Font\",defaultValue:{variant:\"Semibold\"},controls:\"extended\",defaultFontType:\"sans-serif\"},content:{type:ControlType.String,title:\"Content\",defaultValue:\"Hello World\",displayTextArea:true},colorStart:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#CCCCCC\"},colorEnd:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"layer-in-view\",\"scroll-position\"],optionTitles:[\"Layer in View\",\"Scroll Position\"],defaultValue:\"layer-in-view\"},animationStart:{type:ControlType.Enum,title:\"Start\",options:[\"top\",\"center\",\"bottom\"],optionTitles:[\"Top\",\"Center\",\"Bottom\"],defaultValue:\"bottom\",hidden:({trigger})=>trigger===\"scroll-position\"},animationEnd:{type:ControlType.Enum,title:\"End\",options:[\"top\",\"center\",\"bottom\"],optionTitles:[\"Top\",\"Center\",\"Bottom\"],defaultValue:\"center\",hidden:({trigger})=>trigger===\"scroll-position\"},startOffset:{type:ControlType.Number,title:\"Start Offset\",defaultValue:0,min:-1e3,max:1e3,step:10,unit:\"px\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollTextColor\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}