KQ-1440 · GLOW/RAIN

Glow Rain

A background of soft light falling slowly: each streak sits at its own depth, far ones thin, dim and slow, near ones longer, wider and blurred as if out of focus, each a bright head with a body fading into a faint trail, and now and then a brighter one. The rain leans with the wind, near streaks more than far, and the pointer sets the wind while a quick sweep adds a gust, all through one spring with the springs.drift constants so it swings in and settles without a bounce. A press drops a bright streak that lands where you touched; keyboard focus on a control inside leans the rain toward it and drops one above it.

KQ-1440 · GLOW/RAIN

Coldbrook Night Market

Open late, rain or shine

Fridays from 18:00, under the arches

light rain · leaning 6° east

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

Props

children: React.ReactNode; default —; The content on top of the rain: a hero line, a heading, a call to action.
density: number; default 0.55; How many streaks, 0 to 1: about 30 to 200 on a wide card, scaled to the box's area.
speed: number; default 1; How fast it falls, 0.1 to 3.
color: "cobalt" | "amber" | "rose" | "mint" | string; default "cobalt"; The light's colour: a named one, or any CSS colour.
depth: number; default 0.6; Depth of field, 0 to 1: how much larger and blurrier the near streaks are.
length: number; default 70; A far streak's length, px; near ones are longer.
trail: number; default 0.5; How long the faint trail behind each streak runs, 0 to 1.
flare: number; default 0.4; How often a brighter streak falls, 0 to 1.
wind: number; default 6; The resting lean of the rain, degrees; positive leans it to the right.
interactive: boolean; default true; The pointer and keyboard focus lean the rain, and a press drops a bright streak.
pointerStrength: number; default 0.6; How far the pointer can lean the rain, 0 to 1 (up to 24°).
paused: boolean; default false; Stop the fall; the wind still answers the pointer.
seed: number; default 1; Seeds where every streak starts and how deep it sits.
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) leaning the rain.
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 rain: a hero line, a heading, a call to action.
density	number	0.55	How many streaks, 0 to 1: about 30 to 200 on a wide card, scaled to the box's area.
speed	number	1	How fast it falls, 0.1 to 3.
color	"cobalt" \| "amber" \| "rose" \| "mint" \| string	"cobalt"	The light's colour: a named one, or any CSS colour.
depth	number	0.6	Depth of field, 0 to 1: how much larger and blurrier the near streaks are.
length	number	70	A far streak's length, px; near ones are longer.
trail	number	0.5	How long the faint trail behind each streak runs, 0 to 1.
flare	number	0.4	How often a brighter streak falls, 0 to 1.
wind	number	6	The resting lean of the rain, degrees; positive leans it to the right.
interactive	boolean	true	The pointer and keyboard focus lean the rain, and a press drops a bright streak.
pointerStrength	number	0.6	How far the pointer can lean the rain, 0 to 1 (up to 24°).
paused	boolean	false	Stop the fall; the wind still answers the pointer.
seed	number	1	Seeds where every streak starts and how deep it sits.
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) leaning the rain.
className	string	"h-full w-full"	Sizes and shapes the box.