docs / core / reveal

Reveal

six scroll reveals under one idea: things resolve out of mist as they come into view. assign the variant by content role, so a page does not replay one identical entrance.

intensity · guidesrsc · client

provenance

authored in usva

layer

core / motion

intensity

guides · leads the eye through a sequence, then clears

composition

sections, cards and media on marketing and content pagesstagger lives inside one RevealGroup, never across sectionsnot in dense task UI. a dashboard someone works in reveals nothingnever a Reveal inside a RevealGroup, the group already animates each child

a11y

renders static under prefers-reduced-motion, nothing ever arms · content ships visible before hydration · as keeps the element semanticjest-axe

dependencies

motion
live · six variants
each reveal is assigned by content role, not position.
cast
headings · titles · eyebrows
veil
prose · sections · footers (default)
surface
cards · panels · CTAs · hero
focus
images · media frames
tick
stats · tables (grouped)
lean
quotes · asides · callouts

props

proptypedefaultnotes
variant"veil" | "cast" | "surface" | "focus" | "tick" | "lean""veil"assign by content role, never by position. cast for headings, veil for prose, surface for cards and CTAs, focus for media, tick for data, lean for quotes.
asRevealTag"div"the rendered element. h2, section, p, li, figure and friends keep their semantics.
intensitynumber—overrides the ambient RevealConfigProvider scalar. 1 is kajo-bold, ~0.45 sisu-quiet, 0 switches the reveal off.
delaynumber0seconds before the enter starts.
amountnumber0.35fraction of the element that must be visible to trigger.
forcebooleanfalsereveal even when already in view at mount. demos and explicit entrances.

get it

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

<Reveal variant="cast" as="h2">Section title</Reveal>
<Reveal variant="veil">Body copy resolves out of the mist.</Reveal>

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