{"version":3,"file":"ScrollColorText.C6Aujf9K.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/GzR6XaPW8GGEK8DUl83d/C3nQ79h5zivyxc7wfy0x/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,headingTag=\"p\"}=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%\";const Tag=headingTag;if(isStatic){return /*#__PURE__*/_jsx(Tag,{ref:containerRef,style:{...props.style,color:colorStart,wordWrap:\"break-word\",overflowWrap:\"break-word\",// ✅ Preserve Shift+Enter line breaks\nwhiteSpace:\"pre-wrap\",margin:0,...font},children:content});}const[animationStartPos,animationEndPos]=getAnimationRange();const animationDistance=animationEndPos-animationStartPos;return /*#__PURE__*/_jsx(Tag,{ref:containerRef,style:{...props.style,wordWrap:\"break-word\",overflowWrap:\"break-word\",// ✅ Preserve Shift+Enter line breaks\nwhiteSpace:\"pre-wrap\",margin:0,...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\"},headingTag:{type:ControlType.Enum,title:\"Tag\",options:[\"p\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\"],optionTitles:[\"P\",\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\"],defaultValue:\"p\",displaySegmentedControl:false},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\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}