KQ-1464 · STORM/FRONT

Storm Front

A background of a heavy storm deck seen from beneath, rolling slowly in layered, domain-warped cloud over a pale band of rain, lit from inside by seeded lightning that crawls and branches through it: a dim leader, two or three return strokes and an afterglow, the light catching the undersides of every billow and the channel glimpsed only where the cloud thins. A click calls a strike at the pointer — a discharge crawling out both ways inside the cloud, or a stroke dropping from the base below it — with thunder after the flash when sound is on, and a faint charge gathers under the hand on springs with the springs.drift constants. Keyboard focus on a control inside calls a softer, silent discharge above it.

KQ-1464 · STORM/FRONT

Gaugeworks Forecast

Storms through the evening

Strikes within 12 km

6 flashes a minute · density 0.60

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/storm-front

Props

children: React.ReactNode; default —; The content under the storm: a hero line, a heading, a call to action.
rate: number; default 6; How many flashes the storm makes on its own, per minute, 0 to 20.
density: number; default 0.6; How heavy the cloud deck is, 0 (broken) to 1 (solid).
tint: string; default "var(--accent-bright)"; The storm's light and colour, any CSS colour; taken at a fixed lightness so both themes read it.
speed: number; default 1; How fast the cloud rolls, 0 (still) to 2.
base: number; default 0.62; Where the cloud base sits, as a fraction of the height from the top, 0.4 to 0.85.
rain: number; default 0.4; How much rain hangs from the base, 0 to 1.
intensity: number; default 1; How bright the lightning is, 0 to 1.5.
branches: number; default 0.6; How much each discharge branches, 0 (a single channel) to 1.
interactive: boolean; default true; A click calls lightning at the pointer and keyboard focus calls a discharge above a control; the pointer gathers a faint glow.
sound: boolean; default false; Thunder after a strike the visitor calls (never for the storm's own flashes). Off unless asked for.
paused: boolean; default false; Hold the cloud still; flashes already running finish, and no new ones start on their own.
seed: number; default 1; Seeds the cloud and every flash the storm makes.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onStrike: (strike: StormStrike) => void; default —; Fires when lightning strikes, with where it was called and by whom.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content under the storm: a hero line, a heading, a call to action.
rate	number	6	How many flashes the storm makes on its own, per minute, 0 to 20.
density	number	0.6	How heavy the cloud deck is, 0 (broken) to 1 (solid).
tint	string	"var(--accent-bright)"	The storm's light and colour, any CSS colour; taken at a fixed lightness so both themes read it.
speed	number	1	How fast the cloud rolls, 0 (still) to 2.
base	number	0.62	Where the cloud base sits, as a fraction of the height from the top, 0.4 to 0.85.
rain	number	0.4	How much rain hangs from the base, 0 to 1.
intensity	number	1	How bright the lightning is, 0 to 1.5.
branches	number	0.6	How much each discharge branches, 0 (a single channel) to 1.
interactive	boolean	true	A click calls lightning at the pointer and keyboard focus calls a discharge above a control; the pointer gathers a faint glow.
sound	boolean	false	Thunder after a strike the visitor calls (never for the storm's own flashes). Off unless asked for.
paused	boolean	false	Hold the cloud still; flashes already running finish, and no new ones start on their own.
seed	number	1	Seeds the cloud and every flash the storm makes.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onStrike	(strike: StormStrike) => void	—	Fires when lightning strikes, with where it was called and by whom.
className	string	"h-full w-full"	Sizes and shapes the box.