KQ-1470 · POLLEN/FLOW

Pollen Flow

A background of fine specks carried on a slow breeze: a steady current plus the curl of two octaves of drifting noise, so the specks swirl and braid but never pile into knots. Each speck has a little inertia and leaves a short trail that tapers and fades behind it, and three sizes give the cloud depth. The air eddies round the hand, the eddy's place following on springs.glide and its strength arriving on springs.drift; a press shakes pollen loose, the oldest specks reborn at the press in a bright little cloud the air's drag takes into the current, and keyboard focus on a control inside brings the eddy there and shakes a smaller cloud from it.

KQ-1470 · POLLEN/FLOW

Fernworks Seed Co.

Spring sowing has started

Wildflower mixes for a sunny bank

pollen · 1600 specks · trails 0.50

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/pollen-flow

Props

children: React.ReactNode; default —; The content on top of the current: a hero line, a heading, a call to action.
count: number; default 1600; How many specks fill a 760 by 232 box, 50 to 5000; larger and smaller boxes scale it by area.
trail: number; default 0.5; How long the fading trails run behind the specks, 0 (bare specks) to 1.
colors: "pollen" | "dusk" | "sea" | "ink" | string | readonly string[]; default "pollen"; The specks' colours: a named palette, or up to three CSS colours.
speed: number; default 0.6; How fast the breeze blows, 0 (still air) to 2.
scale: number; default 170; The size of an eddy in the air, px.
turbulence: number; default 0.55; How much the air swirls on top of the steady breeze, 0 (a straight current) to 1.
wind: number; default -8; Where the breeze blows, degrees anticlockwise from rightward.
size: number; default 1.6; The specks' size, px.
interactive: boolean; default true; The air eddies round the pointer and keyboard focus, and a press shakes pollen loose.
pointerStrength: number; default 0.6; How hard the hand turns the air, 0 to 1.
radius: number; default 110; How far the hand's eddy reaches, px.
paused: boolean; default false; Hold the air still: the specks stop where they are.
seed: number; default 1; Seeds the specks and the air, so two currents never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) turning the air.
onShake: () => void; default —; Fires when a press or keyboard focus shakes pollen loose.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the current: a hero line, a heading, a call to action.
count	number	1600	How many specks fill a 760 by 232 box, 50 to 5000; larger and smaller boxes scale it by area.
trail	number	0.5	How long the fading trails run behind the specks, 0 (bare specks) to 1.
colors	"pollen" \| "dusk" \| "sea" \| "ink" \| string \| readonly string[]	"pollen"	The specks' colours: a named palette, or up to three CSS colours.
speed	number	0.6	How fast the breeze blows, 0 (still air) to 2.
scale	number	170	The size of an eddy in the air, px.
turbulence	number	0.55	How much the air swirls on top of the steady breeze, 0 (a straight current) to 1.
wind	number	-8	Where the breeze blows, degrees anticlockwise from rightward.
size	number	1.6	The specks' size, px.
interactive	boolean	true	The air eddies round the pointer and keyboard focus, and a press shakes pollen loose.
pointerStrength	number	0.6	How hard the hand turns the air, 0 to 1.
radius	number	110	How far the hand's eddy reaches, px.
paused	boolean	false	Hold the air still: the specks stop where they are.
seed	number	1	Seeds the specks and the air, so two currents never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) turning the air.
onShake	() => void	—	Fires when a press or keyboard focus shakes pollen loose.
className	string	"h-full w-full"	Sizes and shapes the box.