Reveal
Lets content rise into place the first time it scrolls into view, with an optional delay for staggering. Content shows at once with reduced motion or without scripts.
npx prodular-ui add revealStaggered cards
Three cards with 90ms between them. Reload and scroll to see them rise.
InvoicesRises in 0ms after the first
RemindersRises in 90ms after the first
PayoutsRises in 180ms after the first
import { Reveal } from "@/components/ui/reveal"
export default function RevealStagger() { return ( <div className="grid w-full gap-4 sm:grid-cols-3"> {["Invoices", "Reminders", "Payouts"].map((t, i) => ( <Reveal key={t} delay={i * 90}> <div className="flex h-32 flex-col justify-end rounded-xl border bg-card p-5 shadow-xs"> <span className="font-medium">{t}</span> <span className="text-[13px] text-muted-foreground">Rises in {i * 90}ms after the first</span> </div> </Reveal> ))} </div> )}Anatomy
<Reveal delay={70}> <Card /></Reveal>Guidance
Use it when
- Section headers, cards and media on marketing pages.
- delay to stagger items in a row, around 60 to 90ms apart.
Avoid
- Inside the app. Work screens should not move as people scroll.
- Wrapping a whole page in one Reveal.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Wrap each block that should rise, not its container and its children both.
- useInView returns a ref and a flag for your own scroll-triggered effects.
API
Reveal
| Prop | Type | Default | Description |
|---|---|---|---|
| delay | number | 0 | Milliseconds before it rises. |
useInView
| Prop | Type | Default | Description |
|---|---|---|---|
| (options?) | [ref, inView] | True once the element is 10% visible. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add reveal# or, with the registry in components.jsonnpx shadcn@latest add @prodular/reveal