Typewriter Effect
Classic typewriter animation that types text character by character with a blinking cursor.
Preview
Typewriter Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero sections and terminal-style code demonstrations.
Why this component matters
The typewriter effect commands attention by revealing content at a controlled pace.
Usage guidance
Use for a single line of text. Best with monospace font for a terminal feel. Set typing speed to 50-80ms per character.
Installation
bash
npx shadcn@latest add @aceternity/typewriter-effectUsage
example.tsxtsx
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
export default function Example() {
return (
<TypewriterEffect>
{/* Your content here */}
</TypewriterEffect>
);
}Source
typewriter-effect.tsx
components/ui/typewriter-effect.tsx