Motion
Reveal
Content entering with intent: a short fade and a few pixels of travel, once, the first time it is seen. Under reduced motion the element is simply present.
Playground
Press replay to re-run the entrance. Distance is measured in pixels; 8 is the default.
Controls
Distance
Delay
Replay
Staggered item 1
0.08sStaggered item 2
0.16sStaggered item 3
0.24sReveal never gates content: if the observer never fires, the element is still present after the transition budget.
<Reveal immediate distance={8} delay={0.08}>
<Card>Staggered item</Card>
</Reveal>
{/* Per item, so the entrance reads as a sequence rather than a flash. */}
<Reveal immediate delay={0.08 * (index + 1)} />Stagger in a grid
Delay is applied per item. Beyond ~0.24s total the entrance starts to feel slow.
STEP 1
Ingest
Each card enters 60ms after the one before it.
STEP 2
Analytics
Each card enters 60ms after the one before it.
STEP 3
Validation
Each card enters 60ms after the one before it.
STEP 4
Summary
Each card enters 60ms after the one before it.
Scrolling into view
By default Reveal plays once, the first time a section is seen, then stays put. Content that is already on screen at load is simply present — no animation to wait for.
Scroll this page slowly and the blocks below animate in once each.
API
| Prop | Type | Default | Notes |
|---|---|---|---|
delay | number | 0 | Seconds before the entrance starts. |
distance | number | 8 | Travel in px. 0 gives a pure fade. |
repeat | boolean | false | Re-run every time it enters the viewport. |
immediate | boolean | false | Play on mount instead of waiting for view. |
Rules
Do
- Keep distance small — 6–10px is felt, 40px is seen.
- Stagger lists by 40–80ms, never more.
- Reveal the region, not each line of text.
Don't
- Reveal content the user came to read.
- Use Reveal inside a scrollable table body.
- Chain three animations on one element.
See it applied
Related