Transfer Curve
transfer-curveViewersWhat a waveshaper does to a sample, drawn.
$ pnpm dlx shadcn@latest add @pluginui/core-transfer-curveInstall
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-transfer-curve.jsonUsage
Connect the documented props to your application or host.
import { TransferCurve } from "@/components/ui/transfer-curve"
// A soft-clip drive, with the live operating region lit from an analyser.
<TransferCurve shaper={{ kind: "drive", amount: 0.4 }} analyser={analyser} />
// A bitcrusher: treads and risers, not a polyline through them.
<TransferCurve shaper={{ kind: "crush", bits: 4 }} />
// A Chebyshev order, with the harmonics it produces under the plot.
<TransferCurve shaper={{ kind: "chebyshev", order: 5 }} showHarmonics />
// An electric-piano pickup: distance sets how hard it bends, alignment
// sets whether it makes even harmonics or only odd ones.
<TransferCurve shaper={{ kind: "pickup", distance: 0.2, symmetry: 0.4 }} />About Transfer Curve
Input amplitude runs across the plot and output amplitude runs up. For a memoryless nonlinearity, this line is the distortion stage's behaviour, not just a diagram; the gap from the dashed identity diagonal shows the distortion at true scale. The curve is computed, not measured, so it is accurate before playback. One plot supports three treatments: a curve for soft-clip drive, a staircase showing a bitcrusher's real quantiser boundaries, and a bar row naming the harmonics produced by each Chebyshev order, measured from the curve above. A fourth shaper draws an electric-piano pickup. Its distance controls how far the transfer bends, while its alignment determines whether it produces even harmonics or only odd ones. That shaper runs in reverse: the audio path's waveshaper table is filled from the same function this plot displays, rather than the plot being transcribed from shipped audio. Feed samples to any treatment to brighten the part of the curve the signal is exercising. This shows which amplitudes are arriving, a question a static curve cannot answer.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shaper | { kind: "drive"; amount } | { kind: "crush"; bits; quantizer?; rateRatio? } | { kind: "chebyshev"; order } | — | The curve to draw, and what picks the default treatment. Each variant is the formulation the matching audio stage runs, pinned bit-identical to it in the lib's tests. |
| min / max | number | -1 / 1 | The amplitude window both axes cover. |
| staircase | boolean | — | Draw treads and risers. Defaults to true for a crush shaper and false otherwise. This avoids inventing levels with a staircase over a continuous curve or erasing levels with a polyline over a quantiser. Above 128 treads, the curve is drawn instead. |
| showHarmonics | boolean | — | Show the harmonic-weight bar row. Defaults to true for a chebyshev shaper. Bars in antiphase are drawn hollow rather than rectified. |
| harmonicAmplitude | number | 0.85 | Amplitude of the sine the row is measured with. At exactly 1 a Chebyshev order produces one harmonic and nothing else; just below it the n, n-2, n-4 ladder appears, which is what real material gets. |
| maxHarmonics | number | 24 | Draw the strongest partials first. Truncating by harmonic number could leave the row empty where it matters, since a high order's only partial may be high. |
| analyser | AnalyserNode | null | — | Live input samples for the operating-region overlay. Read-only. |
| getData | (target: Float32Array) => boolean | void | — | Fill the frame with input samples each frame. This is the getData form used by the kit's other live displays, allowing a worklet or test harness to drive the overlay without Web Audio. |
| region | { min, max } | null | — | Supply the exercised region directly with the driven form. It takes precedence over any live source. |
| regionDecay | number | 1.2 | How fast the region's edges fall back toward silence, in amplitude per second. The measurement has no memory; without a decay the overlay flickers on anything but a steady tone. |
| color | string | — | Override the 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.