Reveal
Scroll-triggered reveals that never flash above the fold.
Reveal animates content in as it scrolls into view, as a block or one child at a time. Anything already on screen at load is left alone, so there is no flash, and everything stays in the server HTML for crawlers.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/reveal.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/reveal.
Builds on: motion
Usage
import { Reveal } from "@/components/ui/reveal";
<Reveal stagger effect="rise">{cards}</Reveal>Motion
ScrollTrigger.batch staggers whatever enters together; on-screen content at load is skipped.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Reveal
| Prop | Type | Default | Description |
|---|---|---|---|
| effect | "rise" | "fade" | "blur" | "scale" | "wipe" | "rise" | Style; wipe uncovers with a clip-path. |
| scroller | Element | null | — | The scrolling element when it is not the page. |
| stagger | boolean | false | Animate direct children in turn. |
| asChild | boolean | false | Use your own element. |
Accessibility
- Content is never hidden without JavaScript.
- Disabled with reduced motion.
FAQ
Also searched as: scroll reveal animation · animate on scroll react · gsap scrolltrigger react · fade in on scroll · aos alternative