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. |
Accessibility
Reveal explicitly checks window.matchMedia('(prefers-reduced-motion: reduce)') in a useEffect before ever hiding content, skipping the IntersectionObserver entirely and leaving children rendered fully visible when the user prefers reduced motion. The wrapper is a plain, non-decorative <div> — its children are real content, not aria-hidden — and it adds no role, tabindex, or focus handling, so it never changes the keyboard behavior of whatever it wraps.