KQ-1803 · FORECAST/GLOW

Forecast Glow

A soft, heavily blurred aurora over dark hills and a still lake whose strength follows an hourly activity forecast: the glow is computed per pixel into a small buffer and left to the browser to scale and blur, a few slow curtains rising from behind the ridge, fading upward and mirrored dimmer in the water. The timeline beneath, one bar per hour coloured by its reading, is a slider through the night: a drag moves the playhead 1:1, a release projects the throw and glides to a quarter hour on springs.glide with the release velocity, and the sky follows on springs.drift's constants, growing brighter and taller and shifting from its quiet colour toward its peak colour while the hour and the reading ride the playhead above. Arrow keys step a quarter hour, Shift and the Page keys an hour, Home and End go to the first and last hour.

KQ-1803 · FORECAST/GLOW

Waylight Lodge · aurora watch

Tonight over the lake

23:00 · Kp 5.7 · strong · peak at 00:00

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

Props

forecast: number[]; default defaultForecast; Hourly activity, one reading per hour from startHour, on a 0 to maxReading scale.
startHour: number; default 18; The clock hour of the first reading.
value / defaultValue: number; default 5; The position on the timeline in hours from the first reading, controlled or initial.
onValueChange: (value: number) => void; default —; Fires from the drag or key that moved the timeline, in quarter hours from the first reading.
intensity: number; default 0.7; How bright the glow can get, 0 to 1.
blur: number; default 0.6; How soft the glow is, 0 (soft) to 1 (a haze): the buffer's resolution and the blur radius.
palette: "polar" | "violet" | "teal" | "mono"; default "polar"; The glow's colours from quiet to the peak.
colors: [string, string, string]; default —; Colours of your own: the base of a quiet glow, its middle, and the top at the peak; overrides palette.
maxReading: number; default 9; The top of the reading scale.
format: (reading: number) => string; default —; Formats a reading for the readout and assistive technology; defaults to "Kp 5.3".
describe: (reading: number) => string; default —; Names a reading; defaults to quiet, active, strong and storm.
drift: number; default 0.5; How fast the curtains drift, 0 (still) to 1.
reflection: boolean; default true; A lake under the hills that mirrors the glow.
paused: boolean; default false; Hold the curtains still.
seed: number; default 4; Seeds the stars, the hills and the curtains.
label: string; default "Forecast hour"; The timeline's accessible name.
disabled: boolean; default false; Shows the forecast but the timeline takes no input.
className: string; default "h-52 w-full"; Sizes the widget; the timeline takes 56px of it.

Prop	Type	Default	Description
forecast	number[]	defaultForecast	Hourly activity, one reading per hour from startHour, on a 0 to maxReading scale.
startHour	number	18	The clock hour of the first reading.
value / defaultValue	number	5	The position on the timeline in hours from the first reading, controlled or initial.
onValueChange	(value: number) => void	—	Fires from the drag or key that moved the timeline, in quarter hours from the first reading.
intensity	number	0.7	How bright the glow can get, 0 to 1.
blur	number	0.6	How soft the glow is, 0 (soft) to 1 (a haze): the buffer's resolution and the blur radius.
palette	"polar" \| "violet" \| "teal" \| "mono"	"polar"	The glow's colours from quiet to the peak.
colors	[string, string, string]	—	Colours of your own: the base of a quiet glow, its middle, and the top at the peak; overrides palette.
maxReading	number	9	The top of the reading scale.
format	(reading: number) => string	—	Formats a reading for the readout and assistive technology; defaults to "Kp 5.3".
describe	(reading: number) => string	—	Names a reading; defaults to quiet, active, strong and storm.
drift	number	0.5	How fast the curtains drift, 0 (still) to 1.
reflection	boolean	true	A lake under the hills that mirrors the glow.
paused	boolean	false	Hold the curtains still.
seed	number	4	Seeds the stars, the hills and the curtains.
label	string	"Forecast hour"	The timeline's accessible name.
disabled	boolean	false	Shows the forecast but the timeline takes no input.
className	string	"h-52 w-full"	Sizes the widget; the timeline takes 56px of it.