# Pinfield

A grid of pins that carries pulses — click and a wavefront travels outward, lighting the field.

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

## Usage

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

export function Field() {
  return <Pinfield gap={26} />;
}
```

## 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/pinfield
```

## Props

- `gap`: `number` (default `26`). Grid spacing in px.
- `speed`: `number` (default `3.4`). Wavefront propagation speed.
- `autoPulse`: `boolean` (default `true`). Send an ambient pulse every 3s.

## Accessibility

Canvas carries button semantics with instructions. Focus the field and press Enter or Space to send a pulse.

## Motion

DPR-scaled canvas with IntersectionObserver pausing, and a static frame under reduced motion.