# Equalizer
> Seven-band pixel equalizer with spring-loaded bands, a smooth curve and a live spectrum behind; presets cascade band by band.
- Element: `<px-eq>`
- React: `import { PxEq } from "@/components/lumesec/px-eq"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-eq.json
- Page: https://elements.lumesec.ai/components/pixel-lab/eq



Live preview: https://elements.lumesec.ai/view/px-eq

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-eq.js"></script>

<px-eq></px-eq>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-eq
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-eq.json
```

## Usage

React:

```tsx
import { PxEq } from "@/components/lumesec/px-eq";

export function Example() {
  return (
    <PxEq />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-eq.js"></script>

<px-eq></px-eq>
```

## 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.

| Event    | React prop | Detail                                 | Description                                                                                                                                                                                     |
| -------- | ---------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ 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.

| Method                                               | Description                                                       |
| ---------------------------------------------------- | ----------------------------------------------------------------- |
| `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"` and `aria-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-pressed` marks 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](/docs/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.