{"version":3,"file":"ScrollColorChangeText.ssByj3_P.mjs","names":["useRef","useState","useCallback","useMemo","__esmMin","init_ssg_sandbox_shims","te","ne","_e","pe","p","c","init_jsx_runtime","ce","init_npm_react_18_3_1","de","window","useTransform","motion","useMotionValue","init_framer_motion_DhsWWWsN","addPropertyControls","init_framer_B6PCHH0A","useIsStaticRenderer","ControlType","ScrollColorChangeText","props","isStatic","containerRef","currentFontSize","setCurrentFontSize","fontSizeDesktop","scrollYProgress","staticScrollYProgress","updateFontSize","width","fontSizeTablet","fontSizeMobile","clamp01","v","updateScrollProgress","rect","vh","startPx","denom","progress","rafId","onScroll","effectiveScrollYProgress","words","trimmed","text","totalLetters","fontWithoutSize","_ignoredFontSize","rest","font","alignItems","verticalAlign","style","lettersBefore","wordIndex","Word","word","letters","start","index","end","Letter","letter","isLastWord","opacity","color","startColor","endColor","staticStyle","init_ScrollColorChangeText"],"sources":["https:/framerusercontent.com/modules/UoJqg0DJF3FxVsS5xmSh/mlBYeGaJFXnxlJTEJe24/ScrollColorChangeText.js"],"sourcesContent":["// USER INSTRUCTIONS (verbatim):\n// Add a new \"Text Alignment\" option to this component.\n// Requirements:\n// - Add a property called \"Text Align\".\n// - Provide four options:\n//   - Left\n//   - Center\n//   - Right\n//   - Justify (optional)\n// - The selected option should immediately update the CSS `text-align` property of the text.\n// - Default value should be Left.\n// - This setting must be editable from the Style panel so users can freely switch between Left, Center, Right, and Justify without editing code.\n// - Make sure it works on Desktop, Tablet, and Mobile.\n// - Preserve all existing functionality and only add this new alignment control.\n//\n// Also add a \"Vertical Alignment\" option with:\n// - Top\n// - Center\n// - Bottom\n//\n// The text should align vertically inside its container using flex alignment, while keeping all existing features intact.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useMotionValue,useTransform}from\"framer-motion\";import{startTransition,useCallback,useEffect,useMemo,useRef,useState}from\"react\";/**\n * Scroll Color Change Text\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 140\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ScrollColorChangeText(props){const{text=\"Scroll to see the magic\",startColor=\"#CCCCCC\",endColor=\"#000000\",font,fontSizeDesktop=40,fontSizeTablet=32,fontSizeMobile=24,textAlign=\"left\",verticalAlign=\"top\",style}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[currentFontSize,setCurrentFontSize]=useState(fontSizeDesktop);const scrollYProgress=useMotionValue(1);const staticScrollYProgress=useMotionValue(1);const updateFontSize=useCallback(()=>{if(typeof window===\"undefined\")return;const width=window.innerWidth;if(width>=1024){startTransition(()=>setCurrentFontSize(fontSizeDesktop));}else if(width>=768){startTransition(()=>setCurrentFontSize(fontSizeTablet));}else{startTransition(()=>setCurrentFontSize(fontSizeMobile));}},[fontSizeDesktop,fontSizeMobile,fontSizeTablet]);useEffect(()=>{updateFontSize();if(typeof window===\"undefined\")return;window.addEventListener(\"resize\",updateFontSize);return()=>window.removeEventListener(\"resize\",updateFontSize);},[updateFontSize]);const clamp01=useCallback(v=>Math.max(0,Math.min(1,v)),[]);const updateScrollProgress=useCallback(()=>{if(typeof window===\"undefined\")return;if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const vh=window.innerHeight||1;const startPx=vh*.8;const endPx=vh*.2;const denom=startPx-endPx||1;const progress=clamp01((startPx-rect.top)/denom);scrollYProgress.set(progress);},[clamp01,scrollYProgress]);useEffect(()=>{if(isStatic)return;if(typeof window===\"undefined\")return;let rafId=0;const onScroll=()=>{if(rafId)return;rafId=window.requestAnimationFrame(()=>{rafId=0;updateScrollProgress();});};updateScrollProgress();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);return()=>{if(rafId)window.cancelAnimationFrame(rafId);window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);};},[isStatic,updateScrollProgress]);const effectiveScrollYProgress=isStatic?staticScrollYProgress:scrollYProgress;const words=useMemo(()=>{const trimmed=(text??\"\").trim();if(!trimmed)return[\"\"];return trimmed.split(/\\s+/);},[text]);const totalLetters=useMemo(()=>{const count=(text??\"\").replace(/\\s/g,\"\").length;return count||1;},[text]);// Remove fontSize from the font object to let responsive state handle it.\nconst fontWithoutSize=useMemo(()=>{const{fontSize:_ignoredFontSize,...rest}=font||{};return rest;},[font]);const alignItems=verticalAlign===\"top\"?\"flex-start\":verticalAlign===\"bottom\"?\"flex-end\":\"center\";return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",alignItems,justifyContent:\"flex-start\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"span\",{style:{display:\"block\",width:\"100%\",fontSize:currentFontSize,textAlign,...fontWithoutSize},children:words.map((word,wordIndex)=>{const lettersBefore=words.slice(0,wordIndex).join(\"\").length;return /*#__PURE__*/_jsx(Word,{word:word,scrollYProgress:effectiveScrollYProgress,lettersBefore:lettersBefore,totalLetters:totalLetters,startColor:startColor,endColor:endColor,isLastWord:wordIndex===words.length-1,isStatic:isStatic},`${word}-${wordIndex}`);})})});}function Word({word,scrollYProgress,lettersBefore,totalLetters,startColor,endColor,isLastWord,isStatic}){const letters=useMemo(()=>word.split(\"\"),[word]);return /*#__PURE__*/_jsxs(\"span\",{style:{display:\"inline\"},children:[letters.map((letter,index)=>{const absoluteIndex=lettersBefore+index;const start=absoluteIndex/totalLetters;const end=start+1/totalLetters;return /*#__PURE__*/_jsx(Letter,{letter:letter,scrollYProgress:scrollYProgress,start:start,end:end,startColor:startColor,endColor:endColor,isStatic:isStatic},`${letter}-${index}`);}),!isLastWord&&\" \"]});}function Letter({letter,scrollYProgress,start,end,startColor,endColor,isStatic}){const opacity=useTransform(scrollYProgress,[start,end],[.2,1]);const color=useTransform(scrollYProgress,[start,end],[startColor,endColor]);const staticStyle=isStatic?{opacity:1,color:endColor}:null;return /*#__PURE__*/_jsx(motion.span,{style:{...staticStyle||{},...isStatic?{}:{opacity,color},display:\"inline-block\"},children:letter});}addPropertyControls(ScrollColorChangeText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Scroll to see the magic\",displayTextArea:true},textAlign:{type:ControlType.Enum,title:\"Text Align\",options:[\"left\",\"center\",\"right\",\"justify\"],optionTitles:[\"Left\",\"Center\",\"Right\",\"Justify\"],defaultValue:\"left\",displaySegmentedControl:true},verticalAlign:{type:ControlType.Enum,title:\"Vertical Align\",options:[\"top\",\"center\",\"bottom\"],optionTitles:[\"Top\",\"Center\",\"Bottom\"],defaultValue:\"top\",displaySegmentedControl:true},startColor:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#CCCCCC\"},endColor:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{variant:\"Bold\",fontSize:\"40px\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},fontSizeDesktop:{type:ControlType.Number,title:\"Desktop Size\",defaultValue:40,min:12,max:200,step:1,unit:\"px\"},fontSizeTablet:{type:ControlType.Number,title:\"Tablet Size\",defaultValue:32,min:12,max:200,step:1,unit:\"px\"},fontSizeMobile:{type:ControlType.Number,title:\"Mobile Size\",defaultValue:24,min:12,max:200,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollColorChangeText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"140\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorChangeText.map"],"mappings":"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"}