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
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
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.