RippleSurface
An ambient surface that ripples where you touch it — built for hero sections and invite panels.
Live — this one is real
The surface
answers.
Click anywhere — ripples propagate outward
Usage
import { RippleSurface } from "mizu-ui";
export function Hero() {
return (
<div style={{ position: "relative" }}>
<RippleSurface style={{ position: "absolute", inset: 0 }} />
<h1>Step inside</h1>
</div>
);
}
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 lab/RippleSurface.tsx
Source is included in the npm package under src/lab/RippleSurface.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| auto | boolean | true | Drop an ambient ripple every 2.6s. |
Accessibility
aria-hidden — the surface is decorative.
Motion
Ripples expand and fade on a 1px stroke. Reduced motion paints a static frame.