KQ-1463 · PIXEL/SNOWFALL

Pixel Snowfall

A background of snow drawn as pixel art at three depths over a dithered sky, far flakes single dim cells and near ones small crosses swaying hardest in the wind, settling into a drift along the bottom edge that banks into rounded dunes and slowly melts. The pointer is a wind source that blows harder the faster it moves, and a press bursts a gust — a critically damped impulse on the springs.drift constants — that throws the nearby flakes outward and scours a crater in the drift whose snow sprays up and lands again. Keyboard focus on a control inside puffs a softer gust from it.

KQ-1463 · PIXEL/SNOWFALL

Coldbrook Lodge

First snow, first lift

Cabins from the second week of December

wind 0.25 · 3 px snow

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/pixel-snowfall

Props

children: React.ReactNode; default —; The content in front of the snow: a hero line, a heading, a call to action.
density: number; default 0.5; How hard it snows, 0 (a few flakes) to 1 (a heavy fall), set per area so every size snows alike.
wind: number; default 0.25; The steady wind, -1 (hard left) to 1 (hard right); gusts ride on it.
pixel: number; default 3; CSS px per pixel of snow, 2 to 6.
speed: number; default 1; How fast the snow falls, 0.25 to 2.
gusts: number; default 0.5; How strong the passing gusts are, 0 (steady air) to 1.
layers: number; default 3; How many depths of snow fall: 1 (one), 2 (near and middle) or 3 (far, middle, near).
drift: number; default 0.5; How deep the drift along the bottom may bank, 0 (none) to 1.
melt: number; default 0.4; How quickly the drift melts back, 0 (it only grows to its limit) to 1.
color: string; default "var(--accent-bright)"; The cold tint in the sky, the shadows and the flakes, any CSS colour.
interactive: boolean; default true; The pointer is a wind source and a press bursts a gust; keyboard focus puffs one from the control.
pointerStrength: number; default 0.7; How hard the hand blows and how strong a gust is, 0 to 1.
paused: boolean; default false; Hold the snow still in the air; the hand is ignored.
seed: number; default 1; Seeds where every flake starts and the drift's first shape.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onGust: () => void; default —; Fires when a press (or keyboard focus) bursts a gust.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer starts (true) or stops (false) blowing on the snow.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content in front of the snow: a hero line, a heading, a call to action.
density	number	0.5	How hard it snows, 0 (a few flakes) to 1 (a heavy fall), set per area so every size snows alike.
wind	number	0.25	The steady wind, -1 (hard left) to 1 (hard right); gusts ride on it.
pixel	number	3	CSS px per pixel of snow, 2 to 6.
speed	number	1	How fast the snow falls, 0.25 to 2.
gusts	number	0.5	How strong the passing gusts are, 0 (steady air) to 1.
layers	number	3	How many depths of snow fall: 1 (one), 2 (near and middle) or 3 (far, middle, near).
drift	number	0.5	How deep the drift along the bottom may bank, 0 (none) to 1.
melt	number	0.4	How quickly the drift melts back, 0 (it only grows to its limit) to 1.
color	string	"var(--accent-bright)"	The cold tint in the sky, the shadows and the flakes, any CSS colour.
interactive	boolean	true	The pointer is a wind source and a press bursts a gust; keyboard focus puffs one from the control.
pointerStrength	number	0.7	How hard the hand blows and how strong a gust is, 0 to 1.
paused	boolean	false	Hold the snow still in the air; the hand is ignored.
seed	number	1	Seeds where every flake starts and the drift's first shape.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onGust	() => void	—	Fires when a press (or keyboard focus) bursts a gust.
onActiveChange	(active: boolean) => void	—	Fires when the pointer starts (true) or stops (false) blowing on the snow.
className	string	"h-full w-full"	Sizes and shapes the box.