EQ Display

eq-displayViewers

Each band's biquad coefficients are evaluated with the RBJ cookbook formulas and multiplied together, exactly as cascaded filters behave — so the drawing matches what the audio graph will actually do, and needs no analyser at all. Read-only itself, but the axis it draws with comes from response-geometry and carries both directions, so a panel can lay a drag overlay on top and have the handles land exactly on the curve.

Four bands, summed from their biquad coefficients — no analyser involved. The travelling dot is the cursor prop: a frequency in, a point on the real curve out, for modulated filters.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/eq-display

Pulls in

control-themeresponse-geometry

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx

import { EQDisplay } from "@/components/ui/eq-display"

<EQDisplay
  bands={[
    { freq: 80, gain: 4, q: 0.7, type: "lowshelf" },
    { freq: 1200, gain: -3, q: 1.4, type: "peaking" },
    { freq: 8000, gain: 5, q: 0.7, type: "highshelf" },
  ]}
/>

Props

Prop	Type	Default	Description
bands	EQBand[]	—	Each band carries freq, gain, q, type and an optional bypassed flag and colour. Type is one of peaking, lowshelf, highshelf, lowpass, highpass, bandpass or notch.
sampleRate	number	48000	Needed for the bilinear transform.
minFrequency / maxFrequency	number	20 / 20000	The frequency axis bounds, drawn logarithmically.
decibelRange	number	18	Vertical range, in dB either side of flat.
showBands	boolean	false	Draw each band's own response behind the summed curve.
showHandles	boolean	true	Draw a dot at each band's centre frequency.
fill	boolean	true	Fill the area between the curve and the 0 dB line.
cursor	{ freq, emphasis?, color?, line? }	—	A marker riding the curve at one frequency — the modulation cursor an auto-filter, auto-wah or phaser needs. The caller animates the frequency (from an LFO phase or an envelope follower) and this places it on the response; emphasis 0..1 fades and shrinks it. A prop rather than an overlay component because the cursor's only requirement is the axis, and the axis is this component's.
height	number	160	Display height in pixels; width defaults to 100%.

Interaction

Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
Double-click resets to defaultValue.
Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.

All controls Start building