Typography

Typewriter

Loading…
Motif5s typicallandscape · portrait · square

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

  1. 01

    Reserve a fixed monospace line width so the layout does not shift.

  2. 02

    Let the caret wait for 600ms before the first character.

  3. 03

    Use 80ms character intervals within words, with longer gaps between words and before punctuation.

  4. 04

    Move the caret exactly one character with every reveal. Hold the complete sentence from 2.3s to 4.2s.

  5. 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…