Reveal

Atom
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.
src/atoms/reveal
View in Foundations

Playground

Every control sets a real prop of RevealProps. The JSX below updates as you go.
Revealed when it scrolls into view
Props
Direction
pick one
pronounced
boolean
brisk
boolean
children
string
JSX · RevealProps
<Reveal
fromBelow
>
<Typography>Revealed when it scrolls into view</Typography>
</Reveal>

Variants

8 examples from src/atoms/reveal/reveal.md, each rendered live from its own JSX.
Descends into place
From above
<Reveal fromAbove>
<Card>
<Typography>Descends into place</Typography>
</Card>
</Reveal>
Slides in from the left
From the left
<Reveal fromLeft>
<Card>
<Typography>Slides in from the left</Typography>
</Card>
</Reveal>
Slides in from the right
From the right
<Reveal fromRight>
<Card>
<Typography>Slides in from the right</Typography>
</Card>
</Reveal>
Travels further before settling
Pronounced
<Reveal pronounced>
<Card>
<Typography>Travels further before settling</Typography>
</Card>
</Reveal>
Arrives faster
Brisk
<Reveal brisk>
<Card>
<Typography>Arrives faster</Typography>
</Card>
</Reveal>
Waits until it is properly in view
Deep in view
<Reveal deepInView>
<Card>
<Typography>Waits until it is properly in view</Typography>
</Card>
</Reveal>
Measure
Reveal
Settle
Staggered group
<Row wrap>
<RevealGroup>
<Reveal>
<Container xxxs>
<Card>
<Typography>Measure</Typography>
</Card>
</Container>
</Reveal>
<Reveal>
<Container xxxs>
<Card>
<Typography>Reveal</Typography>
</Card>
</Container>
</Reveal>
<Reveal>
<Container xxxs>
<Card>
<Typography>Settle</Typography>
</Card>
</Container>
</Reveal>
</RevealGroup>
</Row>
Arriving again
Replay
<Ticker values={[1, 2]} interval={2800}>
{(pass) => (
<Reveal key={pass}>
<Card>
<Typography>Arriving again</Typography>
</Card>
</Reveal>
)}
</Ticker>

Anatomy

Revealed when it scrolls into view
1
Entering block
Dimmed parts appear only in some states or variants.

Props

10 props on RevealProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Direction
pick one
10 props
fromBelow
boolean
false
Rise into place from below. The default.
fromAbove
boolean
false
Descend into place from above.
fromLeft
boolean
false
Slide in from the left. Physical, and does not mirror under RTL (see above).
fromRight
boolean
false
Slide in from the right. Physical, and does not mirror under RTL (see above).
pronounced
boolean
false
Travel further before settling, for a hero or a section header. Omit for the default, shorter travel.
brisk
boolean
false
Arrive faster, for dense sets where the eye should not wait. Omit for the default duration.
deepInView
boolean
false
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.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.
From the docs
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Measure
Reveal
Settle
Web
control 10 · field 10 · card 16 · Instrument Sans
Measure
Reveal
Settle
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Measure
Reveal
Settle
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Reveal>
<Card>
<Typography>Rises into place</Typography>
</Card>
</Reveal>
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ln
--sf2
--sh-md

Related components