{"version":3,"file":"ScrollColorText.BH99fRh5.mjs","names":["useRef","useState","useMemo","endPos"],"sources":["https:/framerusercontent.com/modules/fX7W3CLDeERVK07dWTxV/oX19C23tzhvEOYd0fhTd/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 (line breaks will be preserved by whiteSpace: pre-wrap)\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\"){const startPos=0;const endPos=windowHeight;return[startPos,endPos];}else{const 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\",// ✅ Preserve Shift+Enter line breaks\nwhiteSpace:\"pre-wrap\",...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\",// ✅ Preserve Shift+Enter line breaks\nwhiteSpace:\"pre-wrap\",...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\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}