KQ-1435 · LIGHT/CORRIDOR

Light Corridor

A background that is an endless corridor of rounded frames of soft light receding to a vanishing point: the frames glide toward you and fade as they pass, each a fine bright line inside a wide glow, mirrored in the floor with a reflection that fades from its own contact and joined to the next by faint rails, with a pool of light where the corridor ends. The vanishing point follows the hand on springs.drift, so the corridor turns to look where you point, and a held press rushes it — the speed swelling on springs.drift to three and a half times with faint light trails — while the first time it is seen the lights come on from near to far in a cascade, each with a small flash. Keyboard focus on content inside it turns the corridor toward the focused element.

KQ-1435 · LIGHT/CORRIDOR

Gaugeworks 4.0

The way through is lit

Ships Thursday

lights coming on · near to far

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/light-corridor

Props

children: React.ReactNode; default —; The content above the corridor: a hero, a heading, a call to action.
speed: number; default 1; How fast the frames glide toward you, 0 to 2; 0 holds them still.
spacing: number; default 1; How far apart the frames stand down the corridor, 0.5 to 2.
color: string; default "var(--accent-bright)"; The light's colour, as a CSS colour.
farColor: string; default —; The colour the far end of the corridor glows, as a CSS colour; the same as color when left out.
backdrop: string; default "var(--background)"; The darkness the light shines in, as a CSS colour.
round: number; default 0.4; How round the frames' corners are, 0 (square) to 1 (pill).
glow: number; default 0.6; How softly each frame glows around its line of light, 0 to 1.
reflection: number; default 0.45; How strongly the frames are mirrored in the floor, 0 to 1.
depth: number; default 0.6; How far down the corridor you can see, 0 to 1.
vanish: readonly [number, number]; default [0.5, 0.5]; Where the corridor's far end rests, as fractions of the box's width and height.
interactive: boolean; default true; The vanishing point follows the hand (and keyboard focus inside), and holding a press rushes the corridor.
pointerStrength: number; default 0.6; How far the vanishing point follows the hand, 0 to 1.
seed: number; default 1; Picks the fixtures: the same seed dims and brightens the same frames.
paused: boolean; default false; Holds the frames still; the vanishing point still follows the hand.
intro: boolean; default true; Switch the lights on from near to far the first time the corridor is seen.
dpr: number; default 2; The highest device pixel ratio the corridor is drawn at, never above 2.
onIntroEnd: () => void; default —; Fires when the last light is on — at once when there is no intro (intro off, reduced motion).
onRushChange: (rushing: boolean) => void; default —; Fires when a held press starts the rush (true) and when it lets go (false).
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the corridor.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the corridor: a hero, a heading, a call to action.
speed	number	1	How fast the frames glide toward you, 0 to 2; 0 holds them still.
spacing	number	1	How far apart the frames stand down the corridor, 0.5 to 2.
color	string	"var(--accent-bright)"	The light's colour, as a CSS colour.
farColor	string	—	The colour the far end of the corridor glows, as a CSS colour; the same as color when left out.
backdrop	string	"var(--background)"	The darkness the light shines in, as a CSS colour.
round	number	0.4	How round the frames' corners are, 0 (square) to 1 (pill).
glow	number	0.6	How softly each frame glows around its line of light, 0 to 1.
reflection	number	0.45	How strongly the frames are mirrored in the floor, 0 to 1.
depth	number	0.6	How far down the corridor you can see, 0 to 1.
vanish	readonly [number, number]	[0.5, 0.5]	Where the corridor's far end rests, as fractions of the box's width and height.
interactive	boolean	true	The vanishing point follows the hand (and keyboard focus inside), and holding a press rushes the corridor.
pointerStrength	number	0.6	How far the vanishing point follows the hand, 0 to 1.
seed	number	1	Picks the fixtures: the same seed dims and brightens the same frames.
paused	boolean	false	Holds the frames still; the vanishing point still follows the hand.
intro	boolean	true	Switch the lights on from near to far the first time the corridor is seen.
dpr	number	2	The highest device pixel ratio the corridor is drawn at, never above 2.
onIntroEnd	() => void	—	Fires when the last light is on — at once when there is no intro (intro off, reduced motion).
onRushChange	(rushing: boolean) => void	—	Fires when a held press starts the rush (true) and when it lets go (false).
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the corridor.