KQ-1391 · MURMURATION

Murmuration

A starling murmuration at dusk: a 3D boids flock seen in perspective, so the cloud folds over itself as it turns, with each bird darkening as it banks so waves of darkness roll through it. The pointer is a lure the flock wheels round, the lure trailing the hand on the drift spring's constants, and a click sends a hawk through whose fright passes bird to bird with a reaction delay, opening a hole that folds shut again. Focus shows the lure: Arrow keys move it, Enter or Space sends a hawk, Escape lets the flock drift.

KQ-1391 · MURMURATION

Fieldline · roost watch, 17:42

Starlings over the reed bed

drifting over the reeds · 900 birds

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/murmuration

Props

count: number; default 900; How many birds, 50 to 2,400.
attraction: number; default 0.5; How strongly the pointer draws the flock and wheels it round, 0 to 1.
speed: number; default 1; Flight speed, as a multiple of the natural pace (0.25 to 3).
cohesion: number; default 0.5; How tightly the birds keep together, 0 to 1.
alignment: number; default 0.6; How closely each bird matches its neighbours' heading, 0 to 1.
separation: number; default 0.5; How much room each bird keeps, 0 to 1.
orbit: number; default 64; The radius the flock wheels at around the pointer, px (held within the box's short side).
bird: number; default 1.6; A bird's size at middle depth, px.
scatter: number; default 0.6; How hard a passing hawk scatters the flock, 0 to 1.
color: string; default "var(--foreground)"; The birds' ink.
sky: boolean; default true; Paint a dusk sky behind the flock.
horizon: boolean; default true; Paint a reed bed along the bottom.
seed: number; default 7; The flock's starting formation and the reeds.
paused: boolean; default false; Hold the flock still.
interactive: boolean; default true; The pointer and the keyboard lead the flock and send hawks; false leaves it to itself.
dpr: number; default 2; The highest device pixel ratio drawn, capped at 2.
label: string; default "Starling flock"; The accessible name of the keyboard surface.
onHawk: () => void; default —; Fires when a hawk is sent: a click, a tap, Enter or Space.
onLeadChange: (leading: boolean) => void; default —; Fires when the pointer or the keys start (true) or stop (false) leading the flock.
children: React.ReactNode; default —; Content over the sky, in its own layer: a headline, a caption.
className: string; default "aspect-[2/1] w-full"; Size the box here.

Prop	Type	Default	Description
count	number	900	How many birds, 50 to 2,400.
attraction	number	0.5	How strongly the pointer draws the flock and wheels it round, 0 to 1.
speed	number	1	Flight speed, as a multiple of the natural pace (0.25 to 3).
cohesion	number	0.5	How tightly the birds keep together, 0 to 1.
alignment	number	0.6	How closely each bird matches its neighbours' heading, 0 to 1.
separation	number	0.5	How much room each bird keeps, 0 to 1.
orbit	number	64	The radius the flock wheels at around the pointer, px (held within the box's short side).
bird	number	1.6	A bird's size at middle depth, px.
scatter	number	0.6	How hard a passing hawk scatters the flock, 0 to 1.
color	string	"var(--foreground)"	The birds' ink.
sky	boolean	true	Paint a dusk sky behind the flock.
horizon	boolean	true	Paint a reed bed along the bottom.
seed	number	7	The flock's starting formation and the reeds.
paused	boolean	false	Hold the flock still.
interactive	boolean	true	The pointer and the keyboard lead the flock and send hawks; false leaves it to itself.
dpr	number	2	The highest device pixel ratio drawn, capped at 2.
label	string	"Starling flock"	The accessible name of the keyboard surface.
onHawk	() => void	—	Fires when a hawk is sent: a click, a tap, Enter or Space.
onLeadChange	(leading: boolean) => void	—	Fires when the pointer or the keys start (true) or stop (false) leading the flock.
children	React.ReactNode	—	Content over the sky, in its own layer: a headline, a caption.
className	string	"aspect-[2/1] w-full"	Size the box here.