Murmuration

Surface study no. 04

Form that refuses to hold still.

A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.

About this component

Murmuration

A starling murmuration at dusk on Canvas 2D: thousands of birds fly as one dark cloud that folds, stretches, splits and rejoins like a living ink blot, following real flocking rules over a slow dusk sky. Where the flock folds it reads darker, where it thins it turns translucent. The cursor is a hawk: birds flee it and the panic travels through the flock as a wave before it closes again. Sky and bird colors, flock size, bird size, speed, cohesion, alignment, separation, wander and the hawk are all props. The bird count adapts to the device, it pauses offscreen and holds a still flock for reduced motion.

Usage

The import and the props worth knowing about, in one place.

import { Murmuration } from "@/components/beste/component/murmuration";

// As a layer behind content
<section className="relative min-h-[40rem]">
  <Murmuration className="absolute inset-0" />
  <div className="relative">...</div>
</section>

<Murmuration
  className="min-h-[32rem]"
  birds={2400}             // flock size, 200 to 2600
  skyTop="#1f2640"         // any CSS color
  skyHorizon="#f0a878"
  cohesion={0.7}           // a tighter, darker cloud
  wander={0.8}             // roams further and reshapes more
  hawk={0.9}               // flees the cursor harder
  hawkRadius={180}         // in pixels
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
birdsnumber—Birds in the flock, 200 to 2600. Fewer are flown on a device that can't keep up.
skyTopstring—Color at the top of the sky. Any CSS color.
skyHorizonstring—Color at the horizon.
birdColorstring—Color of the birds.
birdSizenumber—Size of each bird, 0 (specks) to 1 (larger marks).
speednumber—Flight speed, 1 is the default pace.
cohesionnumber—How strongly birds close in on their neighbors, 0 to 1.
alignmentnumber—How strongly birds match their neighbors' heading, 0 to 1.
separationnumber—How strongly birds keep their personal space, 0 to 1.
wandernumber—How far the flock roams and reshapes across the sky, 0 to 1.
hawknumber—How hard birds flee the cursor, 0 to 1.
hawkRadiusnumber—Radius around the cursor that birds flee, in pixels.
interactiveboolean—The cursor acts as a hawk.
pausedboolean—Freeze the flock where it is.
classNamestring—
childrenReactNode—

More Background components

View all Background