Typography

Masked Word Stagger

Loading…
Motif4.8s typicallandscape · portrait · square

Overview

A short baseline cue prepares the reveal. Words lift through fixed masks in two phrase-level beats, settle with a restrained overshoot, hold for reading, then leave in a quicker stagger.

Build

  1. 01

    Typeset the final phrase with fixed line breaks and descender clearance.

  2. 02

    Draw the baseline cue during the first 384ms.

  3. 03

    Start the four word lifts at 400, 520, 850, and 1040ms. The longer gap separates the two phrase groups.

  4. 04

    Give each lift 700ms: move quickly, overshoot the baseline by 3%, then settle.

  5. 05

    Hold the complete phrase until 3.5s. Exit each word over 400ms with 60ms offsets, leaving a quiet loop gap.

Example source React / TSX

examples/word-stagger-reveal.tsx · Uses the catalog’s shared composition helpers.

Loading source…