Skip to content
MIZU.

SIG—21 Signature system

Fader

A console fader with a live meter: drag the cap, click the track to jump, and watch the level fall away beside it with a held peak.

Live — this one is real

Panel

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.

Note

onValueCommitNothing yet

Usage

tsx
import { Fader } from "mizu-ui";

export function Example() {
  return (
    <Fader
      label="Master"
      min={0}
      max={1}
      step={0.01}
      defaultValue={0.8}
      marks={[1, 0.5, 0]}
      level={0.62}
      format={(v) => `${Math.round(v * 100)}%`}
    />
  );
}

This code, running — no configuration beyond the data

Keyboard

↑↓
Step up or down
Shift+arrowsPageUpPageDown
A tenth of the range
HomeEnd
Minimum or maximum
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.

sh
npx shadcn@latest add 0xuser64bit/mizu/fader

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

PropTypeDefaultDescription
label / value / defaultValue / onValueChange / onValueCommitstring / number—As for Knob.
levelnumber | MotionValue<number>—A live signal from 0 to 1 for the meter; pass a motion value to update it without re-rendering.
marks / heightnumber[] / number—Values labelled beside the track; track height (176).
min / max / step / taper / format / resetValuenumber / linear | log / (value) => string—As for Knob.
name / disabledstring / boolean—Submit with a form; switch off.

Accessibility

Behind the drawing is a native range input: it takes focus, answers the arrow, Page, Home and End keys, reads its value as formatted text, and submits with a form when named. Shift steps by a tenth of the range, Backspace or Delete returns home, and focus shows in the accent.

Motion

The cap glides to track clicks and resets and follows the hand while dragged. The meter attacks instantly and releases steadily; its peak holds for a moment, then falls. Reduced motion jumps the cap.

Works alongside

ChronicleTrendChartWaveformPlane