Reveals

Animates its children into view as they enter the viewport, staggering each one by cascade for a sequential reveal. Accepts either children or an items array.

import { Reveals } from '@jbpark/ui-kit';

<Reveals effect="fadeInUp" cascade={0.15}>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Reveals>;

First

Revealed on scroll.

Second

Revealed on scroll.

Third

Revealed on scroll.

Props

Prop	Type	Default
effect	'fadeIn' | 'fadeInUp' | 'slideInUp'	'fadeInUp'
cascade	number (stagger between items, seconds)	0.1
duration	number (seconds)	0.6
delay	number (seconds, before the first item)	0
once	boolean (animate only the first time)	-
items	ItemProps[]	[]
classNames	{ root?: string; item?: string }	-
className	string	-
children	ReactNode	-

viewport, variants, and transition are forwarded to the underlying motion element for fine-grained control. Reveals.Item is also exported for composing a single animated item directly.