SIG—22 Signature system

XYPad

Two parameters under one finger: press anywhere and the puck springs there, then sweep both at once with a trail behind it.

Live — this one is real

Synth voiceColour grade

Drag knobs and faders up or down (Shift for fine), press anywhere on the pad, or use the arrow keys; double-click or Backspace returns a control home. The synth really plays while you hold the button — the meters and scope read its audio.

Usage

tsx

import { XYPad } from "mizu-ui";

export function Example() {
  return (
    <XYPad
      label="Balance"
      x={{ label: "Temp", min: -100, max: 100 }}
      y={{ label: "Tint", min: -100, max: 100 }}
      defaultValue={{ x: 0, y: 0 }}
    />
  );
}

This code, running — no configuration beyond the data

Keyboard

←→: Move along X
↑↓: Move along Y
Shift+arrowsPageUpPageDown: A tenth of the range
BackspaceDelete: Return home

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

npx shadcn@latest add 0xuser64bit/mizu/xypad

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Controls.tsx

Source is included in the npm package under src/signature/Controls.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
label / value / defaultValue / onValueChange / onValueCommit	string / { x, y }	—	The pad's name and point.
x / y	{ label, min, max, step, taper, format }	—	Each axis's name, range and readout.
size / resetValue	number / { x, y }	—	Side length (200); where a reset returns.
name / disabled	string / boolean	—	Submits name-x and name-y with a form; switch off.

Accessibility

Each axis is its own native slider, named after the pad and the axis, so assistive technology reads and sets them separately. From either one, left and right move X and up and down move Y; Shift steps a tenth, Backspace returns home, and the focused axis's crosshair lights in the accent.

Motion

The puck springs to where you press and then follows your finger exactly, drawing a short comet trail that fades when you let go. Keys and resets glide. Reduced motion jumps and skips the trail.

Works alongside

Chronicle TrendChart Waveform Plane