{"version":3,"file":"FillText.DBTCtWc-.mjs","names":["useRef","useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/HexyyQRAbXUe1lWps6d7/ADLhO3pnMuSX588ktEDW/FillText.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useLayoutEffect}from\"react\";import{useTransform,useScroll}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";// Utility function to split text into words\nconst splitTextIntoWords=text=>{return text.split(/\\s+/).filter(word=>word.trim());};// Individual word component\nconst WordSegment=({children,index,total,baseColor,fillColor,containerRef,triggerMode,playOnce})=>{const ref=useRef(null);const[hasAnimated,setHasAnimated]=useState(false);// Calculate scroll progress for this word\nconst{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});// Calculate when this word should fill based on its position\nconst wordProgress=index/Math.max(total-1,1);// Trigger thresholds based on trigger mode\nconst getTriggerThreshold=mode=>{switch(mode){case\"early\":return[.1,.9];case\"normal\":return[.3,.7];case\"late\":return[.5,.9];default:return[.3,.7];}};const[startThreshold,endThreshold]=getTriggerThreshold(triggerMode);const wordStartPoint=startThreshold+wordProgress*(endThreshold-startThreshold);// Transform scroll progress to word fill state\nconst wordFillProgress=useTransform(scrollYProgress,[0,wordStartPoint,wordStartPoint+.1,1],[0,0,1,1]);const[shouldFill,setShouldFill]=useState(false);useEffect(()=>{const unsubscribe=wordFillProgress.on(\"change\",latest=>{const shouldBeFilled=latest>.5;if(playOnce){if(shouldBeFilled&&!hasAnimated){setShouldFill(true);setHasAnimated(true);}}else{setShouldFill(shouldBeFilled);}});return unsubscribe;},[wordFillProgress,playOnce,hasAnimated]);const wordStyle={color:shouldFill?fillColor:baseColor,transition:\"color 0.3s ease-out\",display:\"inline\"};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{ref:ref,style:wordStyle,children:children}),index<total-1&&\" \"]});};export default function FillText({text=\"Fill text as you scroll through this amazing component. It works with individual words filling one by one. Customize every aspect to match your design perfectly.\",baseColor=\"#94a3b8\",fillColor=\"#1e293b\",fontFamily=\"Inter, system-ui, -apple-system, sans-serif\",fontWeight=400,fontSize=32,lineHeight=1.4,letterSpacing=-.02,textAlign=\"left\",textTransform=\"none\",triggerMode=\"normal\",playOnce=false,userSelect=true,balanceLines=true,htmlTag=\"p\",opentypeFeatures=\"\",width=\"100%\",height=\"auto\"}){const containerRef=useRef(null);const textRef=useRef(null);const[textHeight,setTextHeight]=useState(undefined);// Measure text height for proper container sizing\nuseLayoutEffect(()=>{const textElement=textRef.current;if(!textElement)return;const measureHeight=()=>{setTextHeight(textElement.scrollHeight);};const resizeObserver=new ResizeObserver(measureHeight);resizeObserver.observe(textElement);measureHeight();return()=>resizeObserver.disconnect();},[text,fontSize,lineHeight,letterSpacing,fontFamily,fontWeight]);// Split text into words\nconst words=splitTextIntoWords(text);// Base text styles\nconst textStyles={fontFamily,fontWeight,fontSize:`${fontSize}px`,lineHeight,letterSpacing:`${letterSpacing}em`,textAlign,textTransform,userSelect:userSelect?\"text\":\"none\",textWrap:balanceLines?\"balance\":\"wrap\",fontFeatureSettings:opentypeFeatures||undefined,margin:0,padding:0,whiteSpace:\"pre-wrap\",overflow:\"visible\",display:\"block\"};// Create the appropriate HTML element\nconst createTextElement=()=>{const props={ref:textRef,style:textStyles};const content=words.map((word,index)=>/*#__PURE__*/_jsx(WordSegment,{index:index,total:words.length,baseColor:baseColor,fillColor:fillColor,containerRef:containerRef,triggerMode:triggerMode,playOnce:playOnce,children:word},`word-${index}`));switch(htmlTag){case\"h1\":return /*#__PURE__*/_jsx(\"h1\",{...props,children:content});case\"h2\":return /*#__PURE__*/_jsx(\"h2\",{...props,children:content});case\"h3\":return /*#__PURE__*/_jsx(\"h3\",{...props,children:content});case\"h4\":return /*#__PURE__*/_jsx(\"h4\",{...props,children:content});case\"h5\":return /*#__PURE__*/_jsx(\"h5\",{...props,children:content});case\"h6\":return /*#__PURE__*/_jsx(\"h6\",{...props,children:content});case\"p\":return /*#__PURE__*/_jsx(\"p\",{...props,children:content});case\"span\":return /*#__PURE__*/_jsx(\"span\",{...props,children:content});default:return /*#__PURE__*/_jsx(\"p\",{...props,children:content});}};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:typeof width===\"number\"?`${width}px`:width||\"100%\",height:textHeight!==undefined?`${textHeight+4}px`:typeof height===\"number\"?`${height}px`:height||\"auto\",overflow:\"visible\",minWidth:\"200px\"},children:createTextElement()});}// Framer property controls\naddPropertyControls(FillText,{text:{type:ControlType.String,title:\"Text\",displayTextArea:true,defaultValue:\"Fill text as you scroll through this amazing component. It works with individual words filling one by one. Customize every aspect to match your design perfectly.\"},baseColor:{type:ControlType.Color,title:\"Base Color\",defaultValue:\"#94a3b8\"},fillColor:{type:ControlType.Color,title:\"Fill Color\",defaultValue:\"#1e293b\"},fontFamily:{type:ControlType.Font,title:\"Font Family\",defaultValue:\"Inter, system-ui, -apple-system, sans-serif\"},fontWeight:{type:ControlType.Number,title:\"Font Weight\",min:100,max:900,step:100,defaultValue:400},fontSize:{type:ControlType.Number,title:\"Font Size\",min:8,max:200,step:1,unit:\"px\",defaultValue:32},lineHeight:{type:ControlType.Number,title:\"Line Height\",min:.5,max:3,step:.1,defaultValue:1.4},letterSpacing:{type:ControlType.Number,title:\"Letter Spacing\",min:-.1,max:.5,step:.01,unit:\"em\",defaultValue:-.02},textAlign:{type:ControlType.Enum,title:\"Text Align\",options:[\"left\",\"center\",\"right\",\"justify\"],optionTitles:[\"Left\",\"Center\",\"Right\",\"Justify\"],defaultValue:\"left\"},textTransform:{type:ControlType.Enum,title:\"Text Transform\",options:[\"none\",\"uppercase\",\"lowercase\",\"capitalize\"],optionTitles:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"},triggerMode:{type:ControlType.Enum,title:\"Trigger\",options:[\"early\",\"normal\",\"late\"],optionTitles:[\"Early\",\"Normal\",\"Late\"],defaultValue:\"normal\"},playOnce:{type:ControlType.Boolean,title:\"Play Once\",defaultValue:false},userSelect:{type:ControlType.Boolean,title:\"User Select\",defaultValue:true},balanceLines:{type:ControlType.Boolean,title:\"Balance Lines\",defaultValue:true},htmlTag:{type:ControlType.Enum,title:\"HTML Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"P\",\"Span\"],defaultValue:\"p\"},opentypeFeatures:{type:ControlType.String,title:\"OpenType Features\",placeholder:\"e.g., 'liga' 1, 'kern' 1\",defaultValue:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FillText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FillText.map"],"mappings":"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"}