Reveal

An entrance for page content: what it wraps starts slightly offset and transparent, then travels into place and fades in when it reaches the viewport. It fires once and stays, so content that has arrived never leaves again.
Direction chooses the axis it travels from, with fromBelow the default and fromAbove, fromLeft, fromRight the alternatives (that is also the precedence order if more than one is passed). pronounced travels further, brisk arrives faster, and deepInView holds the entrance until the element is properly inside the viewport instead of firing as it enters.
Stagger is structural rather than numeric: wrap a set in RevealGroup and each child arrives after the one before it, so no call site ever computes a delay. RevealGroup renders no box of its own, so it can sit between a grid and the items the grid lays out.
The trigger is measured against the window rather than the nearest scrolling parent, so content sitting inside a short inner scroller can arrive before that scroller has been scrolled to it; reveal on the page scroll, which is what this is for. Under Reduce Motion the content renders its final frame immediately, with no measuring and no timers, and the stagger is skipped along with the motion.
Rises into place
iOS
Rises into place
Android
Rises into place
Web
tsx
<Reveal>
<Card>
<Typography>Rises into place</Typography>
</Card>
</Reveal>

Props

RevealGroup

Prop
Description
children
ReactNode
The Reveals to stagger. Each direct child receives the next ordinal in document order, so a mapped list arrives one item after another with no per-item props.

Reveal

Prop
Description
fromBelow
boolean
Rise into place from below. The default.
fromAbove
boolean
Descend into place from above.
fromLeft
boolean
Slide in from the left. Physical, and does not mirror under RTL (see above).
fromRight
boolean
Slide in from the right. Physical, and does not mirror under RTL (see above).
pronounced
boolean
Travel further before settling, for a hero or a section header. Omit for the default, shorter travel.
brisk
boolean
Arrive faster, for dense sets where the eye should not wait. Omit for the default duration.
deepInView
boolean
Wait until the element is properly inside the viewport before starting, instead of firing as it enters.
children
ReactNode
The content to reveal.
style
LayoutStyle
Outer layout composition ONLY: how this wrapper sits in its parent (a `minWidth` of 0 so a grid child may shrink below its content, a `height` of 100% so cards in a row stay even, a flex share). It is NOT a restyle hook: the entrance itself is chosen entirely with the boolean props above, and the revealed content styles itself. A wrapper that cannot be told how to sit in its parent forces callers to add a second wrapper around it, which is worse.
testID
string
E2E hook forwarded to the wrapper.

Do & Don’t

stagger

Don’t
First
Second
Third
Leave a set ungrouped: every card fires at the same instant, so the row lands as one slab instead of a cascade.
Do
First
Second
Third
Wrap the set in a RevealGroup and let each item's position set its own rhythm.

direction

Don’t
Left
Right
Mix a direction per item; the set reads as scattered rather than as one movement.
Do
Rises
Rises
Give a set one direction, so it arrives as a single gesture.

scope

Don’t

Three entrances

Every line arrives on its own schedule.
Reveal each leaf inside one card; the card assembles itself in pieces in front of the reader.
Do

One entrance

The card and its lines arrive as a single object.
Reveal the block, so its contents arrive together as one piece of content.

the real thing

Don’t
Stuck half-arrived
Hand-roll it with a wrapper and a hard-coded opacity: it never arrives, never watches the scroll position, and ignores Reduce Motion.
Do
Reveals itself
Use the atom, so the entrance is one prop, plays on scroll, and honors Reduce Motion.
← Radio
Row & Column →