HTML + CSSBackgrounds

Starling murmuration

Hundreds of birds fly together at dusk in shifting clouds and scatter away from the pointer as if it were a hawk, on canvas.

Settings

1x
1x
1

Code

<div class="pt-uvq16-murmuration"><canvas></canvas></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Where to use it

A flocking simulation in the spirit of the boids model. Each starling looks only at its close neighbours to align, stay together and keep some space, and a slow moving roost point pulls the whole flock across a dusk sky with a low sun and a dark tree line. The swirling shapes appear on their own, much like real murmurations.

The first color is the warm horizon, the second the upper sky and the third the birds and the ground. Density changes how many birds fly and speed how fast. Move the pointer into the flock and it splits around it like a hawk attack, then gathers again.