KQ-1529 · POCKET/SKY

Pocket Sky

A small sky drawn in two WebGL2 passes with content above it: a few soft cumulus — clusters of puffs eroded by noise that travels with them — hang in a blue sky with the sun behind them, their bellies grey and their thin edges silver, and light shafts are walked toward the sun through every gap. Drag through it and your hand becomes wind: puffs near its path are dragged toward its velocity, those either side curl opposite ways, each stretches and thins with its speed and the clouds part so rays break through; then every puff gathers back into its cloud with springs.drift's damping ratio at the slower period `gather` sets. Arrow keys send a gust from each side, the same wind a drag makes.

KQ-1529 · POCKET/SKY

Coldbrook · Saturday

Fair, with a light westerly

calm · 45% cover

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/pocket-sky

Props

children: React.ReactNode; default —; The content above the sky: a hero line, a heading, a call to action.
coverage: number; default 0.45; How much of the sky the clouds cover, 0 (a couple of fair-weather clouds) to 1 (crowded).
sunHeight: number; default 0.55; The sun's height, 0 (on the horizon) to 1 (high in the sky).
windDrag: number; default 0.6; How hard the hand's wind pulls the clouds along, 0 to 1.
timeOfDay: "morning" | "day" | "evening"; default "day"; The light: a pale morning, a blue day or a warm evening.
sunX: number; default 0.64; Where the sun stands across the sky, 0 (left) to 1 (right).
rays: number; default 0.6; How strongly light shafts break through the gaps, 0 to 1.
drift: number; default 0.3; The sky's own breeze and the clouds' slow boil, 0 (still) to 1.
gather: number; default 4; About how long torn clouds take to gather themselves again, in seconds.
interactive: boolean; default true; Dragging, taps and keys make wind.
paused: boolean; default false; Hold the sky still; the hand's wind still moves it.
label: string; default "Push the clouds"; Names the sky for assistive technology.
seed: number; default 6; Seeds the clouds' shapes and places, so two skies never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onWindChange: (blowing: boolean) => void; default —; Fires when wind starts (true), from a drag, a tap or a key, and when the clouds have gathered again (false).
disabled: boolean; default false; Shows the sky but takes no input.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the sky: a hero line, a heading, a call to action.
coverage	number	0.45	How much of the sky the clouds cover, 0 (a couple of fair-weather clouds) to 1 (crowded).
sunHeight	number	0.55	The sun's height, 0 (on the horizon) to 1 (high in the sky).
windDrag	number	0.6	How hard the hand's wind pulls the clouds along, 0 to 1.
timeOfDay	"morning" \| "day" \| "evening"	"day"	The light: a pale morning, a blue day or a warm evening.
sunX	number	0.64	Where the sun stands across the sky, 0 (left) to 1 (right).
rays	number	0.6	How strongly light shafts break through the gaps, 0 to 1.
drift	number	0.3	The sky's own breeze and the clouds' slow boil, 0 (still) to 1.
gather	number	4	About how long torn clouds take to gather themselves again, in seconds.
interactive	boolean	true	Dragging, taps and keys make wind.
paused	boolean	false	Hold the sky still; the hand's wind still moves it.
label	string	"Push the clouds"	Names the sky for assistive technology.
seed	number	6	Seeds the clouds' shapes and places, so two skies never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onWindChange	(blowing: boolean) => void	—	Fires when wind starts (true), from a drag, a tap or a key, and when the clouds have gathered again (false).
disabled	boolean	false	Shows the sky but takes no input.
className	string	"h-full w-full"	Sizes and shapes the box.