{"version":3,"file":"ScrollTextReveal.BlErRDPf.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/TXuLcfdCKvoqtPU53fVK/E8YD2y1ug7G04B3mOpuI/ScrollTextReveal.js"],"sourcesContent":["// Smooth scroll-activated text animation component that reveals words by transitioning from low to full opacity.\n// Each paragraph comes into view and stops until the full paragraph is revealed.\n// Then it proceeds to the next paragraph which comes into view from underneath.\n// Include layout, font and colour customization.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useScroll,useTransform}from\"framer-motion\";/**\n * Scroll Text Reveal\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 2000\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ScrollTextReveal(props){const{paragraphs=[{text:\"The future of design is here. Every pixel matters in creating experiences that resonate.\"},{text:\"We build with intention. Each element serves a purpose, each interaction tells a story.\"},{text:\"Innovation drives us forward. Technology enables us to push boundaries and explore new possibilities.\"}],textColor=\"#0A0A0A\",font,spacing=120,wordSpacing=8,minOpacity=.15,responsiveScaling=true,stackingSpeed=.3,revealSpeed=.5}=props;const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const[viewportWidth,setViewportWidth]=useState(typeof window!==\"undefined\"?window.innerWidth:1200);useEffect(()=>{if(typeof window===\"undefined\"||!responsiveScaling)return;const handleResize=()=>{startTransition(()=>{setViewportWidth(window.innerWidth);});};window.addEventListener(\"resize\",handleResize);return()=>window.removeEventListener(\"resize\",handleResize);},[responsiveScaling]);// Calculate responsive values\nconst getResponsiveValue=(baseValue,type)=>{if(!responsiveScaling)return baseValue;const isMobile=viewportWidth<768;const isTablet=viewportWidth>=768&&viewportWidth<1024;if(type===\"spacing\"){if(isMobile)return baseValue*.5;if(isTablet)return baseValue*.7;return baseValue;}if(type===\"font\"){if(isMobile)return baseValue*.5;if(isTablet)return baseValue*.75;return baseValue;}return baseValue;};const getResponsivePadding=()=>{if(!responsiveScaling)return\"160px 0px 210px 0px\";const isMobile=viewportWidth<768;const isTablet=viewportWidth>=768&&viewportWidth<1024;if(isMobile)return\"160px 0px 210px 0px\";if(isTablet)return\"160px 0px 210px 0px\";return\"160px 0px 210px 0px\";};const responsiveSpacing=getResponsiveValue(spacing,\"spacing\");const responsiveWordSpacing=getResponsiveValue(wordSpacing,\"spacing\");const responsivePadding=getResponsivePadding();const fontSizeMultiplier=responsiveScaling?viewportWidth<768?.5:viewportWidth<1024?.75:1:1;const{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});return /*#__PURE__*/_jsx(motion.div,{ref:containerRef,style:{width:\"100%\",height:\"100%\",padding:responsivePadding,position:\"sticky\",top:120,overflow:\"hidden\"},children:paragraphs.map((paragraph,pIndex)=>/*#__PURE__*/_jsx(ParagraphReveal,{text:paragraph.text,paragraphIndex:pIndex,totalParagraphs:paragraphs.length,scrollProgress:scrollYProgress,textColor:textColor,font:font,spacing:responsiveSpacing,wordSpacing:responsiveWordSpacing,minOpacity:minOpacity,isStatic:isStatic,fontSizeMultiplier:fontSizeMultiplier,stackingSpeed:stackingSpeed,revealSpeed:revealSpeed},pIndex))});}function ParagraphReveal({text,paragraphIndex,totalParagraphs,scrollProgress,textColor,font,spacing,wordSpacing,minOpacity,isStatic,fontSizeMultiplier,stackingSpeed,revealSpeed}){const words=text.split(\" \");// Calculate progress for this paragraph - each paragraph gets equal scroll range\nconst startProgress=paragraphIndex/totalParagraphs;const endProgress=(paragraphIndex+1)/totalParagraphs;const paragraphProgress=useTransform(scrollProgress,[startProgress,endProgress],[0,1]);// Transform for vertical position - paragraph stops and stacks when fully revealed\nconst y=useTransform(paragraphProgress,[0,stackingSpeed,1],[200,0,0]);// Apply responsive font size\nconst responsiveFont={...font,fontSize:font.fontSize?typeof font.fontSize===\"string\"?`calc(${font.fontSize} * ${fontSizeMultiplier})`:font.fontSize*fontSizeMultiplier:undefined};return /*#__PURE__*/_jsx(motion.div,{style:{marginBottom:spacing,display:\"flex\",flexWrap:\"wrap\",gap:wordSpacing,y:isStatic?0:y,position:\"sticky\",top:paragraphIndex*60},transition:{type:\"spring\",stiffness:100,damping:30,mass:1},children:words.map((word,wIndex)=>{const wordStart=wIndex/words.length;const wordEnd=(wIndex+1)/words.length;const wordMid=wordStart+(wordEnd-wordStart)*revealSpeed;// Always call useTransform to avoid conditional hook calls\nconst opacity=useTransform(paragraphProgress,[wordStart,wordMid],[minOpacity,1]);return /*#__PURE__*/_jsx(motion.span,{style:{...responsiveFont,color:textColor,opacity:isStatic?1:opacity,display:\"inline-block\"},transition:{opacity:{type:\"spring\",stiffness:120,damping:25}},children:word},wIndex);})});}addPropertyControls(ScrollTextReveal,{paragraphs:{type:ControlType.Array,title:\"Paragraphs\",control:{type:ControlType.Object,controls:{text:{type:ControlType.String,title:\"Text\",displayTextArea:true,defaultValue:\"Your paragraph text here.\"}}},defaultValue:[{text:\"The future of design is here. Every pixel matters in creating experiences that resonate.\"},{text:\"We build with intention. Each element serves a purpose, each interaction tells a story.\"},{text:\"Innovation drives us forward. Technology enables us to push boundaries and explore new possibilities.\"}]},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#0A0A0A\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},spacing:{type:ControlType.Number,title:\"Paragraph Spacing\",defaultValue:60,min:0,max:300,step:10,unit:\"px\"},wordSpacing:{type:ControlType.Number,title:\"Word Spacing\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},minOpacity:{type:ControlType.Number,title:\"Min Opacity\",defaultValue:.15,min:0,max:1,step:.05},responsiveScaling:{type:ControlType.Boolean,title:\"Responsive Scaling\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},stackingSpeed:{type:ControlType.Number,title:\"Stacking Speed\",defaultValue:.3,min:.1,max:.9,step:.1},revealSpeed:{type:ControlType.Number,title:\"Reveal Speed\",defaultValue:.5,min:.1,max:1,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollTextReveal\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"2000\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"800\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollTextReveal.map"],"mappings":"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"}