{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/razEAK51GUmZw4hHwM7k/zTmMRZbELKgS7kjeUTX4/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,useEffect}from\"react\";const EachCharacter=({char,start,end,progress,duration,easing,index,transitionStartIndex})=>{const colorProgress=useTransform(progress,[start,end],[\"#FFFFFF\",\"#FFFFFF\"]);const initialColor=index<transitionStartIndex?\"#FFFFFF\":\"#666666\";return /*#__PURE__*/_jsx(motion.span,{style:{color:index<transitionStartIndex?initialColor:colorProgress},transition:{duration:duration,ease:easing},children:char});};const EachWord=({word,progress,starting,ending,duration,easing,transitionStartIndex,currentCharacterIndex})=>{const characters=word.split(\"\");const wordLength=word.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},idx);}),\"\\xa0\"]});};export default function Text_Color_Letters(props){const{text,duration,easing,fontSize,lineHeight,letterSpacing,textAlign,transitionStartIndex}=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\"]});useEffect(()=>{const style=document.createElement(\"style\");style.appendChild(document.createTextNode(`\n            @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400&display=swap');\n        `));document.head.appendChild(style);return()=>{document.head.removeChild(style);};},[]);let currentCharacterIndex=0;return /*#__PURE__*/_jsx(\"p\",{ref:ref,style:{fontFamily:\"Urbanist, sans-serif\",fontSize:`${fontSize}px`,color:\"#666666\",display:\"flex\",flexWrap:\"wrap\",lineHeight:`${lineHeight}px`,letterSpacing:`${letterSpacing}px`,textAlign:textAlign||\"left\",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// Including space\n;return /*#__PURE__*/_jsx(EachWord,{word:word,progress:scrollYProgress,starting:starting,ending:ending,duration:duration,easing:easing,transitionStartIndex:transitionStartIndex,currentCharacterIndex:startIdx},idx);})});}addPropertyControls(Text_Color_Letters,{text:{title:\"Text\",type:ControlType.String,defaultValue:\"Hello Text\"},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:\"Text Align\",type:ControlType.Enum,options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\"},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:\"Transition 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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",
  "names": ["EachCharacter", "char", "start", "end", "progress", "duration", "easing", "index", "transitionStartIndex", "colorProgress", "useTransform", "initialColor", "p", "motion", "EachWord", "word", "starting", "ending", "currentCharacterIndex", "characters", "wordLength", "step", "u", "idx", "charStart", "charEnd", "Text_Color_Letters", "props", "text", "fontSize", "lineHeight", "letterSpacing", "textAlign", "words", "totalWords", "ref", "pe", "scrollYProgress", "useScroll", "ue", "style", "startIdx", "addPropertyControls", "ControlType"]
}