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

tsx

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

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with its source module’s stylesheet and base.css, Mizu’s tokens. 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/ripple-surface

Every component imports from its own path, its name in kebab case.

tsx

import { RippleSurface } from "@/components/ui/mizu/ripple-surface";

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 lab/RippleSurface.tsx

Source is included in the npm package under src/lab/RippleSurface.tsx.

Open full source ↗

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.

Works alongside

Pinfield Signal