Dynamics Display
dynamics-displayViewersTransfer curve for a compressor or a gate, plus its GR meter.
$ pnpm dlx shadcn@latest add @pluginui/core-dynamics-displayInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-dynamics-display.jsonUsage
Connect the documented props to your application or host.
import { DynamicsDisplay } from "@/components/ui/dynamics-display"
<DynamicsDisplay
mode="compressor"
threshold={-24}
ratio={4}
knee={6}
showMeter
getReduction={(out) => {
out[0] = compressorNode.reduction
return true
}}
/>About Dynamics Display
This picture shows what a dynamics processor does: input level runs across, output level runs up, and the line's distance from the diagonal shows how it pulls on the signal. The display is computed rather than measured, so it is accurate as soon as the page paints. It shades the knee as a width, marks the threshold, and draws a gate's hysteresis as a band. The live gain-reduction meter beside it answers a different question: the curve shows what the processor would do at any level; the meter shows what it is doing now.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "compressor" | "gate" | "compressor" | Which curve to draw. The gate reads range/hysteresis instead of ratio. |
| threshold | number | — | Where the curve bends, in dB. The one parameter both modes share. |
| ratio | number | 4 | Compressor only: compression ratio, n:1. 1 is a no-op. |
| knee | number | 0 | Total knee width in dB, centred on the threshold. 0 is a hard corner. |
| range | number | -60 | Gate only: attenuation while shut, in dB. Negative. |
| hysteresis | number | 0 | Gate only: how far below the threshold the gate holds open. Drawn as a band, with the other edge's curve ghosted behind the solid one. |
| phase | "opening" | "closing" | "opening" | Which edge of the hysteresis band the solid curve draws. |
| minDecibels / maxDecibels | number | -60 / 0 | The dB window both axes cover. |
| probeLevels | number[] | — | Mark these input levels on the curve with a dot. |
| showMeter | boolean | false | Show the live gain-reduction meter under the plot. |
| reduction | number | — | Supply gain reduction in dB directly with the driven form. It accepts either sign, so a DynamicsCompressorNode's negative reading works as-is. |
| getReduction | (target: Float32Array) => boolean | void | — | Fill target[0] with the current reduction in dB each frame. This is the getData form used by the kit's other live displays. |
| meterRange | number | 40 | Reduction in dB that fills the meter. |
| color | string | — | Override the curve's accent colour for this instance. |
| height | number | 220 | Plot height in pixels. The plot stays square inside it. |
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
sliderandswitchroles with livearia-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.