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.

View .md

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 into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

npx shadcn@latest add 0xuser64bit/mizu/xypad

Every component imports from its own path, its name in kebab case. Its source, signature/Controls.tsx, also holds Knob and Fader. Each has its own command and path; adding one after this copies only its small entry file. To paste the example, replace its mizu-ui import with:

tsx

import { XYPad } from "@/components/ui/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. A Client Component: its source starts with “use client”.

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