{"version":3,"file":"ScrollColorChangeText.3u5csoSN.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/Ey9dRwwEUOHElpQBkwwi/vPS0t0kwbppGXBr37Chr/ScrollColorChangeText.js"],"sourcesContent":["// Text opacity letters component that changes color on scroll\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useScroll,useTransform,motion}from\"framer-motion\";import{useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n */export default function ScrollColorChangeText(props){const{text=\"Scroll to see the magic\",startColor=\"#CCCCCC\",endColor=\"#000000\",font,textBalance=false,trigger=\"mid\"}=props;const containerRef=useRef(null);const textAlign=font?.textAlign??\"left\";const targetPoint=trigger===\"top\"?\"start\":trigger===\"bottom\"?\"end\":\"center\";const{scrollYProgress}=useScroll({target:containerRef,offset:[`${targetPoint} 0.8`,`${targetPoint} 0.2`]});const lines=text.split(\"\\n\");const totalLetters=text.replace(/[\\s]/g,\"\").length;const wordsByLine=lines.map(line=>line.split(\" \"));const lettersBeforeLine=wordsByLine.map((wordsInLine,lineIndex)=>{const prevLines=wordsByLine.slice(0,lineIndex).flat().join(\"\").replace(/\"\"/g,\"\");return prevLines.length;});return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:textAlign===\"right\"?\"flex-end\":textAlign===\"center\"?\"center\":\"flex-start\",width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(\"span\",{style:{display:\"block\",width:\"100%\",...font,...textBalance&&{textWrap:\"balance\",WebkitTextWrap:\"balance\"}},children:wordsByLine.map((wordsInLine,lineIndex)=>{const lineText=lines[lineIndex];if(lineText.length===0){return lineIndex===wordsByLine.length-1?null:/*#__PURE__*/_jsx(\"br\",{},\"br-\"+lineIndex);}return /*#__PURE__*/_jsxs(\"span\",{style:{display:\"inline\"},children:[wordsInLine.map((word,wordIndex)=>{const lettersBefore=lettersBeforeLine[lineIndex]+wordsInLine.slice(0,wordIndex).join(\"\").length;return /*#__PURE__*/_jsx(Word,{word:word,scrollYProgress:scrollYProgress,lettersBefore:lettersBefore,totalLetters:totalLetters,startColor:startColor,endColor:endColor,isLastWord:wordIndex===wordsInLine.length-1},wordIndex);}),lineIndex===wordsByLine.length-1?null:/*#__PURE__*/_jsx(\"br\",{})]},\"line-\"+lineIndex);})})});}function Word({word,scrollYProgress,lettersBefore,totalLetters,startColor,endColor,isLastWord}){const letters=word.split(\"\");return /*#__PURE__*/_jsxs(\"span\",{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},children:[letters.map((letter,index)=>{const absoluteIndex=lettersBefore+index;const start=absoluteIndex/totalLetters;const end=start+1/totalLetters;return /*#__PURE__*/_jsx(Letter,{letter:letter,scrollYProgress:scrollYProgress,start:start,end:end,startColor:startColor,endColor:endColor},index);}),!isLastWord&&/*#__PURE__*/_jsx(\"span\",{style:{display:\"inline\"},children:\"\\xa0\"})]});}function Letter({letter,scrollYProgress,start,end,startColor,endColor}){const opacity=useTransform(scrollYProgress,[start,end],[.2,1]);const color=useTransform(scrollYProgress,[start,end],[startColor,endColor]);return /*#__PURE__*/_jsx(motion.span,{style:{opacity,color,display:letter===\" \"?\"inline\":\"inline-block\"},children:letter===\" \"?\"\\xa0\":letter});}ScrollColorChangeText.displayName=\"Scroll Color Change Text\";addPropertyControls(ScrollColorChangeText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Scroll to see the magic\",displayTextArea:true},textBalance:{type:ControlType.Boolean,title:\"Text Balance\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"top\",\"mid\",\"bottom\"],optionTitles:[\"Top\",\"Mid\",\"Bottom\"],defaultValue:\"mid\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},startColor:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#CCCCCC\"},endColor:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollColorChangeText\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorChangeText.map"],"mappings":"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"}