Equalizer
Seven-band pixel equalizer with spring-loaded bands, a smooth curve and a live spectrum behind; presets cascade band by band.
Installation
pnpm dlx shadcn@latest add @lumesec/px-eqFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-eq.jsonUsage
import { PxEq } from "@/components/lumesec/px-eq";
export function Example() {
return (
<PxEq />
);
}Behaviour
Seven bands on springs with a smooth curve drawn through them, over a live spectrum that reacts to the gains. Presets cascade band by band.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
changeReact proponChangeDetail{ gains: number[], preset?: string }Fires when a drag ends, on each ArrowUp or ArrowDown press, on a double-click reset and when a preset is chosen. gains holds seven target values in dB; preset is present only for presets.
Methods
Call them on the element, for example through a React ref.
preset(name: "Flat" | "Bass" | "Vocal" | "Air")Applies a preset with a left-to-right cascade and fires change.
Keyboard
| Keys | Action |
|---|---|
| ArrowLeft / ArrowRight | Select the previous or next band. |
| ArrowUp / ArrowDown | Raise or lower the selected band by 1 dB. |
Accessibility
- The canvas is focusable with
role="group"andaria-label="Equalizer. Left and right pick a band, up and down change its gain.". - Individual bands have no ARIA values and there is no live region; the selected band's gain is drawn on the canvas only.
- Preset buttons are native buttons;
aria-pressedmarks the last preset chosen. - Reduced motion: bands jump to their new gain instead of springing and the spectrum stops flickering; presets still apply band by band.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground and --lumesec.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent and --ui-fg.
Notes
- Bands are 60, 150, 400, 1k, 2.4k, 6k and 15k, each from -12 to +12 dB. Dragging snaps to 0.5 dB; double-clicking a band sets it to 0.
- The spectrum is simulated and no audio is processed. The canvas is 196px tall.
Related
Was this page helpful?