KQ-1525 · FIBRE/LAMP

Fibre Lamp

A fibre-optic lamp on one Canvas 2D layer: a fan of fibres rises from a weighted base, each dark along its length and bright only at its tip, and a colour wheel turning in the base shows through a lens window while each new colour climbs the fibres with a delay set by their length, blooming at the tips one after another. The pointer is a breeze the bundle leans away from; every fibre's lean is its own oscillator with springs.recoil's damping ratio and a length-set frequency, so the dome ripples back out of a gust, and a press or Enter advances the wheel one colour on springs.snap. The lamp is a button: Space or Enter advances the colour, Left and Right send a gust from either side.

KQ-1525 · FIBRE/LAMP

FernworksStrand lampSix colours, one wheel

turning · press to change colour

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/fibre-lamp

Props

strandCount: number; default 96; How many fibres rise from the base, 24 to 200.
sway: number; default 0.4; How much the bundle breathes on its own and how far a breeze bends it, 0 to 1.
hueSpeed: number; default 0.1; How fast the colour wheel turns by itself, in colours a second; 0 holds a colour.
colors: readonly string[]; default rose, amber, lime, teal, cobalt, violet; The colour wheel, as CSS colours in order round it; pigment, so they read the same in either theme.
names: readonly string[]; default ["Rose", "Amber", "Lime", "Teal", "Cobalt", "Violet"]; A name for each colour of the wheel, for the lamp's accessible name and announcements.
travel: number; default 1100; How long a new colour takes to climb to the longest tips, in ms.
spread: number; default 140; The fan's angle, in degrees.
reach: number; default 0.92; The fibres' length, 0.4 to 1 of the room above the base.
glow: number; default 0.7; How bright the tips are and how far their halo spreads, 0 to 1.
breeze: number; default 0.6; How hard the pointer's breeze pushes the bundle, 0 to 1.
defaultIndex: number; default 0; The wheel's colour when the lamp first lights, as an index into `colors`.
interactive: boolean; default true; The pointer, keys and presses reach the lamp.
paused: boolean; default false; Hold the bundle and the wheel still.
label: string; default "Fibre lamp"; Names the lamp for assistive technology; the colour is added to it.
sound: boolean; default false; Hum while a new colour climbs the fibres. Off unless asked for.
seed: number; default 5; Seeds how the fibres fan and sway, so two lamps never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onAdvance: (index: number) => void; default —; Fires when a press or a key advances the wheel, with the colour's index.
disabled: boolean; default false; Shows the lamp but takes no input.
className: string; default "h-56 w-full"; Sizes the box; give it a height.

Prop	Type	Default	Description
strandCount	number	96	How many fibres rise from the base, 24 to 200.
sway	number	0.4	How much the bundle breathes on its own and how far a breeze bends it, 0 to 1.
hueSpeed	number	0.1	How fast the colour wheel turns by itself, in colours a second; 0 holds a colour.
colors	readonly string[]	rose, amber, lime, teal, cobalt, violet	The colour wheel, as CSS colours in order round it; pigment, so they read the same in either theme.
names	readonly string[]	["Rose", "Amber", "Lime", "Teal", "Cobalt", "Violet"]	A name for each colour of the wheel, for the lamp's accessible name and announcements.
travel	number	1100	How long a new colour takes to climb to the longest tips, in ms.
spread	number	140	The fan's angle, in degrees.
reach	number	0.92	The fibres' length, 0.4 to 1 of the room above the base.
glow	number	0.7	How bright the tips are and how far their halo spreads, 0 to 1.
breeze	number	0.6	How hard the pointer's breeze pushes the bundle, 0 to 1.
defaultIndex	number	0	The wheel's colour when the lamp first lights, as an index into `colors`.
interactive	boolean	true	The pointer, keys and presses reach the lamp.
paused	boolean	false	Hold the bundle and the wheel still.
label	string	"Fibre lamp"	Names the lamp for assistive technology; the colour is added to it.
sound	boolean	false	Hum while a new colour climbs the fibres. Off unless asked for.
seed	number	5	Seeds how the fibres fan and sway, so two lamps never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onAdvance	(index: number) => void	—	Fires when a press or a key advances the wheel, with the colour's index.
disabled	boolean	false	Shows the lamp but takes no input.
className	string	"h-56 w-full"	Sizes the box; give it a height.