KQ-1447 · WINDOW/SHAFTS

Window Shafts

A background of a wall in shade with late sun coming through a tall window that is never seen: the light lands as a skewed patch, the window's image along the sun's direction with soft shadow bars from its mullions and transoms, the beams cross the air as parallel shafts broken by drifting haze, and dust glints only where a beam catches it, while the sun sways and slides so the bars drift. The pointer moves the sun, turning its angle and changing the patch's length on springs.drift, and a press stirs the dust into a swirl through a critically damped drift-spring impulse; keyboard focus on a control inside moves the sun toward it with a softer stir.

KQ-1447 · WINDOW/SHAFTS

Waylight Rooms

The light comes in at four

Twelve rooms facing west

sun at 38° · warm light

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/window-shafts

Props

children: React.ReactNode; default —; The content in the room: a hero line, a heading, a call to action.
angle: number; default 38; The sun's angle from vertical, degrees: low numbers fall steeply, high ones rake across.
warmth: number; default 0.6; The light's colour, 0 (neutral daylight) to 1 (deep amber); the shade cools against it.
dust: number; default 0.5; How much dust hangs in the air and glints in the beams, 0 to 1.
panes: number; default 3; Columns of glass in the window, 2 to 5.
rows: number; default 2; Rows of glass in the window, 1 to 4.
position: number; default 0.64; Where the patch of light lands across the box, 0 (left) to 1 (right); narrow boxes push it further right.
softness: number; default 0.4; How soft the shadow bars' edges are, 0 (crisp) to 1.
haze: number; default 0.5; How plainly the beams show in the air, 0 to 1.
speed: number; default 1; How fast the sun and the dust move, 0 (still) to 2.
interactive: boolean; default true; The pointer and keyboard focus move the sun, and a press stirs the dust.
pointerStrength: number; default 0.6; How far the hand moves the sun and how hard a press stirs the dust, 0 to 1.
paused: boolean; default false; Hold the sun and the dust still; the hand still moves the sun.
seed: number; default 1; Seeds the dust and the haze, so two rooms never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) moving the sun.
onStir: () => void; default —; Fires when a press (or keyboard focus) stirs the dust.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content in the room: a hero line, a heading, a call to action.
angle	number	38	The sun's angle from vertical, degrees: low numbers fall steeply, high ones rake across.
warmth	number	0.6	The light's colour, 0 (neutral daylight) to 1 (deep amber); the shade cools against it.
dust	number	0.5	How much dust hangs in the air and glints in the beams, 0 to 1.
panes	number	3	Columns of glass in the window, 2 to 5.
rows	number	2	Rows of glass in the window, 1 to 4.
position	number	0.64	Where the patch of light lands across the box, 0 (left) to 1 (right); narrow boxes push it further right.
softness	number	0.4	How soft the shadow bars' edges are, 0 (crisp) to 1.
haze	number	0.5	How plainly the beams show in the air, 0 to 1.
speed	number	1	How fast the sun and the dust move, 0 (still) to 2.
interactive	boolean	true	The pointer and keyboard focus move the sun, and a press stirs the dust.
pointerStrength	number	0.6	How far the hand moves the sun and how hard a press stirs the dust, 0 to 1.
paused	boolean	false	Hold the sun and the dust still; the hand still moves the sun.
seed	number	1	Seeds the dust and the haze, so two rooms never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) moving the sun.
onStir	() => void	—	Fires when a press (or keyboard focus) stirs the dust.
className	string	"h-full w-full"	Sizes and shapes the box.