KQ-1873 · RACK/AISLE

Rack Aisle

A dark aisle of server racks seen down its length in one-point perspective: cabinets on both sides lined with servers and tiny status lights, a ruled raised floor running to a lit doorway and a cable tray overhead. Every activity light blinks at a rate that follows its rack's load from data, a slow band of light sweeps down the aisle, and a rack whose data spikes flickers amber and pools amber light on the floor in front of it. Hovering a rack lifts it on springs.snap with a tooltip of its name and load and the pointer sways the view on springs.drift; the racks are a roving set of buttons — Up and Down walk the aisle, Left and Right cross it, Home and End jump to its ends, Enter pins and Escape unpins.

KQ-1873 · RACK/AISLE

Basinworks east · row 4

6 racks a side · mean load 49%

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/rack-aisle

Props

items: RackAisleItem[]; default generated R01…; The racks, two per row: even indices on the left, odd on the right, nearest row first; each { id, name?, load?, spike? }.
racks: number; default 6; How many racks stand on each side of the aisle, 3 to 10.
load: number; default 0.5; The aisle's load, 0 (idle winks) to 1 (busy chatter), for racks whose data gives none.
sweep: number; default 0.5; How bright the light sweeping down the aisle is, 0 (off) to 1.
sweepPeriod: number; default 7000; ms for one pass of the sweep down the aisle.
spikeAt: number; default 0.92; A load at or above this counts as a spike, 0 to 1.
units: number; default 11; Servers per rack, 6 to 16.
value / defaultValue: string | null; default null; The pinned rack's id; controlled or uncontrolled.
onValueChange: (id: string | null) => void; default —; Fires from the click or key that pinned or unpinned a rack.
parallax: number; default 0.5; How far the pointer sways the view down the aisle, 0 to 1.
ledColor: string; default a green pigment from the signal token; Activity lights, any CSS colour.
spikeColor: string; default an amber pigment from the warn token; A spiking rack's lights, any CSS colour.
roomColor: string; default a dim tint of the accent token, by theme; The room, any CSS colour; racks and floor are shaded from it.
site: string; default "Basinworks east, row 4"; Printed before a rack's name in its tooltip.
paused: boolean; default false; Hold every light where it is.
seed: number; default 1; Seeds the loads of racks without data and every light's rhythm.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Server aisle"; The aisle's accessible name.
disabled: boolean; default false; No hover, pin or keys.
className: string; default —; Sizes the aisle; it fills its parent by default.

Prop	Type	Default	Description
items	RackAisleItem[]	generated R01…	The racks, two per row: even indices on the left, odd on the right, nearest row first; each { id, name?, load?, spike? }.
racks	number	6	How many racks stand on each side of the aisle, 3 to 10.
load	number	0.5	The aisle's load, 0 (idle winks) to 1 (busy chatter), for racks whose data gives none.
sweep	number	0.5	How bright the light sweeping down the aisle is, 0 (off) to 1.
sweepPeriod	number	7000	ms for one pass of the sweep down the aisle.
spikeAt	number	0.92	A load at or above this counts as a spike, 0 to 1.
units	number	11	Servers per rack, 6 to 16.
value / defaultValue	string \| null	null	The pinned rack's id; controlled or uncontrolled.
onValueChange	(id: string \| null) => void	—	Fires from the click or key that pinned or unpinned a rack.
parallax	number	0.5	How far the pointer sways the view down the aisle, 0 to 1.
ledColor	string	a green pigment from the signal token	Activity lights, any CSS colour.
spikeColor	string	an amber pigment from the warn token	A spiking rack's lights, any CSS colour.
roomColor	string	a dim tint of the accent token, by theme	The room, any CSS colour; racks and floor are shaded from it.
site	string	"Basinworks east, row 4"	Printed before a rack's name in its tooltip.
paused	boolean	false	Hold every light where it is.
seed	number	1	Seeds the loads of racks without data and every light's rhythm.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Server aisle"	The aisle's accessible name.
disabled	boolean	false	No hover, pin or keys.
className	string	—	Sizes the aisle; it fills its parent by default.