# Tilt

A restrained depth response to the pointer, returning cleanly to rest.

- Family: Motion, imported from `mizu-ui` or `mizu-ui/motion`
- Docs: https://mizu.user64bit.world/components/tilt
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/motion/Tilt.tsx

## Usage

```tsx
import { Tilt, Frame } from "mizu-ui";

export function Example() {
  return (
    <Tilt max={5}>
      <Frame>
        <div style={{ padding: 32 }}>
          <p className="mizu-field-hint">POINTER STUDY</p>
          <h3
            style={{ fontSize: 36, letterSpacing: "-.04em", margin: "20px 0" }}
          >
            A little depth.
          </h3>
          <p className="mizu-field-hint">
            Move across the surface. The reading order and hit targets stay
            familiar.
          </p>
        </div>
      </Frame>
    </Tilt>
  );
}
```

## 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/tilt 0xuser64bit/mizu/frame
```

## Props

- `max`: `number` (default `6`). Maximum tilt in degrees, clamped to 0–20.
- `children / className`: `ReactNode / string`. Surface content and styling.

## Accessibility

Pointer-mouse enhancement only. Touch and keyboard receive a stable surface; no essential information is pointer-dependent.

## Motion

Motion springs settle on leave. Reduced motion disables rotation.