{"version":3,"file":"ScrollColorText_2.DP8HTqox.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/rC1faGU8S52qPBAxPWOY/h8ouRq7T1l104QLzhnQI/ScrollColorText_2.js"],"sourcesContent":["// Animated Scroll Sentence\n// Displays a sentence where each word animates from a start color to an end color as the user scrolls. Sentence and colors are customizable.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef}from\"react\";import{motion,useScroll,useTransform}from\"framer-motion\";/**\n * Animated Scroll Sentence\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 60\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ScrollColorText(props){const{sentence=\"Scroll to animate each word\",startColor=\"#888888\",endColor=\"#000000\",font,style}=props;const ref=useRef(null);const words=sentence.split(\" \");const{scrollYProgress}=useScroll({target:ref,offset:[\"start 60vh\",\"start 20vh\"]});// Each word gets a slightly later trigger\nconst wordCount=words.length;const wordElements=words.map((word,i)=>{// Each word's animation is offset in scroll progress\nconst start=i/(wordCount+1);const end=(i+1)/(wordCount+1);const color=useTransform(scrollYProgress,[start,end],[startColor,endColor]);return /*#__PURE__*/_jsx(motion.span,{style:{color,transition:\"color 0.2s\",display:\"inline-block\",marginRight:i===wordCount-1?0:6,font:\"inherit\"},children:word},i);});return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{...style,width:\"100%\",minWidth:0,maxHeight:\"80vh\",display:\"flex\",flexWrap:\"wrap\",alignItems:\"center\",justifyContent:font?.textAlign===\"center\"?\"center\":font?.textAlign===\"right\"?\"flex-end\":\"flex-start\",...font,gap:0,background:\"none\"},\"aria-label\":sentence,children:wordElements});}addPropertyControls(ScrollColorText,{sentence:{type:ControlType.String,title:\"Sentence\",defaultValue:\"Scroll to animate each word\",displayTextArea:false},startColor:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#888888\"},endColor:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"22px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollColorText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicHeight\":\"60\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText_2.map"],"mappings":"yOAUG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,WAAS,8BAA8B,aAAW,UAAU,WAAS,UAAU,OAAK,SAAO,EAAY,EAAIA,EAAO,KAAK,CAAO,EAAM,EAAS,MAAM,IAAI,CAAM,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAAI,OAAO,CAAC,aAAa,aAAa,CAAC,CAAC,CAC3R,EAAU,EAAM,OAAa,EAAa,EAAM,KAAK,EAAK,IAAI,CACV,IAAM,EAAM,EAAa,EAAgB,CAAvF,GAAG,EAAU,IAAc,EAAE,IAAI,EAAU,GAAuD,CAAC,CAAC,EAAW,EAAS,CAAC,CAAC,OAAoB,EAAK,EAAO,KAAK,CAAC,MAAM,CAAC,QAAM,WAAW,aAAa,QAAQ,eAAe,YAAY,IAAI,EAAU,EAAE,EAAE,EAAE,KAAK,UAAU,CAAC,SAAS,EAAK,CAAC,EAAE,EAAG,CAAC,OAAoB,EAAK,MAAM,CAAK,MAAI,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,SAAS,EAAE,UAAU,OAAO,QAAQ,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe,GAAM,YAAY,SAAS,SAAS,GAAM,YAAY,QAAQ,WAAW,aAAa,GAAG,EAAK,IAAI,EAAE,WAAW,OAAO,CAAC,aAAa,EAAS,SAAS,EAAa,CAAC,kBAVzkB,IAAoD,IAA0B,IAAyD,CAUoc,EAAoB,EAAgB,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,8BAA8B,gBAAgB,GAAM,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,CAAC,SAAS,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,UAAU,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,QAAQ,CAAC,CAAC,CAAC"}