{"version":3,"file":"TypeText.DBDvhrFQ.mjs","names":["React.useRef","React.useState","React.useId"],"sources":["https:/framerusercontent.com/modules/u5OtCkDeeLTNiSlnhrGE/FsBQPaBELkkgOcQ92VaV/TypeText.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";// Type Text. One line of text that types itself out once, when it scrolls into view.\n// Optional: fill Search 2–4 and it erases and types the next one after a pause,\n// for a set number of rounds, ending back on the first line. Pauses while off screen.\n// CSS does the letter-by-letter reveal (stepped clip); JS only switches lines on a timer.\n// The canvas and reduced motion show the first line, finished.\n/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function TypeText(props){const{text,text2,text3,text4,rounds,hold,font,color,caretColor,delay,speed,blinks,style}=props;const ref=React.useRef(null);const lines=[text,text2,text3,text4].filter(t=>typeof t===\"string\"&&t.trim()!==\"\");if(lines.length===0)lines.push(\"\");const linesKey=lines.join(\"\\n\");const[view,setView]=React.useState({mode:\"done\",i:0,first:true,final:true,k:0});const uid=\"tt\"+React.useId().replace(/[^a-zA-Z0-9]/g,\"\");React.useEffect(()=>{if(RenderTarget.current()===RenderTarget.canvas)return;if(typeof window===\"undefined\"||!(\"IntersectionObserver\"in window))return;if(window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;const el=ref.current;if(!el)return;const total=lines.length>1?Math.max(0,Math.round(rounds))*lines.length:0;const ms=s=>Array.from(s).length*speed;let visible=false;let started=false;let cancelled=false;let timer=0;let pending=null;let step=0;let i=0;let k=0;const wait=(delayMs,fn)=>{timer=window.setTimeout(()=>{if(cancelled)return;if(visible)fn();else pending=fn;},delayMs);};const erase=()=>{setView({mode:\"erase\",i,first:false,final:false,k:++k});wait(ms(lines[i])*.45+80,()=>{step++;i=(i+1)%lines.length;const final=step>=total;setView({mode:\"type\",i,first:false,final,k:++k});if(!final)wait(150+ms(lines[i])+hold*1e3,erase);});};setView({mode:\"armed\",i:0,first:true,final:total===0,k:++k});const io=new IntersectionObserver(entries=>{const e=entries[entries.length-1];visible=e.isIntersecting;if(!started&&e.intersectionRatio>=.6){started=true;setView({mode:\"type\",i:0,first:true,final:total===0,k:++k});if(total>0)wait(delay*1e3+ms(lines[0])+hold*1e3,erase);}else if(visible&&pending){const fn=pending;pending=null;fn();}},{threshold:[0,.6]});io.observe(el);return()=>{cancelled=true;window.clearTimeout(timer);io.disconnect();};},[linesKey,rounds,hold,delay,speed]);const line=lines[view.i]??lines[0];const chars=Math.max(1,Array.from(line).length);const typeDur=chars*speed/1e3;const eraseDur=typeDur*.45;const start=view.first?delay:.15;const blinkCount=view.final?blinks:\"infinite\";const css=`\n.${uid} .tt-c { display: none; position: absolute; top: 12%; bottom: 12%; width: 1.5px; border-radius: 1px; background: ${caretColor}; }\n.${uid}[data-mode=\"armed\"] .tt-t { clip-path: inset(0 100% 0 0); }\n.${uid}[data-mode=\"armed\"] .tt-c { display: block; left: 0; }\n.${uid}[data-mode=\"type\"] .tt-t { animation: ${uid}-type ${typeDur}s steps(${chars}, end) ${start}s both; }\n.${uid}[data-mode=\"type\"] .tt-c { display: block; animation: ${uid}-move ${typeDur}s steps(${chars}, end) ${start}s both, ${uid}-blink 0.9s linear ${start+typeDur}s ${blinkCount} forwards; }\n.${uid}[data-mode=\"erase\"] .tt-t { animation: ${uid}-type ${eraseDur}s steps(${chars}, end) reverse both; }\n.${uid}[data-mode=\"erase\"] .tt-c { display: block; animation: ${uid}-move ${eraseDur}s steps(${chars}, end) reverse both; }\n@keyframes ${uid}-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }\n@keyframes ${uid}-move { from { left: 0; } to { left: calc(100% - 2px); } }\n@keyframes ${uid}-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n`;return /*#__PURE__*/_jsxs(\"div\",{ref:ref,className:uid,\"data-mode\":view.mode,style:{...style,width:\"100%\",overflow:\"hidden\",whiteSpace:\"nowrap\",color,...font},children:[/*#__PURE__*/_jsxs(\"span\",{style:{position:\"relative\",display:\"inline-block\",paddingRight:2},children:[/*#__PURE__*/_jsx(\"span\",{className:\"tt-t\",children:line}),/*#__PURE__*/_jsx(\"span\",{className:\"tt-c\",\"aria-hidden\":\"true\"})]},view.k),/*#__PURE__*/_jsx(\"style\",{children:css})]});}TypeText.defaultProps={text:\"best GTM tool for startups\",text2:\"\",text3:\"\",text4:\"\",rounds:3,hold:4.5,color:\"#F4F5F7\",caretColor:\"#8AB4F8\",delay:.6,speed:28,blinks:2};addPropertyControls(TypeText,{text:{type:ControlType.String,title:\"Search 1\"},text2:{type:ControlType.String,title:\"Search 2\",placeholder:\"Optional: rotates after Search 1\"},text3:{type:ControlType.String,title:\"Search 3\",placeholder:\"Optional\"},text4:{type:ControlType.String,title:\"Search 4\",placeholder:\"Optional\"},rounds:{type:ControlType.Number,title:\"Rounds\",min:0,max:10,step:1,displayStepper:true,description:\"Times it cycles through the searches, then stops on Search 1.\"},hold:{type:ControlType.Number,title:\"Hold\",min:1,max:15,step:.5,unit:\"s\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:15,lineHeight:\"1.3em\"}},color:{type:ControlType.Color,title:\"Color\"},caretColor:{type:ControlType.Color,title:\"Caret\"},delay:{type:ControlType.Number,title:\"Delay\",min:0,max:5,step:.1,unit:\"s\"},speed:{type:ControlType.Number,title:\"Per Letter\",min:10,max:150,step:2,unit:\"ms\"},blinks:{type:ControlType.Number,title:\"Caret Blinks\",min:0,max:6,step:1,displayStepper:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TypeText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TypeText.map"],"mappings":"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"}