Audio Plugin UI Kit

Precision EQ
UI System

Production-grade React components for audio plugin frontends. Dark-industrial aesthetic, physics-grounded interactions, drop-in design tokens.

Try the Demo View Source
audio.instruments Pro-Q 4 Default Setting ±30 dB
MIDI Learn Zero Latency Analyzer: Pre+Post+SC
Components

Atomic building blocks

Each component is self-contained and extractable. Copy a single file to use a Knob; copy three files to get a full EQ display.

<Knob />
src/components/Knob.tsx
SVG arc knob with drag-to-change, log/linear scale mapping, per-color arc, disabled state. Zero external dependencies.
ReactSVGlog scale
<EQCanvas />
src/components/EQCanvas.tsx
Canvas 2D EQ curve renderer with band nodes, marquee selection, frequency zoom, mouse lighting effect, and 60fps render loop.
Canvas 2DRAF loopmulti-select
<RadialMenuOverlay />
src/App.tsx
Right-click radial context menu for 7 filter types. SVG wedge segments with hover highlight, blur/scale entrance animation.
SVGmotionradial
<EditableNumber />
src/App.tsx
Click-to-edit inline number field with range clamping. Used in band tooltip for freq/gain/Q direct entry.
inline editclamping
Live Preview

Knob variants

Drag vertically to change value. Each knob uses an independent arc origin — arcStartValue sets where the arc begins (center for gain, minimum for frequency).

Design Tokens

Color system

Five band accent colors plus a structured surface hierarchy. All defined as CSS custom properties.

--band-1
#8cf064
--band-2
#00c3ff
--band-3
#b964f0
--band-4
#f064b9
--band-5
#f06464
--surface-0
#111111
--surface-1
#151618
--surface-2
#222226
--surface-3
#2a2a2e
--curve-stroke
rgba(140,240,100,.85)
Usage

Drop-in integration

Copy the component files, import, and use. No build configuration needed beyond React + TypeScript.

Knob
import { Knob } from './components/Knob';

// Frequency knob — log scale, arc starts at min
<Knob
  label="Freq"
  value={freq}
  min={10} max={30000}
  unit="Hz"
  isLogScale={true}
  arcStartValue={10}
  color="#00c3ff"
  onChange={v => setFreq(v)}
  formatValue={v => v >= 1000 ? (v/1000).toFixed(2)+' k' : v.toFixed(2)}
/>

// Gain knob — linear, arc starts at 0 dB center
<Knob
  label="Gain"
  value={gain}
  min={-30} max={30}
  unit="dB"
  arcStartValue={0}
  color="#8cf064"
  onChange={v => setGain(v)}
/>
⚡
60fps Render Loop
Canvas 2D with requestAnimationFrame, lerp-smoothed view transitions, DPR-aware rendering.
🎛
7 Filter Types
Bell, low/high cut, low/high shelf, notch, band-pass — all computed via analog prototype approximations.
🖱
Rich Interactions
Drag nodes, marquee multi-select, scroll Q/slope, double-click add/toggle, right-click radial menu.
🎨
Full Token System
Every color, spacing, and animation timing is a documented CSS variable — theme-swap ready.
🧪
Behavior-Anchored Tests
Vitest suite covers filter math, coordinate transforms, and axis monotonicity invariants.
📦
Copy-Paste Ready
Knob.tsx has zero non-React deps. EQ display needs only 3 files. No opaque build steps.