{"version":3,"file":"TextAppearFill.CIrtSSIB.mjs","names":["useRef","useState","useCallback","useMemo"],"sources":["https:/framerusercontent.com/modules/9HAqUNamO6aYVSUgjSyv/l6aJA6SjIqrkoAoDueUE/TextAppearFill.js"],"sourcesContent":["// User request: text appears with a grey background, and on scroll the words fill with white colour. Expose properties for colors, scroll controls, timing, delay.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useMemo,useRef,useState,startTransition}from\"react\";function clamp01(n){return Math.max(0,Math.min(1,n));}function ease(t,timing){const x=clamp01(t);switch(timing){case\"linear\":return x;case\"easeIn\":return x*x;case\"easeOut\":return 1-(1-x)*(1-x);case\"easeInOut\":default:return x<.5?2*x*x:1-Math.pow(-2*x+2,2)/2;}}function lerp(a,b,t){return a+(b-a)*t;}/**\n * Text Appear Fill\n *\n * @framerIntrinsicWidth 520\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TextAppearFill(props){const{text,backgroundColor,filledColor,unfilledColor,font,padding,borderRadius,direction,startPoint,endPoint,delay,duration,timing,smoothing,initialProgress,style}=props;const isStatic=useIsStaticRenderer();const rootRef=useRef(null);const[progress,setProgress]=useState(clamp01(initialProgress));const lastProgressRef=useRef(clamp01(initialProgress));const rafRef=useRef(null);const computeRawProgress=useCallback(()=>{if(typeof window===\"undefined\")return clamp01(initialProgress);const el=rootRef.current;if(!el)return clamp01(initialProgress);const rect=el.getBoundingClientRect();const vh=window.innerHeight||1;// Start when element TOP reaches startPoint% of viewport height.\n// End when element BOTTOM reaches endPoint% of viewport height.\nconst startPx=vh*clamp01(startPoint);const endPx=vh*clamp01(endPoint);// raw = 0 when rect.top === startPx\n// raw = 1 when rect.bottom === endPx\nconst denom=startPx-endPx+rect.height;const raw=denom===0?1:(startPx-rect.top)/denom;return clamp01(raw);},[endPoint,initialProgress,startPoint]);const update=useCallback(()=>{rafRef.current=null;const raw=computeRawProgress();const normalized=clamp01((raw-clamp01(delay))/Math.max(1e-4,clamp01(duration)));const eased=ease(normalized,timing);// Lightweight smoothing (EMA)\nconst alpha=clamp01(smoothing);const next=alpha>0?lerp(lastProgressRef.current,eased,1-alpha):eased;// Avoid excessive updates\nif(Math.abs(next-lastProgressRef.current)>.002){lastProgressRef.current=next;startTransition(()=>setProgress(next));}},[computeRawProgress,delay,duration,smoothing,timing]);const scheduleUpdate=useCallback(()=>{if(rafRef.current!=null)return;if(typeof window===\"undefined\")return;rafRef.current=window.requestAnimationFrame(update);},[update]);useEffect(()=>{if(isStatic){// In Canvas/Export, keep it deterministic.\nstartTransition(()=>setProgress(clamp01(initialProgress)));return;}if(typeof window===\"undefined\")return;// Initial computation\nscheduleUpdate();window.addEventListener(\"scroll\",scheduleUpdate,{passive:true});window.addEventListener(\"resize\",scheduleUpdate);return()=>{window.removeEventListener(\"scroll\",scheduleUpdate);window.removeEventListener(\"resize\",scheduleUpdate);if(rafRef.current!=null){window.cancelAnimationFrame(rafRef.current);rafRef.current=null;}};},[initialProgress,isStatic,scheduleUpdate]);const fillPercent=useMemo(()=>{const p=clamp01(progress)*100;return direction===\"leftToRight\"?p:100-p;},[direction,progress]);const textStyle=useMemo(()=>{// Gradient text fill using background-clip.\n// For rightToLeft we invert the gradient direction.\nconst gradientDir=direction===\"leftToRight\"?\"to right\":\"to left\";// Extend filled color slightly beyond 100% to ensure complete coverage\nconst fillStop1=Math.min(fillPercent,100);const fillStop2=fillPercent>=100?100.1:fillPercent;const gradient=`linear-gradient(${gradientDir}, ${filledColor} 0%, ${filledColor} ${fillStop1}%, ${unfilledColor} ${fillStop2}%, ${unfilledColor} 100%)`;return{...font,display:\"inline\",backgroundImage:gradient,backgroundSize:\"100% 100%\",backgroundRepeat:\"no-repeat\",WebkitBackgroundClip:\"text\",backgroundClip:\"text\",color:\"transparent\",WebkitTextFillColor:\"transparent\",whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"};},[direction,fillPercent,filledColor,font,unfilledColor]);const isFixedWidth=style&&style.width===\"100%\";const isFixedHeight=style&&style.height===\"100%\";return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",padding,borderRadius,background:backgroundColor,overflow:\"hidden\",boxSizing:\"border-box\",...isFixedWidth?{}:{minWidth:\"max-content\"},...isFixedHeight?{}:{minHeight:\"max-content\"},...style},\"aria-label\":text,children:/*#__PURE__*/_jsx(\"span\",{style:{width:\"100%\",textAlign:font&&font.textAlign||\"center\"},children:/*#__PURE__*/_jsx(\"span\",{style:textStyle,children:text})})});}addPropertyControls(TextAppearFill,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Scroll to fill this text.\",displayTextArea:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#F5F5F5\"},unfilledColor:{type:ControlType.Color,title:\"Unfilled\",defaultValue:\"#CCCCCC\"},filledColor:{type:ControlType.Color,title:\"Filled\",defaultValue:\"#FFFFFF\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\",textAlign:\"center\"}},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"16px\"},borderRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"12px\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"leftToRight\",\"rightToLeft\"],optionTitles:[\"Left → Right\",\"Right → Left\"],defaultValue:\"leftToRight\",displaySegmentedControl:true},startPoint:{type:ControlType.Number,title:\"Start\",defaultValue:.85,min:0,max:1,step:.01},endPoint:{type:ControlType.Number,title:\"End\",defaultValue:.25,min:0,max:1,step:.01},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:0,min:0,max:.95,step:.01},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1,min:.05,max:1,step:.01},timing:{type:ControlType.Enum,title:\"Timing\",options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\"],defaultValue:\"easeInOut\"},smoothing:{type:ControlType.Number,title:\"Smoothing\",defaultValue:.15,min:0,max:.9,step:.01},initialProgress:{type:ControlType.Number,title:\"Canvas %\",defaultValue:.4,min:0,max:1,step:.01}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextAppearFill\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"520\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"120\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextAppearFill.map"],"mappings":"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"}