Welcome Hero Entrance
The first screen assembles in beats: the mark settles, then the headline, the supporting line, and finally the action.
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";
/**
* Vibary · Welcome Hero Entrance
*
* The first screen assembles itself in beats: the product mark settles,
* then the headline, then the supporting line, then the action. Nothing
* arrives at the same instant, so the eye is walked down the screen inAbout this pattern
The opening screen of a product, staged rather than dropped. The mark arrives first on a spring and is the only thing allowed to scale, because it is a shape; every line of copy after it rises a few pixels and fades on a tween, one beat behind the last. The order is the message — it walks the eye from the mark to the words to the button in the order they should be read, and the button arriving last is what makes the screen feel finished rather than merely loaded. Reduced motion keeps the beats and drops the travel, so the reading order still survives.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Mark, headline and primary action fading up a beat apart on first load.
Related patterns
- Value Prop CarouselIntro slides advance on their own, with the artwork crossfading a beat behind the copy.
- Template Gallery PickThe chosen thumbnail grows in place into a preview of the workspace it would create.
- Headline Word RiseEach word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.