{"version":3,"file":"ScrollMaskText.DUHL68aJ.mjs","names":["React.forwardRef","useRef","useState"],"sources":["https:/framerusercontent.com/modules/6hdZsdtYRQ5LaV8iVOrb/Pq86nrKVlYGvPBqIRE0L/dtvdJt3Kt.js","https:/framerusercontent.com/modules/u4pgzAf1uBr2l3KkglXG/RqRX4Di3yMSk4vFxn2Jx/ScrollMaskText.js"],"sourcesContent":["// Generated by Framer (85eaff3)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,cx,motion,useSVGTemplate,withCSS}from\"framer\";import*as React from\"react\";import{forwardRef}from\"react\";const mask=\"var(--framer-icon-mask)\";const Base=/*#__PURE__*/forwardRef(function(props,ref){return /*#__PURE__*/_jsx(\"svg\",{...props,ref:ref,children:props.children});});const MotionSVG=motion.create(Base);const SVG=/*#__PURE__*/forwardRef((props,ref)=>{const{animated,layoutId,children,...rest}=props;return animated?/*#__PURE__*/_jsx(MotionSVG,{...rest,layoutId:layoutId,ref:ref,children:children}):/*#__PURE__*/_jsx(\"svg\",{...rest,ref:ref,children:children});});const svg='<svg display=\"block\" role=\"presentation\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 11.106 2.317 C 11.669 2.598 12.331 2.598 12.894 2.317 L 16.553 0.487 C 16.863 0.332 17.232 0.349 17.526 0.531 C 17.821 0.714 18.001 1.036 18 1.383 L 18 14.147 C 18 14.526 17.786 14.872 17.447 15.041 L 12.894 17.318 C 12.331 17.599 11.669 17.599 11.106 17.318 L 6.894 15.212 C 6.331 14.931 5.669 14.931 5.106 15.212 L 1.447 17.042 C 1.137 17.197 0.768 17.18 0.473 16.997 C 0.178 16.815 -0.001 16.492 0 16.145 L 0 3.382 C 0 3.003 0.214 2.657 0.553 2.488 L 5.106 0.211 C 5.669 -0.07 6.331 -0.07 6.894 0.211 Z\" fill=\"transparent\" height=\"17.528864172505465px\" id=\"IoxdOCuI3\" stroke-dasharray=\"\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"var(--js9iwy, 2)\" stroke=\"var(--1m973uw, rgb(0,0,0))\" transform=\"translate(3 3.236)\" width=\"18.000004136296027px\"/><path d=\"M 0 0 L 0 15\" fill=\"transparent\" height=\"15px\" id=\"YiWfMPWsI\" stroke-dasharray=\"\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"var(--js9iwy, 2)\" stroke=\"var(--1m973uw, rgb(0,0,0))\" transform=\"translate(15 5.764)\" width=\"1px\"/><path d=\"M 0 0 L 0 15\" fill=\"transparent\" height=\"15px\" id=\"DncYKsXjp\" stroke-dasharray=\"\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"var(--js9iwy, 2)\" stroke=\"var(--1m973uw, rgb(0,0,0))\" transform=\"translate(9 3.236)\" width=\"1px\"/></svg>';const getProps=({color,height,id,width,width1,...props})=>{return{...props,JEeZYcamG:width1??props.JEeZYcamG??2,P_DcoRcrY:color??props.P_DcoRcrY??\"rgb(0, 0, 0)\"};};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{style,className,layoutId,variant,P_DcoRcrY,JEeZYcamG,...restProps}=getProps(props);const href=useSVGTemplate(\"1705284671\",svg);return /*#__PURE__*/_jsx(SVG,{...restProps,className:cx(\"framer-PlzPk\",className),layoutId:layoutId,ref:ref,role:\"presentation\",style:{\"--1m973uw\":P_DcoRcrY,\"--js9iwy\":JEeZYcamG,...style},viewBox:\"0 0 24 24\",children:/*#__PURE__*/_jsx(\"use\",{href:href})});});const css=[`.framer-PlzPk { -webkit-mask: ${mask}; aspect-ratio: 1; display: block; mask: ${mask}; width: 24px; }`];/**\n * This is a generated Framer component.\n * @framerIntrinsicWidth 24\n * @framerIntrinsicHeight 24\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerVariables {\"P_DcoRcrY\":\"color\",\"JEeZYcamG\":\"width1\"}\n * @framerImmutableVariables true\n * @framerVector {\"name\":\"Map\",\"color\":{\"type\":\"variable\",\"value\":\"1m973uw\"},\"set\":{\"localId\":\"vectorSet/ZsiCCGPvG\",\"id\":\"ZsiCCGPvG\",\"moduleId\":\"Y7SpbVH16cWqMhj75z1M\"}}\n */const Icon=withCSS(Component,css,\"framer-PlzPk\");Icon.displayName=\"Map\";export default Icon;addPropertyControls(Icon,{P_DcoRcrY:{defaultValue:\"rgb(0, 0, 0)\",hidden:false,title:\"Color\",type:ControlType.Color},JEeZYcamG:{defaultValue:2,displayStepper:true,hidden:false,max:16,min:1,title:\"Width\",type:ControlType.Number}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Icon\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"24\",\"framerImmutableVariables\":\"true\",\"framerContractVersion\":\"1\",\"framerVariables\":\"{\\\"P_DcoRcrY\\\":\\\"color\\\",\\\"JEeZYcamG\\\":\\\"width1\\\"}\",\"framerVector\":\"{\\\"name\\\":\\\"Map\\\",\\\"color\\\":{\\\"type\\\":\\\"variable\\\",\\\"value\\\":\\\"1m973uw\\\"},\\\"set\\\":{\\\"localId\\\":\\\"vectorSet/ZsiCCGPvG\\\",\\\"id\\\":\\\"ZsiCCGPvG\\\",\\\"moduleId\\\":\\\"Y7SpbVH16cWqMhj75z1M\\\"}}\",\"framerIntrinsicHeight\":\"24\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// Scroll-based text color change component - changes color of each word as user scrolls\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useScroll,useTransform}from\"framer-motion\";/**\n * Scroll Text Color\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 200\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ScrollMaskText(props){const{text=\"Create amazing experiences with scroll-based animations\",defaultColor=\"#CCCCCC\",activeColor=\"#000000\",font,alignment=\"left\",startOffset=.3,endOffset=.7}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const[words,setWords]=useState([]);useEffect(()=>{startTransition(()=>{setWords(text.split(\" \"));});},[text]);const{scrollYProgress}=useScroll({target:containerRef,offset:[`start ${1-startOffset}`,`end ${endOffset}`]});if(isStatic){const midPoint=Math.floor(words.length/2);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,padding:0,textAlign:alignment,...font,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"},children:words.map((word,index)=>/*#__PURE__*/_jsxs(\"span\",{style:{color:index<midPoint?activeColor:defaultColor,transition:\"color 0.3s ease\"},children:[word,index<words.length-1?\" \":\"\"]},index))})});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"p\",{style:{margin:0,padding:0,textAlign:alignment,...font,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"},children:words.map((word,index)=>{const start=index/words.length;const end=(index+1)/words.length;return /*#__PURE__*/_jsx(Word,{word:word,scrollYProgress:scrollYProgress,start:start,end:end,defaultColor:defaultColor,activeColor:activeColor,isLast:index===words.length-1},index);})})});}function Word({word,scrollYProgress,start,end,defaultColor,activeColor,isLast}){const progress=useTransform(scrollYProgress,[start,end],[0,1]);const clipPath=useTransform(progress,value=>`inset(0 ${100-value*100}% 0 0)`);return /*#__PURE__*/_jsxs(motion.span,{style:{position:\"relative\",display:\"inline-block\"},children:[/*#__PURE__*/_jsxs(\"span\",{style:{color:defaultColor},children:[word,!isLast?\" \":\"\"]}),/*#__PURE__*/_jsxs(motion.span,{style:{position:\"absolute\",left:0,top:0,color:activeColor,clipPath:clipPath},children:[word,!isLast?\" \":\"\"]})]});}addPropertyControls(ScrollMaskText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Create amazing experiences with scroll-based animations\",displayTextArea:true},defaultColor:{type:ControlType.Color,title:\"Default Color\",defaultValue:\"#CCCCCC\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},alignment:{type:ControlType.Enum,title:\"Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},startOffset:{type:ControlType.Number,title:\"Start Offset\",defaultValue:.3,min:0,max:1,step:.1,unit:\"\"},endOffset:{type:ControlType.Number,title:\"End Offset\",defaultValue:.7,min:0,max:1,step:.1,unit:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollMaskText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollMaskText.map"],"mappings":"oUAC0C,IAAqF,IAA4B,EAAqC,EAAK,0BAAgC,EAAkB,EAAW,SAAS,EAAM,EAAI,CAAC,OAAoB,EAAK,MAAM,CAAC,GAAG,EAAU,MAAI,SAAS,EAAM,QAAQ,CAAC,CAAE,CAAC,EAAQ,EAAU,EAAO,OAAO,CAAI,EAAQ,EAAiB,GAAY,EAAM,IAAM,CAAC,GAAK,CAAC,WAAS,WAAS,WAAS,GAAG,GAAM,EAAM,OAAO,EAAsB,EAAK,EAAU,CAAC,GAAG,EAAc,WAAa,MAAa,UAAQ,CAAC,EAAe,EAAK,MAAM,CAAC,GAAG,EAAS,MAAa,UAAQ,CAAC,CAAE,CAAC,EAAQ,EAAI,w2CAA82C,GAAU,CAAC,QAAM,SAAO,KAAG,QAAM,SAAO,GAAG,MAAgB,CAAC,GAAG,EAAM,UAAU,GAAQ,EAAM,WAAW,EAAE,UAAU,GAAO,EAAM,WAAW,cAAc,GASppE,EAAK,EATgrEA,EAAiB,SAAS,EAAM,EAAI,CAAC,GAAK,CAAC,QAAM,YAAU,WAAS,UAAQ,YAAU,YAAU,GAAG,GAAW,EAAS,CAAK,EAAQ,EAAK,EAAe,aAAa,CAAG,EAAE,OAAoB,EAAK,EAAI,CAAC,GAAG,EAAU,UAAU,EAAG,eAAe,CAAS,EAAW,WAAa,MAAI,KAAK,eAAe,MAAM,CAAC,YAAY,EAAU,WAAW,EAAU,GAAG,CAAK,EAAE,QAAQ,YAAY,SAAsB,EAAK,MAAM,CAAM,MAAI,CAAC,CAAC,CAAC,CAAE,CAS1kF,EAAE,CATslF,iCAAiC,EAAK,2CAA2C,EAAK,iBAS1qF,EAAE,cAAc,EAAE,EAAK,YAAY,MAA0B,EAAoB,EAAK,CAAC,UAAU,CAAC,aAAa,eAAe,OAAO,GAAM,MAAM,QAAQ,KAAK,EAAY,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,eAAe,GAAK,OAAO,GAAM,IAAI,GAAG,IAAI,EAAE,MAAM,QAAQ,KAAK,EAAY,MAAM,CAAC,CAAC,KCD/T,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,OAAK,0DAA0D,eAAa,UAAU,cAAY,UAAU,OAAK,YAAU,OAAO,cAAY,GAAG,YAAU,IAAI,EAAY,EAAaC,EAAO,IAAI,EAAQ,EAAS,EAAoB,EAAO,CAAC,EAAM,GAAUC,EAAS,CAAC,CAAC,EAAE,MAAc,CAAC,MAAoB,CAAC,EAAS,EAAK,MAAM,GAAG,CAAC,CAAE,CAAC,CAAE,EAAE,CAAC,CAAI,CAAC,EAAE,GAAK,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAAa,OAAO,CAAC,SAAS,EAAE,IAAc,OAAO,GAAW,CAAC,CAAC,EAAE,GAAG,EAAS,CAAC,IAAM,EAAS,KAAK,MAAM,EAAM,OAAO,CAAC,EAAE,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,MAAM,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,IAAY,SAAS,SAAS,IAAY,QAAQ,WAAW,aAAa,SAAS,SAAS,SAAS,UAAU,EAAE,SAAsB,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAU,GAAG,EAAK,WAAW,WAAW,UAAU,YAAY,EAAE,SAAS,EAAM,KAAK,EAAK,IAAqB,EAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAM,EAAS,EAAY,EAAa,WAAW,iBAAiB,EAAE,SAAS,CAAC,EAAK,EAAM,EAAM,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,MAAM,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,IAAY,SAAS,SAAS,IAAY,QAAQ,WAAW,aAAa,SAAS,SAAS,SAAS,UAAU,EAAE,SAAsB,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAU,GAAG,EAAK,WAAW,WAAW,UAAU,YAAY,EAAE,SAAS,EAAM,KAAK,EAAK,IAAQ,CAAC,IAAM,EAAM,EAAM,EAAM,OAAa,GAAK,EAAM,GAAG,EAAM,OAAO,OAAoB,EAAK,EAAK,CAAM,OAAqB,kBAAsB,QAAU,MAAiB,eAAyB,cAAY,OAAO,IAAQ,EAAM,OAAO,CAAC,EAAE,CAAK,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,SAAS,EAAK,CAAC,OAAK,kBAAgB,QAAM,MAAI,eAAa,cAAY,UAAQ,CAAgE,IAAM,EAAS,EAA/D,EAAa,EAAgB,CAAC,EAAM,CAAG,EAAE,CAAC,EAAE,CAAC,CAAsC,EAAE,GAAO,WAAW,IAAI,EAAM,IAAI,OAAO,EAAE,OAAoB,EAAM,EAAO,KAAK,CAAC,MAAM,CAAC,SAAS,WAAW,QAAQ,cAAc,EAAE,SAAS,CAAc,EAAM,OAAO,CAAC,MAAM,CAAC,MAAM,CAAY,EAAE,SAAS,CAAC,EAAM,EAAW,GAAJ,GAAM,CAAC,CAAC,EAAe,EAAM,EAAO,KAAK,CAAC,MAAM,CAAC,SAAS,WAAW,KAAK,EAAE,IAAI,EAAE,MAAM,EAAqB,UAAQ,EAAE,SAAS,CAAC,EAAM,EAAW,GAAJ,GAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,iBAR9xE,IAA6D,IAAwE,IAAyD,EAQimE,EAAoB,EAAe,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,0DAA0D,gBAAgB,EAAI,EAAE,aAAa,CAAC,KAAK,EAAY,MAAM,MAAM,gBAAgB,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,SAAS,EAAE,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,OAAO,cAAc,UAAU,WAAW,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAE,aAAa,CAAC,OAAO,SAAS,OAAO,EAAE,aAAa,OAAO,wBAAwB,EAAI,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC,CAAC"}