KQ-1632 · HARMONIC/BANDS

Harmonic Bands

Layered strata of colour whose top edges are one travelling wave, the sum of a few harmonics of a fundamental, each tuned by a small vertical fader beneath; every band trails the one above by a phase lag, and dispersion decides whether the shape travels rigidly or keeps re-forming as each harmonic runs at its own speed. A change morphs the shape band by band on the glide spring, each lower band taking the new target a cascade step after the one above, while the palette slides with the spectrum from pale for a pure fundamental to deep when the upper harmonics lead. The faders follow a drag 1:1, rubber-band past either end and settle on snap with the release velocity, press on flick, and take the arrow, Page, Home and End keys.

KQ-1632 · HARMONIC/BANDS

Fieldline Radio · Station ident

Tune the morning chord

warm chord · 2f leads the overtones · drag a fader or use the arrow keys

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/harmonic-bands

Props

harmonics: number; default 4; How many harmonics shape the wave, and so how many faders sit beneath it, 2 to 6.
palette: "dusk" | "tide" | "ember" | "moss" | string[]; default "dusk"; The colours the bands are drawn from, pale to deep: a preset, or two to eight CSS colours of your own.
flow: number; default 1; How fast the waves travel across the frame, 0 (held still) to 2.
value / defaultValue: number[]; default [1, 0.45, 0.2, 0.1, 0.06, 0.03]; Each harmonic's level, 0 to 1, fundamental first; controlled or initial.
onValueChange: (value: number[]) => void; default —; Fires from the fader or key that changed a level, with every level.
bands: number; default 5; How many strata of colour are stacked, 3 to 8.
amplitude: number; default 0.6; How tall the crests stand, 0 (flat strata) to 1 (crests reaching the band above).
cycles: number; default 1.25; How many waves of the fundamental span the frame, 0.5 to 3.
dispersion: number; default 0.4; 0 moves the whole shape rigidly; 1 lets every harmonic run at its own deep-water speed, so the shape keeps re-forming.
lag: number; default 0.35; How far each lower band trails the one above, in phase and in the morph's cascade, 0 to 1.
sheen: number; default 0.5; The sheen on each crest and the shading toward each band's foot, 0 (flat pigment) to 1.
controls: boolean; default true; Show the row of faders beneath the bands. Off, it is a display driven by value.
label: string; default "Harmonics"; The fader row's accessible name.
paused: boolean; default false; Hold the waves still.
seed: number; default 3; Seeds each harmonic's starting phase.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; The faders stop answering; they stay focusable and say so.
className: string; default "h-56 w-full"; Sizes the panel.

Prop	Type	Default	Description
harmonics	number	4	How many harmonics shape the wave, and so how many faders sit beneath it, 2 to 6.
palette	"dusk" \| "tide" \| "ember" \| "moss" \| string[]	"dusk"	The colours the bands are drawn from, pale to deep: a preset, or two to eight CSS colours of your own.
flow	number	1	How fast the waves travel across the frame, 0 (held still) to 2.
value / defaultValue	number[]	[1, 0.45, 0.2, 0.1, 0.06, 0.03]	Each harmonic's level, 0 to 1, fundamental first; controlled or initial.
onValueChange	(value: number[]) => void	—	Fires from the fader or key that changed a level, with every level.
bands	number	5	How many strata of colour are stacked, 3 to 8.
amplitude	number	0.6	How tall the crests stand, 0 (flat strata) to 1 (crests reaching the band above).
cycles	number	1.25	How many waves of the fundamental span the frame, 0.5 to 3.
dispersion	number	0.4	0 moves the whole shape rigidly; 1 lets every harmonic run at its own deep-water speed, so the shape keeps re-forming.
lag	number	0.35	How far each lower band trails the one above, in phase and in the morph's cascade, 0 to 1.
sheen	number	0.5	The sheen on each crest and the shading toward each band's foot, 0 (flat pigment) to 1.
controls	boolean	true	Show the row of faders beneath the bands. Off, it is a display driven by value.
label	string	"Harmonics"	The fader row's accessible name.
paused	boolean	false	Hold the waves still.
seed	number	3	Seeds each harmonic's starting phase.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	The faders stop answering; they stay focusable and say so.
className	string	"h-56 w-full"	Sizes the panel.