{"version":3,"file":"Text_Opacity_Letters.DRJcSPaG.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/Vn8Q3RtmOV2dKyAhsSgN/p0sw7V5he78f8hW6u6K0/Text_Opacity_Letters.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{motion,useScroll,useTransform}from\"framer-motion\";import{useRef}from\"react\";const EachCharacter=({char,start,end,progress,duration,easing,index,transitionStartIndex,fromColor,toColor})=>{// Animate from `fromColor` → `toColor` over this character's scroll range\nconst colorProgress=useTransform(progress,[start,end],[fromColor,toColor]);// Anything before `transitionStartIndex` is already in \"final\" color\nconst initialColor=index<transitionStartIndex?toColor:fromColor;return /*#__PURE__*/_jsx(motion.span,{style:{color:index<transitionStartIndex?initialColor:colorProgress},transition:{duration,ease:easing},children:char});};const EachWord=({word,progress,starting,ending,duration,easing,transitionStartIndex,currentCharacterIndex,fromColor,toColor})=>{const characters=word.split(\"\");const wordLength=characters.length;const amount=ending-starting;const step=amount/wordLength;return /*#__PURE__*/_jsxs(motion.span,{children:[characters.map((char,idx)=>{const charStart=starting+step*idx;const charEnd=starting+step*(idx+1);return /*#__PURE__*/_jsx(EachCharacter,{char:char,start:charStart,end:charEnd,progress:progress,duration:duration,easing:easing,index:currentCharacterIndex+idx,transitionStartIndex:transitionStartIndex,fromColor:fromColor,toColor:toColor},idx);}),\"\\xa0\"]});};export default function Text_Color_Letters(props){const{text,duration,easing,fontSize,lineHeight,letterSpacing,textAlign,transitionStartIndex,fontFamily,fromColor,toColor}=props;const words=text.split(\" \");const totalWords=words.length;const ref=useRef(null);const{scrollYProgress}=useScroll({target:ref,offset:[\"start 0.75\",\"start 0.15\"]});let currentCharacterIndex=0;return /*#__PURE__*/_jsx(\"p\",{ref:ref,style:{// This uses your Framer font / text style:\n// In the Font control you can pick any project text style you’ve created.\nfontFamily:fontFamily?.fontFamily,fontWeight:fontFamily?.fontWeight,fontStyle:fontFamily?.fontStyle,fontSize:`${fontSize}px`,lineHeight:`${lineHeight}px`,letterSpacing:`${letterSpacing}px`,color:toColor,display:\"flex\",flexWrap:\"wrap\",justifyContent:textAlign,margin:0},children:words.map((word,idx)=>{const starting=idx/totalWords;const ending=(idx+1)/totalWords;const wordLength=word.length;const startIdx=currentCharacterIndex;currentCharacterIndex+=wordLength+1// +1 for space\n;return /*#__PURE__*/_jsx(EachWord,{word:word,progress:scrollYProgress,starting:starting,ending:ending,duration:duration,easing:easing,transitionStartIndex:transitionStartIndex,currentCharacterIndex:startIdx,fromColor:fromColor,toColor:toColor},idx);})});}addPropertyControls(Text_Color_Letters,{text:{title:\"Text\",type:ControlType.String,defaultValue:\"Hello Text\"},// Pick any font / text style from your project here\nfontFamily:{title:\"Font\",type:ControlType.Font},fontSize:{title:\"Font Size\",type:ControlType.Number,defaultValue:48,min:10,max:100},lineHeight:{title:\"Line Height\",type:ControlType.Number,defaultValue:60,min:10,max:100},letterSpacing:{title:\"Letter Spacing\",type:ControlType.Number,defaultValue:-3,min:-10,max:10},textAlign:{title:\"Align\",type:ControlType.Enum,options:[\"flex-start\",\"center\",\"flex-end\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"flex-start\"},// 🎨 Color controls for both modes\nfromColor:{title:\"From Color\",type:ControlType.Color,defaultValue:\"#73799B\"},toColor:{title:\"To Color\",type:ControlType.Color,defaultValue:\"#F4F7FF\"},duration:{title:\"Duration\",type:ControlType.Number,defaultValue:.3,min:.1,max:3,step:.1},easing:{title:\"Easing\",type:ControlType.Enum,options:[\"easeInOut\",\"easeIn\",\"easeOut\",\"linear\"],optionTitles:[\"Ease In Out\",\"Ease In\",\"Ease Out\",\"Linear\"],defaultValue:\"easeInOut\"},transitionStartIndex:{title:\"Start Index\",type:ControlType.Number,defaultValue:22,min:0,max:1e3}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Text_Color_Letters\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Text_Opacity_Letters.map"],"mappings":"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"}