{"version":3,"file":"TextReveal_1.DheDC90G.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/3to0aV01SeBd3mf1tjaT/ZvpcW9MPNkxA7SYeHBA0/TextReveal_1.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * TextReveal - Text that reveals as you scroll with responsive font sizing\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function TextReveal(props){const{text=\"This text unblurs and fades in word by word as you scroll\",baseColor=\"#888888\",revealColor=\"#000000\",font={fontSize:24,lineHeight:1.5,letterSpacing:\"0em\",variant:\"Regular\",textAlign:\"left\"},fullRevealDistance=1e3,initialBlur=3,tag=\"p\",fitText=false,minFontSize=16,maxFontSize=72,style={}}=props;const outerRef=useRef(null);const containerRef=useRef(null);const animationFrameRef=useRef(null);const words=(text||\"\").split(\" \");const[scrollProgress,setScrollProgress]=useState(0);const[fontSize,setFontSize]=useState(font?.fontSize||24);const isCanvas=RenderTarget.current()===RenderTarget.canvas;// Effect for responsive font sizing (also run in canvas)\nuseEffect(()=>{if(!fitText)return;const handleResize=()=>{if(!containerRef.current||typeof window===\"undefined\")return;// Get container width (prefer container, fallback to viewport)\nconst containerWidth=containerRef.current.offsetWidth||window.innerWidth;const baseFontSize=parseInt(font?.fontSize)||24;// Use a base width of 1000px as reference\nconst baseWidth=1e3;// Calculate proportional font size\nconst scaledFontSize=baseFontSize*(containerWidth/baseWidth);// Clamp between min and max font sizes\nconst clampedSize=Math.max(minFontSize,Math.min(maxFontSize,scaledFontSize));setFontSize(clampedSize);};handleResize();window.addEventListener(\"resize\",handleResize);return()=>{window.removeEventListener(\"resize\",handleResize);};},[fitText,font?.fontSize,minFontSize,maxFontSize]);// Effect for scroll tracking\nuseEffect(()=>{if(isCanvas)return;let startPosition=0;let containerHeight=0;let endPosition=0;const updateScrollPositions=()=>{if(outerRef.current){const rect=outerRef.current.getBoundingClientRect();startPosition=window.scrollY+rect.top;containerHeight=rect.height;endPosition=startPosition+fullRevealDistance;}};const handleScroll=()=>{if(!outerRef.current)return;const currentScroll=window.scrollY;const elementTop=startPosition-currentScroll;const visibleHeight=window.innerHeight-elementTop;const progress=(visibleHeight-containerHeight)/(fullRevealDistance-containerHeight);setScrollProgress(Math.max(0,Math.min(1,progress)));};const trackScroll=()=>{handleScroll();animationFrameRef.current=requestAnimationFrame(trackScroll);};const initializeScrollTracking=()=>{updateScrollPositions();handleScroll();animationFrameRef.current=requestAnimationFrame(trackScroll);};window.addEventListener(\"resize\",updateScrollPositions);initializeScrollTracking();return()=>{cancelAnimationFrame(animationFrameRef.current);window.removeEventListener(\"resize\",updateScrollPositions);};},[fullRevealDistance,isCanvas]);// Effect for responsive font sizing\nuseEffect(()=>{if(!fitText||isCanvas)return;const handleResize=()=>{if(!containerRef.current||typeof window===\"undefined\")return;// Get container width (prefer container, fallback to viewport)\nconst containerWidth=containerRef.current.offsetWidth||window.innerWidth;const baseFontSize=parseInt(font?.fontSize)||24;// Use a base width of 1000px as reference\nconst baseWidth=1e3;// Calculate proportional font size\nconst scaledFontSize=baseFontSize*(containerWidth/baseWidth);// Clamp between min and max font sizes\nconst clampedSize=Math.max(minFontSize,Math.min(maxFontSize,scaledFontSize));setFontSize(clampedSize);};handleResize();window.addEventListener(\"resize\",handleResize);return()=>{window.removeEventListener(\"resize\",handleResize);};},[fitText,font?.fontSize,minFontSize,maxFontSize,isCanvas]);const Tag=tag;return /*#__PURE__*/_jsx(\"div\",{ref:outerRef,style:{minWidth:5,minHeight:5,width:style.width||100,// Remove fixed height, let height fit content\ndisplay:\"flex\",alignItems:\"flex-start\",justifyContent:\"flex-start\",...style},children:/*#__PURE__*/_jsx(Tag,{ref:containerRef,style:{position:\"sticky\",top:0,fontFamily:font?.fontFamily,fontWeight:font?.fontWeight,fontSize:fitText?`${fontSize}px`:font?.fontSize,lineHeight:font?.lineHeight,letterSpacing:font?.letterSpacing,textAlign:font?.textAlign,margin:0,padding:0,width:\"100%\",minWidth:5,minHeight:5},children:words.map((word,index)=>{const wordProgress=isCanvas?1:scrollProgress*words.length-index;const progress=Math.max(0,Math.min(1,wordProgress));const blurAmount=initialBlur*(1-progress);const color=progress===1?revealColor:baseColor;return /*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",marginRight:\"0.25em\",filter:`blur(${blurAmount}px)`,color:color,transition:\"filter 0.2s ease-out, color 0.2s ease-out\"},children:word},index);})})});}addPropertyControls(TextReveal,{text:{type:ControlType.String,title:\"Text\",displayTextArea:true},baseColor:{type:ControlType.Color,title:\"Base Color\",defaultValue:\"#888888\"},revealColor:{type:ControlType.Color,title:\"Reveal Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:24,lineHeight:1.5,letterSpacing:\"0em\",variant:\"Regular\",textAlign:\"left\"}},fullRevealDistance:{type:ControlType.Number,title:\"Full Reveal Distance\",min:100,max:5e3,step:10,defaultValue:1e3},initialBlur:{type:ControlType.Number,title:\"Initial Blur\",min:0,max:10,step:.5,defaultValue:3},tag:{type:ControlType.Enum,title:\"Tag\",options:[\"p\",\"h1\",\"h2\",\"h3\"],optionTitles:[\"P\",\"H1\",\"H2\",\"H3\"],defaultValue:\"p\",displaySegmentedControl:true},fitText:{type:ControlType.Boolean,title:\"Responsive Text\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"Scale font size based on screen width\"},minFontSize:{type:ControlType.Number,title:\"Min Font Size\",defaultValue:16,min:8,max:48,step:1,unit:\"px\",hidden:({fitText})=>!fitText},maxFontSize:{type:ControlType.Number,title:\"Max Font Size\",defaultValue:72,min:24,max:200,step:1,unit:\"px\",hidden:({fitText})=>!fitText}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextReveal\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextReveal_1.map"],"mappings":"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"}