KQ-1631 · SNOW/DRIVE

Snow Drive

Driving at night into falling snow, in Canvas 2D: every flake is a point in 3D falling at its own rate, swaying on its own phase, pushed by the wind and coming at you at the car's speed, and it is lit only by the headlights, so flakes appear out of the dark as they enter the beams and vanish at their edges, far ones points, near ones soft discs, each streaking from where it was one exposure ago. Reflector posts flash past on a snow-covered road, the beams glow in the snowy air, and a few flakes land on the windscreen and melt. Holding a press or Space eases the speed up on the springs.glide constants until the flakes stretch into long streaks, and letting go eases back to the cruise on the springs.drift constants; the pointer slides the vanishing point after it and bends the road, arrow keys steer and Home straightens.

KQ-1631 · SNOW/DRIVE

Coldbrook Winter Roads

Drive home safe

cruising · 60 km/h · hold to speed 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/snow-drive

Props

snowfall: number; default 0.55; How hard it snows, 0 (a few flakes) to 1 (a blizzard).
speed: number; default 60; The cruising speed, in km/h.
beam: "halogen" | "xenon" | "amber" | "led" | string; default "halogen"; The headlights: a named lamp or any CSS colour.
boost: number; default 2.8; How much faster the car goes while held, 1 to 4 times the cruise.
wind: number; default 0.25; The crosswind, -1 (from the right) to 1 (from the left).
steer: number; default 0.6; How far the pointer steers the view, 0 (not at all) to 1.
road: boolean; default true; Draw the road, its banks and the reflector posts.
glass: boolean; default true; Let a few flakes land on the windscreen and melt.
speedometer: boolean; default true; Show the speed in the corner.
paused: boolean; default false; Hold the scene still on one frame.
interactive: boolean; default true; Pointer and keys drive.
onBoostChange: (boosting: boolean) => void; default —; Fires from the press or key that starts or ends a burst of speed.
children: React.ReactNode; default —; Content over the scene, in a layer of its own whose tokens are the dark theme's.
label: string; default "Night drive in falling snow"; Names the scene for assistive technology.
seed: number; default 3; Seeds the snow.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the scene still and takes no input.
className: string; default "h-56 w-full"; Sizes the scene.

Prop	Type	Default	Description
snowfall	number	0.55	How hard it snows, 0 (a few flakes) to 1 (a blizzard).
speed	number	60	The cruising speed, in km/h.
beam	"halogen" \| "xenon" \| "amber" \| "led" \| string	"halogen"	The headlights: a named lamp or any CSS colour.
boost	number	2.8	How much faster the car goes while held, 1 to 4 times the cruise.
wind	number	0.25	The crosswind, -1 (from the right) to 1 (from the left).
steer	number	0.6	How far the pointer steers the view, 0 (not at all) to 1.
road	boolean	true	Draw the road, its banks and the reflector posts.
glass	boolean	true	Let a few flakes land on the windscreen and melt.
speedometer	boolean	true	Show the speed in the corner.
paused	boolean	false	Hold the scene still on one frame.
interactive	boolean	true	Pointer and keys drive.
onBoostChange	(boosting: boolean) => void	—	Fires from the press or key that starts or ends a burst of speed.
children	React.ReactNode	—	Content over the scene, in a layer of its own whose tokens are the dark theme's.
label	string	"Night drive in falling snow"	Names the scene for assistive technology.
seed	number	3	Seeds the snow.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the scene still and takes no input.
className	string	"h-56 w-full"	Sizes the scene.