Components
Character-by-character typewriter text animation with a blinking cursor, optional deleting, looping across phrases, and semantic heading support.
Loading preview...
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
export default function TypewriterEffectDemo() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
<h2 className="max-w-2xl text-center text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
Ship delightful interfaces with{" "}
<TypewriterEffect
text={["Nexus-UI", "React", "Framer Motion", "Tailwind CSS"]}
loop
className="text-primary"
/>
</h2>
</div>
);
}