KQ-1801 · SHOWER/RADIANT

Shower Radiant

A meteor shower over a dark conifer treeline: meteors appear at random round a radiant point and streak straight outward along fanning rays, short near the radiant where they come almost at you and long far from it, each brief and bright with a hot head, a tapering streak and a glowing train that lingers and spreads; now and then a slow fireball sheds fragments, lifts the sky and leaves a train that bends in the upper wind. Under the sky an hour scale with the night's activity curve is a real slider: dragging moves through the night 1:1 as the radiant climbs and the visible rate (the shower's rate, its activity and the radiant's altitude) rises toward the peak, and a release projects the throw and glides to a quarter hour on springs.glide with the release velocity. Arrow keys step a quarter hour, Shift and the Page keys an hour, Home and End go to dusk and dawn.

KQ-1801 · SHOWER/RADIANT

Coldbrook Dark Sky Park

The August shower, tonight

01:00about 42 an hour

01:00 · about 42 an hour · radiant 40° up

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/shower-radiant

Props

children: React.ReactNode; default —; A headline over the sky; it takes no pointer input. The root sets --shower-ink and --shower-faint for text on the night.
rate: number; default 100; The shower's zenithal hourly rate at its peak: meteors an hour with the radiant overhead.
train: number; default 0.5; How long a meteor's glowing train lingers and how far it spreads, 0 to 1.
tint: "ice" | "green" | "gold" | "rose"; default "ice"; The heads' colour and the trains' glow.
headColor: string; default —; A head colour of your own, any CSS colour; overrides tint.
hour / defaultHour: number; default 1; The hour of the night as a clock hour (1.5 is 01:30), controlled or initial.
onHourChange: (hour: number) => void; default —; Fires from the drag or key that moved the hour, with the new clock hour in quarter hours.
startHour: number; default 20; When the scale starts, as a clock hour.
endHour: number; default 5; When it ends, as a clock hour (the next morning if smaller than startHour).
peakHour: number; default 2.5; When the shower peaks, as a clock hour.
fireballs: number; default 0.3; How often a slow, bright fireball comes through, 0 (never) to 1.
speed: number; default 1; How fast meteors cross the sky, 0.5 to 2.
showRadiant: boolean; default true; Mark the radiant with a faint ring.
paused: boolean; default false; Hold the sky still.
seed: number; default 5; Seeds the stars, the trees and every meteor.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Hour of the night"; The hour scale's accessible name.
disabled: boolean; default false; Shows the sky but the scale takes no input.
className: string; default "h-[30rem] w-full"; Sizes the frame; the scale takes 76px of it.

Prop	Type	Default	Description
children	React.ReactNode	—	A headline over the sky; it takes no pointer input. The root sets --shower-ink and --shower-faint for text on the night.
rate	number	100	The shower's zenithal hourly rate at its peak: meteors an hour with the radiant overhead.
train	number	0.5	How long a meteor's glowing train lingers and how far it spreads, 0 to 1.
tint	"ice" \| "green" \| "gold" \| "rose"	"ice"	The heads' colour and the trains' glow.
headColor	string	—	A head colour of your own, any CSS colour; overrides tint.
hour / defaultHour	number	1	The hour of the night as a clock hour (1.5 is 01:30), controlled or initial.
onHourChange	(hour: number) => void	—	Fires from the drag or key that moved the hour, with the new clock hour in quarter hours.
startHour	number	20	When the scale starts, as a clock hour.
endHour	number	5	When it ends, as a clock hour (the next morning if smaller than startHour).
peakHour	number	2.5	When the shower peaks, as a clock hour.
fireballs	number	0.3	How often a slow, bright fireball comes through, 0 (never) to 1.
speed	number	1	How fast meteors cross the sky, 0.5 to 2.
showRadiant	boolean	true	Mark the radiant with a faint ring.
paused	boolean	false	Hold the sky still.
seed	number	5	Seeds the stars, the trees and every meteor.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Hour of the night"	The hour scale's accessible name.
disabled	boolean	false	Shows the sky but the scale takes no input.
className	string	"h-[30rem] w-full"	Sizes the frame; the scale takes 76px of it.