Loading...
Loading...
> Animated typewriter effect that triggers on scroll into view.
1import { TypeWriter } from "@/components/ui/typewriter"
1<TypeWriter text="INITIALIZING SYSTEM..." showCursor />
1<TypeWriter text="Hello, terminal world!" />
1<TypeWriter text="Typing with cursor..." showCursor />
1<TypeWriter text="READY_" showCursor cursorAtEnd />
1<TypeWriter text="Delayed message..." delay={1} showCursor />
1<TypeWriter text="Slow and steady..." speed={60} showCursor />
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The text to animate character by character. |
| delay | number | 0 | Delay in seconds before typing starts. |
| speed | number | 30 | Milliseconds between each character. |
| showCursor | boolean | false | Show animated blinking cursor. |
| cursorAtEnd | boolean | false | Keep cursor visible after typing completes. |
The TypeWriter uses Framer Motion's useInView hook to detect when the element enters the viewport. Animation triggers once and does not repeat.
const isInView = useInView(ref, { once: true });
// Animation starts when element scrolls into view
// Delay is applied AFTER element becomes visible<h1 className="text-4xl font-mono">
<TypeWriter
text="BUILDING YOUR SAAS JUST GOT UNFAIRLY EASY"
showCursor
cursorAtEnd
/>
</h1><div className="space-y-2">
<TypeWriter text="[INIT] System starting..." delay={0} />
<TypeWriter text="[LOAD] Loading modules..." delay={0.5} />
<TypeWriter text="[DONE] Ready." delay={1} showCursor cursorAtEnd />
</div>