{"version":3,"file":"TextOpacity.CaOmYR3L.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/nUhkf2Q7D5Y3KH28Vl1J/4rUNx73nFNoIlYiefAea/TextOpacity.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,index,transitionStartIndex,colortexte})=>{// L'animation va de la couleur choisie vers le blanc au scroll\nconst colorProgress=useTransform(progress,[start,end],[colortexte,\"#FFFFFF\"]);// Si l'index est inférieur au start index, on force le blanc, sinon on suit le scroll\nconst finalColor=index<transitionStartIndex?\"#FFFFFF\":colorProgress;return /*#__PURE__*/_jsx(motion.span,{style:{color:finalColor},children:char});};const EachWord=({word,progress,starting,ending,transitionStartIndex,currentCharacterIndex,colortexte})=>{const characters=word.split(\"\");const amount=ending-starting;const step=amount/characters.length;return /*#__PURE__*/_jsxs(motion.span,{style:{display:\"inline-block\",whiteSpace:\"pre\"},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,index:currentCharacterIndex+idx,transitionStartIndex:transitionStartIndex,colortexte:colortexte},idx);}),/*#__PURE__*/_jsx(\"span\",{children:\"\\xa0\"})]});};export default function Text_Color_Letters(props){const{text,fontSize,lineHeight,letterSpacing,paragraphAlign,transitionStartIndex,fontFamily,fontWeight,colortexte}=props;const words=text.split(\" \");const ref=useRef(null);// Ajustement de l'offset pour être sûr que l'effet se déclenche et s'inverse\nconst{scrollYProgress}=useScroll({target:ref,offset:[\"start 0.8\",\"start 0.2\"]});useEffect(()=>{const style=document.createElement(\"style\");style.appendChild(document.createTextNode(`\n            @import url('https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g,\"+\")}:wght@400;500;700&display=swap');\n        `));document.head.appendChild(style);return()=>{document.head.removeChild(style);};},[fontFamily]);let currentCharacterIndex=0;return /*#__PURE__*/_jsx(\"p\",{ref:ref,style:{fontFamily:`${fontFamily}, sans-serif`,fontSize:`${fontSize}px`,fontWeight:fontWeight,display:\"flex\",flexWrap:\"wrap\",lineHeight:`${lineHeight}px`,letterSpacing:`${letterSpacing}px`,justifyContent:paragraphAlign,margin:0},children:words.map((word,idx)=>{const starting=idx/words.length;const ending=(idx+1)/words.length;const startIdx=currentCharacterIndex;currentCharacterIndex+=word.length+1;return /*#__PURE__*/_jsx(EachWord,{word:word,progress:scrollYProgress,starting:starting,ending:ending,transitionStartIndex:transitionStartIndex,currentCharacterIndex:startIdx,colortexte:colortexte},idx);})});}addPropertyControls(Text_Color_Letters,{text:{title:\"Text\",type:ControlType.String,defaultValue:\"Hello Text\"},fontFamily:{title:\"Font Family\",type:ControlType.String,defaultValue:\"Urbanist\"},fontSize:{title:\"Font Size\",type:ControlType.Number,defaultValue:48},fontWeight:{title:\"Font Weight\",type:ControlType.Enum,options:[\"400\",\"500\",\"700\"],defaultValue:\"400\"},lineHeight:{title:\"Line Height\",type:ControlType.Number,defaultValue:60},letterSpacing:{title:\"Letter Spacing\",type:ControlType.Number,defaultValue:-1},paragraphAlign:{title:\"Align\",type:ControlType.Enum,options:[\"flex-start\",\"center\",\"flex-end\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"center\"},colortexte:{title:\"Couleur Base\",type:ControlType.Color,defaultValue:\"#666666\"},transitionStartIndex:{title:\"Start Index\",type:ControlType.Number,defaultValue:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Text_Color_Letters\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextOpacity.map"],"mappings":"kPAE4xB,SAAwB,EAAmB,EAAM,CAAC,GAAK,CAAC,OAAK,WAAS,aAAW,gBAAc,iBAAe,uBAAqB,aAAW,aAAW,cAAY,EAAY,EAAM,EAAK,MAAM,IAAI,CAAO,EAAIA,EAAO,KAAK,CACp/B,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAAI,OAAO,CAAC,YAAY,YAAY,CAAC,CAAC,CAAC,MAAc,CAAC,IAAM,EAAM,SAAS,cAAc,QAAQ,CAE7F,OAF8F,EAAM,YAAY,SAAS,eAAe;oEACjH,EAAW,QAAQ,KAAK,IAAI,CAAC;UACvF,CAAC,CAAC,SAAS,KAAK,YAAY,EAAM,KAAW,CAAC,SAAS,KAAK,YAAY,EAAM,GAAK,CAAC,EAAW,CAAC,CAAC,IAAI,EAAsB,EAAE,OAAoB,EAAK,IAAI,CAAK,MAAI,MAAM,CAAC,WAAW,GAAG,EAAW,cAAc,SAAS,GAAG,EAAS,IAAe,aAAW,QAAQ,OAAO,SAAS,OAAO,WAAW,GAAG,EAAW,IAAI,cAAc,GAAG,EAAc,IAAI,eAAe,EAAe,OAAO,EAAE,CAAC,SAAS,EAAM,KAAK,EAAK,IAAM,CAAC,IAAM,EAAS,EAAI,EAAM,OAAa,GAAQ,EAAI,GAAG,EAAM,OAAa,EAAS,EAA2D,MAArC,IAAuB,EAAK,OAAO,EAAsB,EAAK,EAAS,CAAM,OAAK,SAAS,EAAyB,WAAgB,SAA4B,uBAAqB,sBAAsB,EAAoB,aAAW,CAAC,EAAI,EAAG,CAAC,CAAC,sBALntB,IAAoD,IAAyD,IAAoC,CAAM,GAAe,CAAC,OAAK,QAAM,MAAI,WAAS,QAAM,uBAAqB,gBAAc,CACjS,IAAM,EAAc,EAAa,EAAS,CAAC,EAAM,EAAI,CAAC,CAAC,EAAW,UAAU,CAAC,CACvE,EAAW,EAAM,EAAqB,UAAU,EAAc,OAAoB,EAAK,EAAO,KAAK,CAAC,MAAM,CAAC,MAAM,EAAW,CAAC,SAAS,EAAK,CAAC,EAAS,GAAU,CAAC,OAAK,WAAS,WAAS,SAAO,uBAAqB,wBAAsB,gBAAc,CAAC,IAAM,EAAW,EAAK,MAAM,GAAG,CAAoC,GAAtB,EAAO,GAA2B,EAAW,OAAO,OAAoB,EAAM,EAAO,KAAK,CAAC,MAAM,CAAC,QAAQ,eAAe,WAAW,MAAM,CAAC,SAAS,CAAC,EAAW,KAAK,EAAK,IAAiG,EAAK,EAAc,CAAM,OAAK,MAAxG,EAAS,EAAK,EAA0G,IAAxF,EAAS,GAAM,EAAI,GAA0F,WAAS,MAAM,EAAsB,EAAyB,uBAAgC,aAAW,CAAC,EAAI,CAAG,CAAc,EAAK,OAAO,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,CAAC,EAGX,EAAoB,EAAmB,CAAC,KAAK,CAAC,MAAM,OAAO,KAAK,EAAY,OAAO,aAAa,aAAa,CAAC,WAAW,CAAC,MAAM,cAAc,KAAK,EAAY,OAAO,aAAa,WAAW,CAAC,SAAS,CAAC,MAAM,YAAY,KAAK,EAAY,OAAO,aAAa,GAAG,CAAC,WAAW,CAAC,MAAM,cAAc,KAAK,EAAY,KAAK,QAAQ,CAAC,MAAM,MAAM,MAAM,CAAC,aAAa,MAAM,CAAC,WAAW,CAAC,MAAM,cAAc,KAAK,EAAY,OAAO,aAAa,GAAG,CAAC,cAAc,CAAC,MAAM,iBAAiB,KAAK,EAAY,OAAO,aAAa,GAAG,CAAC,eAAe,CAAC,MAAM,QAAQ,KAAK,EAAY,KAAK,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC,aAAa,CAAC,OAAO,SAAS,QAAQ,CAAC,aAAa,SAAS,CAAC,WAAW,CAAC,MAAM,eAAe,KAAK,EAAY,MAAM,aAAa,UAAU,CAAC,qBAAqB,CAAC,MAAM,cAAc,KAAK,EAAY,OAAO,aAAa,EAAE,CAAC,CAAC"}