# RippleSurface

An ambient surface that ripples where you touch it — built for hero sections and invite panels.

- Family: Instruments, imported from `mizu-ui` or `mizu-ui/lab`
- Docs: https://mizu.user64bit.world/components/ripple-surface
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/lab/RippleSurface.tsx

## Usage

```tsx
import { RippleSurface } from "mizu-ui";

export function Hero() {
  return (
    <div
      style={{
        position: "relative",
        display: "grid",
        placeItems: "center",
        minHeight: 320,
      }}
    >
      <RippleSurface style={{ position: "absolute", inset: 0 }} />
      <h1
        style={{
          position: "relative",
          margin: 0,
          fontSize: 48,
          pointerEvents: "none",
        }}
      >
        Step inside
      </h1>
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/ripple-surface
```

## Props

- `auto`: `boolean` (default `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.