# WaveText

Kinetic text that answers the cursor — each letter lifts, scales and warms as you pass over it.

- Family: Type, imported from `mizu-ui` or `mizu-ui/type`
- Docs: https://mizu.user64bit.world/components/wave-text
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/type/WaveText.tsx

## Usage

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

export function Title() {
  return (
    <WaveText
      text="Mizu"
      as="h1"
      radius={120}
      style={{ margin: 0, fontSize: 72, fontWeight: 900 }}
    />
  );
}
```

## 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/wave-text
```

## Props

- `text`: `string`. The word or phrase.
- `radius`: `number` (default `120`). Pointer influence radius in px.
- `colorFrom / colorTo`: `string` (default `"var(--mizu-paper)" / "var(--mizu-accent)"`). Resting and active letter colors, any CSS color. The defaults follow the theme.
- `as`: `"span" | "h1" | "h2" | "p" | "div"` (default `"span"`). Semantic element to render.

## Accessibility

Letters are aria-hidden; the container carries the full text as its accessible name.

## Motion

Direct motion values with smoothstep falloff. Reduced motion removes pointer listeners and keeps letters at rest.