Typewriter

Types out text character-by-character with optional phrase cycling and pulsing cursor. Full copy stays in the DOM for SEO.

npx @kznlabs/labsui add typewriter

Speed:36msPause:1800msCursor

Design for clean, precise details. accessible keyboard navigation. delightful micro-interactions. subtle physics-based springs.

import { Typewriter } from "@/components/ui/typewriter";export function Headline() {  return (    <h2>      Built for{" "}      <Typewriter        text={[          "clean details.",          "accessible navigation.",          "delightful springs.",        ]}        speed={40}      />    </h2>  );}

<Typewriter>

Typewriter effect for headers, quotes, and hero text. Full text stays in the DOM for SEO.

text*
string | readonly string[]
Text to type, or an array of phrases to cycle through.
cursordefault true
boolean
Whether to show a blinking cursor (default: true).
cursorChardefault "|"
string
Custom character for the cursor (default: "|").
cursorClassName
string
Classes for the blinking cursor.
delaydefault 0
number
Milliseconds to wait before starting typing (default: 0).
deleteSpeeddefault 24
number
Milliseconds per character while deleting (default: 24).
loopdefault true
boolean
Whether to loop through phrases when text is an array (default: true).
onComplete
() => void
Called when the text is fully typed.
pauseDurationdefault 2000
number
Milliseconds to pause once a phrase is fully typed (default: 2000).
speeddefault 40
number
Milliseconds per character while typing (default: 40).

Prop	Type	Default
`text*` Text to type, or an array of phrases to cycle through.	`string \| readonly string[]`	—
`cursor` Whether to show a blinking cursor (default: true).	`boolean`	`true`
`cursorChar` Custom character for the cursor (default: "\|").	`string`	`"\|"`
`cursorClassName` Classes for the blinking cursor.	`string`	—
`delay` Milliseconds to wait before starting typing (default: 0).	`number`	`0`
`deleteSpeed` Milliseconds per character while deleting (default: 24).	`number`	`24`
`loop` Whether to loop through phrases when text is an array (default: true).	`boolean`	`true`
`onComplete` Called when the text is fully typed.	`() => void`	—
`pauseDuration` Milliseconds to pause once a phrase is fully typed (default: 2000).	`number`	`2000`
`speed` Milliseconds per character while typing (default: 40).	`number`	`40`

* required. Every component also takes className.