{displayedText || text}

) } `,__src__:"registry/default/ui/typing-animation.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'~/lib/utils'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"duration"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"number"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimation"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"duration"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"200"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"displayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setDisplayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"''"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setI"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"typingEffect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" text."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"length"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setDisplayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(text."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"substring"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"))"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setI"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"else"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"clearInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(typingEffect)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, duration)"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"clearInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(typingEffect)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [duration, i])"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"h1"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {displayedText "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" text}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import { useEffect, useState } from 'react' import { ny } from '~/lib/utils' interface TypingAnimationProps { text: string duration?: number className?: string } export function TypingAnimation({ text, duration = 200, className, }: TypingAnimationProps) { const [displayedText, setDisplayedText] = useState('') const [i, setI] = useState(0) useEffect(() => { const typingEffect = setInterval(() => { if (i < text.length) { setDisplayedText(text.substring(0, i + 1)) setI(i + 1) } else { clearInterval(typingEffect) } }, duration) return () => { clearInterval(typingEffect) } }, [duration, i]) return (

{displayedText || text}

) } `,__src__:"registry/miami/ui/typing-animation.tsx",__style__:"miami",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'~/lib/utils'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"duration"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"number"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimation"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"duration"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"200"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"TypingAnimationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"displayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setDisplayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"''"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setI"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"typingEffect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" text."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"length"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setDisplayedText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(text."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"substring"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"))"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setI"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(i "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"else"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"clearInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(typingEffect)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, duration)"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"clearInterval"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(typingEffect)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [duration, i])"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"h1"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {displayedText "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" text}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"props",children:[(0,l.jsx)(n.a,{className:"anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Prop"}),(0,l.jsx)(n.th,{children:"Type"}),(0,l.jsx)(n.th,{children:"Description"}),(0,l.jsx)(n.th,{children:"Default"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"className"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:"The class name to be applied to the component"}),(0,l.jsx)(n.td,{})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"duration"}),(0,l.jsx)(n.td,{children:"number"}),(0,l.jsx)(n.td,{children:"Duration to wait in between each char type."}),(0,l.jsx)(n.td,{children:"200"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"text"}),(0,l.jsx)(n.td,{children:"string"}),(0,l.jsx)(n.td,{children:"Text to animate"}),(0,l.jsx)(n.td,{children:'""'})]})]})]})]})}function A(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(m,e)})):m(e)}var C=A;function r(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(v);})(); ;return Component;

Prop	Type	Description	Default
className	string	The class name to be applied to the component
duration	number	Duration to wait in between each char type.	200
text	string	Text to animate	""

Typing Animation

Typing Animation

Installation

Props