Overview
Establish a caret, type in short word-shaped bursts, pause before punctuation, then hold the sentence. Erase more quickly than the typing and return to the empty caret.
Build
- 01
Reserve a fixed monospace line width so the layout does not shift.
- 02
Let the caret wait for 600ms before the first character.
- 03
Use 80ms character intervals within words, with longer gaps between words and before punctuation.
- 04
Move the caret exactly one character with every reveal. Hold the complete sentence from 2.3s to 4.2s.
- 05
Erase in 13 steps over 500ms and rest on the initial caret until 5s.
Example source React / TSX
examples/typewriter.tsx · Uses the catalog’s shared composition helpers.
Loading source…