Pinfield
A grid of pins that carries pulses — click and a wavefront travels outward, lighting the field.
Live — this one is real
Grid — 26px
Click the field — a pulse travels through the grid
Usage
import { Pinfield } from "mizu-ui";
export function Field() {
return <Pinfield gap={26} />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect lab/Pinfield.tsx
Source is included in the npm package under src/lab/Pinfield.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 26 | Grid spacing in px. |
| speed | number | 3.4 | Wavefront propagation speed. |
| autoPulse | boolean | 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.