{"version":3,"file":"WordColorScroll.D43IPrix.mjs","names":["useRef","useState"],"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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"}