KQ-1459 · SHUTTER/GLOW

Shutter Glow

A background of vertical blinds built from real CSS 3D slabs, each with a front, a back and two edges turning on its long axis in one shared perspective, over a glow of light seen through the gaps and with the content on top: the fronts carry slices of one gradient and the backs slices of another, and a light from one side shades every face and puts a sheen where its reflection meets the eye. A wave of turning crosses the wall every interval, blind after blind turning half over on springs.snap with one crisp overshoot, staggered so the whole wall changes gradient inside 600 ms, and a press sends the wave out both ways from the blind under it while the blinds near the pointer part around the hand on their own snap springs. It is decoration and never takes focus; keyboard focus landing on a control inside parts the blinds around it and sends a wave from there.

KQ-1459 · SHUTTER/GLOW

Fernworks Interiors

Light, by the slat

Measured, cut and hung in a week

dawn · 14 blinds · 24°

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/shutter-glow

Props

children: React.ReactNode; default —; The content on top of the blinds: a hero line, a heading, a call to action.
blinds: number; default 14; How many blinds hang across the wall, 4 to 32.
angle: number; default 24; How far the blinds stand open at rest, degrees, 0 (closed) to 70.
palette: "dawn" | "harbor" | "cobalt" | "moss" | readonly string[]; default "dawn"; A named palette, or four CSS colours of your own: the front gradient's two ends, then the back's.
interval: number; default 5200; How often a wave of turning crosses the wall on its own, ms; 0 turns it only on a press.
depth: number; default 6; How thick each blind is, px: the dark edge a turning blind shows.
glow: number; default 0.6; The light behind the blinds, seen through the gaps, 0 (none) to 1.
lightAngle: number; default -20; Where the light falls from, degrees across the wall: negative from the left.
perspective: number; default 900; The viewer's distance for the 3D, px; smaller is more dramatic.
interactive: boolean; default true; The pointer and keyboard focus part the blinds, and a press sends a wave.
pointerStrength: number; default 0.6; How far the blinds near the hand turn away from it, 0 to 1.
radius: number; default 110; How far the hand reaches across the blinds, px.
paused: boolean; default false; No waves on their own; the hand still parts and turns them.
seed: number; default 1; Seeds how unevenly the blinds hang, so two walls never match.
onTurn: (face: "front" | "back") => void; default —; Fires when a wave starts, with the face the wall is turning to.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) parting the blinds.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the blinds: a hero line, a heading, a call to action.
blinds	number	14	How many blinds hang across the wall, 4 to 32.
angle	number	24	How far the blinds stand open at rest, degrees, 0 (closed) to 70.
palette	"dawn" \| "harbor" \| "cobalt" \| "moss" \| readonly string[]	"dawn"	A named palette, or four CSS colours of your own: the front gradient's two ends, then the back's.
interval	number	5200	How often a wave of turning crosses the wall on its own, ms; 0 turns it only on a press.
depth	number	6	How thick each blind is, px: the dark edge a turning blind shows.
glow	number	0.6	The light behind the blinds, seen through the gaps, 0 (none) to 1.
lightAngle	number	-20	Where the light falls from, degrees across the wall: negative from the left.
perspective	number	900	The viewer's distance for the 3D, px; smaller is more dramatic.
interactive	boolean	true	The pointer and keyboard focus part the blinds, and a press sends a wave.
pointerStrength	number	0.6	How far the blinds near the hand turn away from it, 0 to 1.
radius	number	110	How far the hand reaches across the blinds, px.
paused	boolean	false	No waves on their own; the hand still parts and turns them.
seed	number	1	Seeds how unevenly the blinds hang, so two walls never match.
onTurn	(face: "front" \| "back") => void	—	Fires when a wave starts, with the face the wall is turning to.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) parting the blinds.
className	string	"h-full w-full"	Sizes and shapes the box.