Reveal
Free
A wrapper that fades, slides, unblurs or scales its content in as it scrolls into view.
Scroll inside this box
The cards below play as they come into view.
Instant builds
Push and play in under a minute.
Live tuning
Change numbers while the game runs.
Crash reports
Grouped, ranked and linked to the commit.
Store pages
One source of truth for every storefront.
Start building today
Free for teams of up to three.
Customize
Variant
0.6s
0.08s
Play once
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/reveal.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/reveal.tsx.
Usage
import { Reveal } from "@/components/ui/reveal";
<Reveal variant="slide-up" stagger={0.08} className="grid gap-4 md:grid-cols-3">
<Feature title="Instant builds" />
<Feature title="Live tuning" />
<Feature title="Crash reports" />
</Reveal>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to reveal. With stagger, each direct child plays in turn. |
| variant | "fade" | "slide-up" | "slide-left" | "blur" | "scale" | "slide-up" | How the content arrives. |
| delay | number | 0 | Wait before playing, in seconds. |
| duration | number | 0.6 | Length of the animation, in seconds. |
| distance | number | 24 | How far slides travel, in pixels. Also sets the blur and scale strength. |
| once | boolean | true | Play only the first time; otherwise hide again when scrolled out. |
| stagger | number | 0 | Seconds between direct children. 0 animates everything together. |
| amount | number | 0.3 | Share of the element that must be visible before it plays, from 0 to 1. |
| root | RefObject<Element | null> | — | Scrolling element to watch instead of the page. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion