Murmuration Flock
A starling murmuration over a plain background: hundreds of flapping, banking 3D birds that stretch into ribbons and ripple with turning waves. The flock streams into your word, a shape or your logo, lands on page elements you mark, and swerves around (or flees) your cursor on a new random route.
Canvas 2D0 deps1 file · 49 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useImperativeHandle, useRef } from "react";
import type { CSSProperties, ReactNode, Ref } from "react";
/**
* MurmurationFlock — a flock of birds flying over a plain background. It can
* gather into a word, a shape or your logo.
*
* Every bird is a 3D boid: it keeps its distance from its nearest
* neighbours, matches their heading and drifts toward them, so the flock
* stretches into ribbons, folds and pours like a starling murmuration.
* Turning waves run through the flock the way they do through real
* starlings: birds bank in unison and dark and light bands sweep the cloud.
*
* Each bird is a 3D silhouette seen in perspective. The wing tip lags the
* elbow, birds glide between bursts of flapping and bank into their turns,
* wing undersides show in a paler tone, and far birds fade into the
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Every bird is a boid in a 3D box: it keeps its distance from its nearest neighbours, matches their heading and drifts toward them, while the whole flock steers toward a randomly chosen waypoint as one body, so it stretches into ribbons and pours across the frame like starlings at dusk. Turning waves run through it the way they do through real murmurations: bands of birds bank in unison and dark and light stripes sweep the cloud. Each bird is a 3D silhouette in perspective, with a wingbeat whose tip lags the elbow, glides between bursts of flapping, banks into its turns and shows a paler wing underside as it tilts; far birds fade into the background like haze. Give it forms, words (two lines with a slash), built-in shapes or your own logo as an image or SVG, and the flock streams in from every side, breathes while it holds, then breaks out in a wave and flies on. Run formations on a loop, each time the section scrolls into view, or from your own code through apiRef (form, release, scatter), say to spell a thank-you after a form is sent. Hover and the nearest birds swerve and wrap around the cursor, or in predator mode the cursor is a hawk the flock splits to flee; either way the flock turns onto a new random route, formations part around you, and a click is a clap that scatters everything nearby. It runs on a plain canvas with no WebGL, fills all birds in twelve paths per frame, flies fewer birds on small screens and slow devices, pauses off-screen and in hidden tabs, and takes any background and bird colour.
Curator’s note
Pro because it is a real flocking simulation, not a looped animation: hundreds of 3D boids on a spatial grid, perspective-drawn birds that flap, glide and bank, turning waves, a random route planner, a startle and predator model that spreads panic through the flock, a formation engine that lays any word, shape or logo out in birds, and a frame governor that keeps it smooth on phones.
