BackgroundsNew
Boids Ecosystem
A live flock on canvas: birds stick together, avoid collisions and scatter from the cursor.
Customize
background
color
Based on Boids Ecosystem (MIT license) ยท Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 120 | How many birds in the flock. |
| agentShape | 'triangle' | 'dot' | "triangle" | Bird shape: triangle or dot. |
| cursorRadius | number | 90 | Distance at which the flock avoids the cursor, in pixels. |
| background | string | "#0a0a0a" | Background color as #rrggbb. Trails fade into it. |
| palette | string[] | "[\"#fafafa\", \"#d4d4d4\", \"#a3a3a3\", \"#737373\"]" | Bird colors, each gets a random one. |
| color | string | โ | One flock colour: birds get lighter and darker shades of it instead of palette. |
| attractors | { x: number; y: number; strength?: number; radius?: number }[] | โ | Points the flock is drawn to. x and y from 0 to 1. |
| agentsRef | RefObject<BoidAgent[] | null> | โ | Ref to the live bird array, to read their positions. |
| children | ReactNode | โ | Content on top of the background, such as a heading. |
| className | string | โ | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge