KQ-1244 · STAINED/GLASS

Stained Glass

A backdrop of leaded glass whose irregular panes, cut from a seed, glow where the light falls: the pointer is the light, trailing the hand on the glide spring and drifting home to its resting place on the drift spring, while the panes' own colours spill over the leads as soft cast light and the came glints along the side that faces it. A new seed, pane count or palette re-leads the window from the light outward, and frames run only while the light moves and the window is on screen. The light is a real 2D slider under the content: arrow keys move it, Home and End go to the side edges, Page Up and Page Down to the top and bottom.

KQ-1244 · STAINED/GLASS

Fernworks Glass Studio

Open studio, Saturday

Leading, cutting and firing from ten till four

light at rest · cathedral · 36 panes

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/stained-glass

Props

children: React.ReactNode; default —; What sits over the window: a hero, a heading, a call to action.
panes: number; default 36; How many panes the window is cut into, 12 to 60.
glow: number; default 0.6; How hot the light is, 0 to 1: a soft wash, or a bright core whose coloured light spills over the leads.
palette: "cathedral" | "sea" | "dusk"; default "cathedral"; The glass.
seed: number; default 1; Leads the window: the same seed always cuts the same panes. A new one re-leads it, from the light outward.
rest: { x: number; y: number }; default { x: 0.8, y: 0.2 }; Where the light rests when nobody is moving it, as fractions of the box.
onLightChange: (light: { x: number; y: number } | null) => void; default —; Fires when the visitor moves the light (pointer, touch or keys), and with null when it goes back to rest.
interactive: boolean; default true; Let the pointer and the keyboard move the light. Off, the window is decoration only: no tab stop, no pointer handling.
label: string; default "Light"; The light control's accessible name.
className: string; default "h-full w-full"; Sets the size.

Prop	Type	Default	Description
children	React.ReactNode	—	What sits over the window: a hero, a heading, a call to action.
panes	number	36	How many panes the window is cut into, 12 to 60.
glow	number	0.6	How hot the light is, 0 to 1: a soft wash, or a bright core whose coloured light spills over the leads.
palette	"cathedral" \| "sea" \| "dusk"	"cathedral"	The glass.
seed	number	1	Leads the window: the same seed always cuts the same panes. A new one re-leads it, from the light outward.
rest	{ x: number; y: number }	{ x: 0.8, y: 0.2 }	Where the light rests when nobody is moving it, as fractions of the box.
onLightChange	(light: { x: number; y: number } \| null) => void	—	Fires when the visitor moves the light (pointer, touch or keys), and with null when it goes back to rest.
interactive	boolean	true	Let the pointer and the keyboard move the light. Off, the window is decoration only: no tab stop, no pointer handling.
label	string	"Light"	The light control's accessible name.
className	string	"h-full w-full"	Sets the size.