[ [UI.78] Components ] Typewriter

Typewriter

> Animated typewriter effect that triggers on scroll into view.

Import

[ [0x5B] IMPORT ]

1import { TypeWriter } from "@/components/ui/typewriter"

Preview

[ [0x00] TYPEWRITER ]

█

1<TypeWriter text="INITIALIZING SYSTEM..." showCursor />

Variants

[ [0x00] BASIC ]

1<TypeWriter text="Hello, terminal world!" />

[ [0x00] WITH CURSOR ]

█

1<TypeWriter text="Typing with cursor..." showCursor />

[ [0x00] PERSISTENT CURSOR ]

█

1<TypeWriter text="READY_" showCursor cursorAtEnd />

[ [0x00] DELAYED START ]

█

1<TypeWriter text="Delayed message..." delay={1} showCursor />

[ [0x00] CUSTOM SPEED ]

█

1<TypeWriter text="Slow and steady..." speed={60} showCursor />

API Reference

[ [0x00] API REFERENCE ]

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.

Accessibility

[ [0x58] A11Y ]

Uses Intersection Observer for scroll-triggered animation
Animation only runs once (once: true) to avoid repeated triggers
Cursor uses aria-hidden implicitly (decorative)
Text content is accessible immediately in DOM
Respects prefers-reduced-motion via Framer Motion defaults

Scroll Trigger

[ [0x83] HOW_IT_WORKS ]

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

Usage Examples

[ [0x79] HERO_HEADLINE ]

<h1 className="text-4xl font-mono">
  <TypeWriter
    text="BUILDING YOUR SAAS JUST GOT UNFAIRLY EASY"
    showCursor
    cursorAtEnd
  />
</h1>

[ [0xCC] STAGGERED_LINES ]

<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>