{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/bpHHPHOvwkXmEaFzgYoU/7BrxyQDJExmJvJEZ3rNd/Text_Opacity_Letters.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers\nimport{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})=>{const opacityProgress=useTransform(progress,[start,end],[.1,1]);return /*#__PURE__*/_jsx(motion.span,{style:{opacity:opacityProgress},children:char});};const EachWord=({word,progress,starting,ending})=>{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});}),\"\\xa0\"]});};/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function Text_Opacity_Letters(props){const text=props.text;const words=text.split(\" \");const totalWords=words.length;const ref=useRef(null);const{scrollYProgress}=useScroll({target:ref,offset:[\"start 0.75\",\"start 0.15\"]});return /*#__PURE__*/_jsx(\"p\",{ref:ref,style:{...props.font,display:\"flex\",flexWrap:\"wrap\",color:props.textColor},children:words.map((word,idx)=>{const starting=idx/totalWords;const ending=(idx+1)/totalWords;return /*#__PURE__*/_jsx(EachWord,{word:word,progress:scrollYProgress,starting:starting,ending:ending});})});}addPropertyControls(Text_Opacity_Letters,{text:{title:\"Text\",type:ControlType.String,defaultValue:\"Hello Text\"},font:{type:\"font\",controls:\"extended\"},textColor:{type:ControlType.Color}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Text_Opacity_Letters\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Text_Opacity_Letters.map"],
  "mappings": "8JAEgM,IAAMA,EAAc,CAAC,CAAC,KAAAC,EAAK,MAAAC,EAAM,IAAAC,EAAI,SAAAC,CAAQ,IAAI,CAAC,IAAMC,EAAgBC,EAAaF,EAAS,CAACF,EAAMC,CAAG,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,OAAoBI,EAAKC,EAAO,KAAK,CAAC,MAAM,CAAC,QAAQH,CAAe,EAAE,SAASJ,CAAI,CAAC,CAAE,EAAQQ,EAAS,CAAC,CAAC,KAAAC,EAAK,SAAAN,EAAS,SAAAO,EAAS,OAAAC,CAAM,IAAI,CAAC,IAAMC,EAAWH,EAAK,MAAM,EAAE,EAAQI,EAAWJ,EAAK,OAA0CK,GAAtBH,EAAOD,GAA2BG,EAAW,OAAoB,EAAMN,EAAO,KAAK,CAAC,SAAS,CAACK,EAAW,IAAI,CAACZ,EAAKe,IAAM,CAAC,IAAMC,EAAUN,EAASI,EAAKC,EAAUE,EAAQP,EAASI,GAAMC,EAAI,GAAG,OAAoBT,EAAKP,EAAc,CAAC,KAAKC,EAAK,MAAMgB,EAAU,IAAIC,EAAQ,SAASd,CAAQ,CAAC,CAAE,CAAC,EAAE,MAAM,CAAC,CAAC,CAAE,EAMpyB,SAARe,EAAsCC,EAAM,CAAuB,IAAMC,EAAjBD,EAAM,KAAsB,MAAM,GAAG,EAAQE,EAAWD,EAAM,OAAaE,EAAIC,EAAO,IAAI,EAAO,CAAC,gBAAAC,CAAe,EAAEC,EAAU,CAAC,OAAOH,EAAI,OAAO,CAAC,aAAa,YAAY,CAAC,CAAC,EAAE,OAAoBhB,EAAK,IAAI,CAAC,IAAIgB,EAAI,MAAM,CAAC,GAAGH,EAAM,KAAK,QAAQ,OAAO,SAAS,OAAO,MAAMA,EAAM,SAAS,EAAE,SAASC,EAAM,IAAI,CAACX,EAAKM,IAAM,CAAC,IAAML,EAASK,EAAIM,EAAiBV,GAAQI,EAAI,GAAGM,EAAW,OAAoBf,EAAKE,EAAS,CAAC,KAAKC,EAAK,SAASe,EAAgB,SAASd,EAAS,OAAOC,CAAM,CAAC,CAAE,CAAC,CAAC,CAAC,CAAE,CAACe,EAAoBR,EAAqB,CAAC,KAAK,CAAC,MAAM,OAAO,KAAKS,EAAY,OAAO,aAAa,YAAY,EAAE,KAAK,CAAC,KAAK,OAAO,SAAS,UAAU,EAAE,UAAU,CAAC,KAAKA,EAAY,KAAK,CAAC,CAAC",
  "names": ["EachCharacter", "char", "start", "end", "progress", "opacityProgress", "useTransform", "p", "motion", "EachWord", "word", "starting", "ending", "characters", "wordLength", "step", "idx", "charStart", "charEnd", "Text_Opacity_Letters", "props", "words", "totalWords", "ref", "pe", "scrollYProgress", "useScroll", "addPropertyControls", "ControlType"]
}