Reveal
Scroll-triggered entrance with direction, distance and delay control.
Live — this one is real
Delay — 200ms
01
Surfaces
02
Motion
03
Systems
Usage
import { Reveal } from "mizu-ui";
export function Grid() {
return (
<Reveal delay={0.1} y={24}>
<p>Your content arrives here.</p>
</Reveal>
);
}
Source & setup
Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens: it has no static styles and brings no stylesheet of its own. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.
npx shadcn@latest add 0xuser64bit/mizu/revealEvery component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:
import { Reveal } from "@/components/ui/mizu/reveal";For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.
Inspect motion/Reveal.tsx
Source is included in the npm package under src/motion/Reveal.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delay | number | 0 | Seconds before entrance starts. |
| x / y | number | 0 / 32 | Entrance offset in pixels. |
| duration | number | 0.95 | Entrance duration in seconds. |
| once | boolean | true | Reveal only the first time it enters the viewport. |
Accessibility
Content is present in the DOM before revealing — no content is created or removed by the animation.
Motion
0.95s expo rise, fires once at 70px viewport margin.