Reveal
Scroll-triggered entrance animation driven by IntersectionObserver, with a RevealGroup for staggered cascades. Content stays visible without JS and under reduced motion.
Installation
npx dafink-ui add revealDemo
Scroll-triggered entrance
Staggered by 120ms
With its own effect
Composition
<RevealGroup>
</RevealGroup>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| effect | "fade" | "slide-up" | "slide-left" | "slide-right" | "scale" | "fade" | Entrance effect applied when the element scrolls into view. |
| delay | number | 0 | Delay in milliseconds before the entrance transition starts. |
| once | boolean | true | Reveal only on first entry. When false, content re-hides on exit and re-reveals on re-entry. |
| stagger (RevealGroup) | number | 100 | Milliseconds added to each successive child Reveal’s delay. |
| delay (RevealGroup) | number | 0 | Base delay applied to the first child of the group. |
| className | string | "" | Additional Tailwind classes merged onto the wrapper element. |