{"version":3,"file":"WordColorScroll.ITeEXEBw.mjs","names":["useRef","useState","__esmMin","te","_e","p","c","init_jsx_runtime","ce","init_npm_react_18_3_1","de","useTransform","useScroll","init_framer_motion_DhsWWWsN","motion","addPropertyControls","init_framer_BWFVvmND","useIsStaticRenderer","ControlType","WordColorScroll","props","containerRef","isStatic","words","setWords","text","startOffset","endOffset","midPoint","alignment","font","index","activeColor","defaultColor","word","start","end","Word","progress","scrollYProgress","clipPath","value","isLast","init_WordColorScroll"],"sources":["https:/framerusercontent.com/modules/5LIXxxCLEHwxupduFqk8/KLRZYPbTTkQrPTQ8aqNm/WordColorScroll.js"],"sourcesContent":["// Scroll-based text color change component - changes color of each word as user scrolls\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useScroll,useTransform}from\"framer-motion\";/**\n * Scroll Text Color\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 200\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function WordColorScroll(props){const{text=\"Create amazing experiences with scroll-based animations\",defaultColor=\"#CCCCCC\",activeColor=\"#000000\",font,alignment=\"left\",startOffset=.3,endOffset=.7}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const[words,setWords]=useState([]);useEffect(()=>{startTransition(()=>{setWords(text.split(\" \"));});},[text]);const{scrollYProgress}=useScroll({target:containerRef,offset:[`start ${1-startOffset}`,`end ${endOffset}`]});if(isStatic){const midPoint=Math.floor(words.length/2);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,padding:0,textAlign:alignment,...font,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"},children:words.map((word,index)=>/*#__PURE__*/_jsxs(\"span\",{style:{color:index<midPoint?activeColor:defaultColor,transition:\"color 0.3s ease\"},children:[word,index<words.length-1?\" \":\"\"]},index))})});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,padding:0,textAlign:alignment,...font,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"},children:words.map((word,index)=>{const start=index/words.length;const end=(index+1)/words.length;return /*#__PURE__*/_jsx(Word,{word:word,scrollYProgress:scrollYProgress,start:start,end:end,defaultColor:defaultColor,activeColor:activeColor,isLast:index===words.length-1},index);})})});}function Word({word,scrollYProgress,start,end,defaultColor,activeColor,isLast}){const progress=useTransform(scrollYProgress,[start,end],[0,1]);const clipPath=useTransform(progress,value=>`inset(0 ${100-value*100}% 0 0)`);return /*#__PURE__*/_jsxs(motion.span,{style:{position:\"relative\",display:\"inline-block\"},children:[/*#__PURE__*/_jsxs(\"span\",{style:{color:defaultColor},children:[word,!isLast?\" \":\"\"]}),/*#__PURE__*/_jsxs(motion.span,{style:{position:\"absolute\",left:0,top:0,color:activeColor,clipPath:clipPath},children:[word,!isLast?\" \":\"\"]})]});}addPropertyControls(WordColorScroll,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Create amazing experiences with scroll-based animations\",displayTextArea:true},defaultColor:{type:ControlType.Color,title:\"Default Color\",defaultValue:\"#CCCCCC\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},alignment:{type:ControlType.Enum,title:\"Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},startOffset:{type:ControlType.Number,title:\"Start Offset\",defaultValue:.3,min:0,max:1,step:.1,unit:\"\"},endOffset:{type:ControlType.Number,title:\"End Offset\",defaultValue:.7,min:0,max:1,step:.1,unit:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WordColorScroll\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WordColorScroll.map"],"mappings":"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"}