docs / core / reveal group

Reveal Group

the stagger group for Reveal: one shared viewport trigger cascades its direct children in, one after the next. the cascade is the effect, so the layout goes on the group and one variant covers every child.

intensity · guidesrsc · client

provenance

authored in usva

layer

core / motion

intensity

guides · leads the eye through a sequence, then clears

composition

a grid or row of siblings that enter together: cards, stats, logosone variant for the whole group; children inherit itnever a Reveal inside it, the group already animates each childnot across sections, one trigger per group

a11y

renders static under prefers-reduced-motion, nothing ever arms · children ship visible before hydrationjest-axe

dependencies

motion
live demo · try it out
Tokens
layer
Themes
layer
Primitives
layer
Patterns
layer
Sula
layer
Atmospheres
layer
customize
variantthe reveal every child runs
staggerseconds between children
0.08
usagecopy
import { RevealGroup } from "@usva-ui/react/motion/reveal";
import { Card } from "@usva-ui/react/primitives/card";

<RevealGroup
  variant="tick"
  stagger={0.08}
  className="grid grid-cols-3 gap-3"
>
  <Card>Tokens</Card>
  <Card>Themes</Card>
  <Card>Primitives</Card>
</RevealGroup>

props

proptypedefaultnotes
variant"veil" | "cast" | "surface" | "focus" | "tick" | "lean""tick"the reveal every child runs. assign by content role, like Reveal.
staggernumber0.06seconds between children on the shared trigger. the cascade is the effect, so the layout classes go on the group.
asRevealTag"div"the rendered element. ul, section, and friends keep their semantics.
intensitynumber—overrides the ambient RevealConfigProvider scalar for the group.
forcebooleanfalsecascade even when already in view at mount.

get it

bun add @usva-ui/reactcopy
usagecopy
import { RevealGroup } from "@usva-ui/react/motion/reveal";

<RevealGroup variant="tick" className="grid grid-cols-3 gap-3">
  <StatCard />
  <StatCard />
  <StatCard />
</RevealGroup>