Reveal & motion

5 min · Foundations

RevealFx handles entry animation. Continuous effects like BlobFx and MatrixFx are decoration — budget them strictly so pages stay premium, not noisy.

Two kinds of motion

Type	Components	Budget
Entry (plays once)	RevealFx, CountFx	One staggered set per page
Ambient (loops)	BlobFx, MatrixFx, Pulse	At most two places, never adjacent

Entry motion draws attention to content arriving. Ambient motion sets mood in hero or CTA sections. Mixing both everywhere dilutes the effect. Source: recipes.md decoration budget rules.

RevealFx basics

Wrap content you want to fade or slide in. Control playback with the trigger prop. Pattern:

Attach a ref to the container
Use useInViewport(ref) to detect visibility
Latch a seen boolean in useEffect when in viewport
Pass trigger={seen} to each RevealFx child

Latch seen so the animation plays once when the element enters the viewport — not on every scroll pass. Set translateY="8" for a subtle upward slide. The prop accepts spacing token strings ("8", "16") or a rem number (1 = 1rem). Bare 16 means 16rem — a common codegen mistake.

Stagger a grid

Delay each child by index. Delay is in seconds, not milliseconds. In a three-column grid, map items and pass delay={index * 0.1} on each reveal wrapper. On mobile, stack with s={{ columns: 1 }}. Stagger all siblings in a set — never animate only the highlighted card.

Pair with CountFx

Drive stat numbers from the same viewport latch:

Wrap the stat block in a reveal wrapper with trigger={seen}
Set CountFx value={seen ? 2400 : 0} with a separator for thousands
Label below with Text variant="label-default-s"

CountFx has no trigger prop — animate by changing value from 0 to the target.

Ambient decoration budget

Hard limits from the Core recipes:

One ambient background layer per section — hero, highlighted card, or final CTA only
Continuous motion in at most two places per page, never side by side

✅ Once UI way	❌ Common mistake
`delay={index * 0.1}` (seconds)	`delay={index * 80}` (ms — animates for minutes)
`translateY="8"` or `translateY={1}`	`translateY={16}` (16rem jump)
Viewport latch with useInViewport	`trigger={true}` on page load for below-fold content
Stagger all siblings or none	Only the highlighted card animates
CountFx value driven by seen latch	CountFx trigger prop (does not exist)

Two kinds of motion

RevealFx basics

Stagger a grid

Pair with CountFx

Ambient decoration budget

Two kinds of motion

RevealFx basics

Stagger a grid

Pair with CountFx

Ambient decoration budget

Write this / not this

Check yourself

Reveal & motion

Two kinds of motion

RevealFx basics

Stagger a grid

Pair with CountFx

Ambient decoration budget

Two kinds of motion

RevealFx basics

Stagger a grid

Pair with CountFx

Ambient decoration budget

Write this / not this

Check yourself

Related