Reveal provides scroll-triggered entry animations. Elements fade and slide into view when they enter the viewport. Supports configurable direction, distance, duration, delay, and stagger for animating multiple children sequentially.
Basic Reveal
Wrap any element with Reveal and it will animate into view when it enters the
viewport. Click Replay to re-trigger the animation.
Single element — slides up
Staggered Children
Set stagger (ms per child) to animate multiple children in sequence. The class prop is forwarded to the wrapper so you can control layout — use class="flex gap-4" to lay children out side by side.
Card 1
Card 2
Card 3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'up' | 'down' | 'left' | 'right' | 'none' | 'up' | Slide direction |
distance | string | '1.5rem' | Slide distance (any CSS length) |
duration | number | 600 | Animation duration in ms |
delay | number | 0 | Delay before animation starts in ms |
stagger | number | 0 | Delay increment per child in ms |
once | boolean | true | Only animate once on first enter |
threshold | number | 0.1 | Intersection ratio (0–1) to trigger |
easing | string | 'cubic-bezier(0.4, 0, 0.2, 1)' | CSS easing function |
class | string | — | CSS class forwarded to the wrapper element |
Open in Playground
Explore all properties interactively in the Reveal playground.