KQ-1791 · LUMEN/CHORUS

Lumen Chorus

A glowing horizon with thin filaments of light rising from it, one per value of a data series — a quiet equaliser drawn in light, each filament a hairline core with a soft glow, a bloom at its tip, a flare where it meets the horizon and a faint reflection on the wet ground below. When new values arrive every filament's height is a spring retargeted from where it stands, released left to right in a cascade; rise picks the spring from the calibration set (springs.drift, springs.glide, springs.snap) and the tips bloom with their speed and flare softly as they land. Hovering or arrowing reads one: it brightens, the rest dim, and a readout slides above it on springs.snap while the readings cross-fade in one cell; the chorus is a slider over the index, with Home and End.

KQ-1791 · LUMEN/CHORUS

Gaugeworks Solar · Array 3

Output by hour

24 hours · peak 3.8 kW at 14:00 · readings live

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/lumen-chorus

Props

values: number[]; default 24 seeded hourly readings; The series: one filament per value, left to right.
labels: string[]; default "1", "2", …; A label per value, read in the readout.
colors: string[]; default ["var(--accent-bright)", "var(--signal)"]; A ramp of CSS colours across the filaments, left to right.
warmth: number; default 0.2; The light's colour temperature: 0 is the ramp as given (cool), 1 warm amber and rose, mixed in oklab.
rise: number; default 0.5; How the filaments move to new values: 0 slow and soft (drift), 0.5 glide, 1 quick with one overshoot (snap).
spacing: number; default 0.75; How wide the chorus stands, as a share of the width it could fill, 0 to 1.
max: number; default the largest value × 1.1; The value at the top of the scale.
format: (value: number) => string; default one decimal place; Formats a value for the readout.
unit: string; default ""; Appended to every formatted value, e.g. "kW".
horizon: number; default 0.74; Where the horizon sits, as a share of the height, 0.55 to 0.9.
glow: number; default 0.6; How much the filaments and horizon glow, 0 to 1.
reflection: number; default 0.5; How strongly they reflect on the ground below the horizon, 0 to 1.
shimmer: number; default 0.35; Faint pulses of light climbing the filaments while idle, 0 to 1.
active / defaultActive: number | null; default null; The filament being read, by index, or null; controlled or uncontrolled.
onActiveChange: (index: number | null) => void; default —; Fires from the hover, key or focus that changed the filament being read.
paused: boolean; default false; Hold the shimmer still; new values still arrive.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Values"; The chorus's accessible name.
className: string; default —; Sizes the panel; it fills its parent by default.

Prop	Type	Default	Description
values	number[]	24 seeded hourly readings	The series: one filament per value, left to right.
labels	string[]	"1", "2", …	A label per value, read in the readout.
colors	string[]	["var(--accent-bright)", "var(--signal)"]	A ramp of CSS colours across the filaments, left to right.
warmth	number	0.2	The light's colour temperature: 0 is the ramp as given (cool), 1 warm amber and rose, mixed in oklab.
rise	number	0.5	How the filaments move to new values: 0 slow and soft (drift), 0.5 glide, 1 quick with one overshoot (snap).
spacing	number	0.75	How wide the chorus stands, as a share of the width it could fill, 0 to 1.
max	number	the largest value × 1.1	The value at the top of the scale.
format	(value: number) => string	one decimal place	Formats a value for the readout.
unit	string	""	Appended to every formatted value, e.g. "kW".
horizon	number	0.74	Where the horizon sits, as a share of the height, 0.55 to 0.9.
glow	number	0.6	How much the filaments and horizon glow, 0 to 1.
reflection	number	0.5	How strongly they reflect on the ground below the horizon, 0 to 1.
shimmer	number	0.35	Faint pulses of light climbing the filaments while idle, 0 to 1.
active / defaultActive	number \| null	null	The filament being read, by index, or null; controlled or uncontrolled.
onActiveChange	(index: number \| null) => void	—	Fires from the hover, key or focus that changed the filament being read.
paused	boolean	false	Hold the shimmer still; new values still arrive.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Values"	The chorus's accessible name.
className	string	—	Sizes the panel; it fills its parent by default.