Headline Word Rise
Each word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
import type { Variants } from "motion/react";
/**
* Vibary · Headline Word Rise
*
* A headline sets itself a word at a time. Each word is clipped to the
* line it belongs to and travels up out of that clip, so the wordsAbout this pattern
The entrance a landing section, a welcome screen or a report header gets exactly once, and the reason to build it out of clips rather than fades is that a fade has no origin. A word that simply appears could have come from anywhere; a word that rises out of the line it belongs to came from the typography, and the line looks set rather than collected. Each word is boxed in its own overflow-hidden clip — opened a sixth of an em at the bottom, because a clip cut to the baseline shaves the tail off every g and y in the sentence — and travels up into it on an eased tween. Never a spring: a headline that springs past its own baseline and settles back reads as a typo being corrected. The split is decorative, so the container carries the whole sentence as its label and the word spans are hidden from the accessibility tree, which is the difference between a screen reader reading a headline and reading a list of words. The quiet line underneath waits for the last word rather than racing it, so the eye travels down once.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
The welcome headline sets itself a word at a time before the first step is offered.
- Analytics view
The report title lands word by word as the page scrolls in, ahead of its tiles.
Related patterns
- Lazy Section RevealA below-the-fold section fades and lifts the first time it comes into view, and never again after that.
- Text Focus PullWords hold their final position and only lose their blur, so a paragraph resolves without a single line of copy moving.
- Carousel Preload SlideThe upcoming frame resolves from placeholder to artwork a beat before the track moves to it.