All studies

Text

Cut reveal

Each word of a headline rises out of its own clipped mask, one after another, then the supporting line settles in.

14 / 74

Where it earns its place

The first line a visitor reads: a hero statement or a launch headline that should arrive with intent rather than fade in.

What we changed

  • Padded each word's mask by 0.14em and pulled it back with a negative margin, so descenders and the spring's overshoot are no longer clipped.
  • Cut the character, line and random split modes and the imperative ref API; one word-level split covers the real use.
  • Tuned the spring to just under critical damping and kept real spaces between masks so the headline still wraps naturally at any width.
  • Added reduced-motion handling (the text renders in place) and a replay control; the full sentence is exposed once to screen readers.
  • Kept the original's core idea: a per-word overflow cut with a staggered spring, not an opacity fade.