Parallax
A bounded depth cue linked to the surface's actual position in the viewport.
Live — this one is real
Usage
import { Parallax, ImageFigure } from "mizu-ui";
export function Example() {
return (
<Parallax distance={35}>
<ImageFigure
src="/images/field.svg"
alt="A field of measurement diamonds"
caption="Scroll the page to study the relationship."
width={720}
height={360}
/>
</Parallax>
);
}
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. Requires React and Motion.
Inspect motion/Scroll.tsx
Source is included in the npm package under src/motion/Scroll.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| distance | number | 40 | Travel around rest in pixels, bounded to ±120. |
| children / className | ReactNode / string | — | Prefer decorative media and stable surrounding text. |
Accessibility
No essential information depends on movement. Overflow contains the visual travel; children retain their own semantics.
Motion
Motion's managed scroll subscription maps start/end positions directly. Reduced motion shows the resting state.