Components
Animated text that reveals character by character with a typewriter effect, with configurable speed, optional looping, and reduced-motion support.
Loading preview...
import TypewriterText from "@/components/ui/typewriter-text";
export default function TypewriterTextDemo() {
return (
<div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-16 text-center">
<TypewriterText
className="text-3xl font-semibold tracking-tight text-foreground"
speed={80}
loop
>
Welcome to SmoothUI
</TypewriterText>
<TypewriterText
className="max-w-md text-lg text-muted-foreground"
speed={40}
loop
>
This text loops so you can preview the typewriter effect.
</TypewriterText>
</div>
);
}