Schooling Fish

Schooling Fish

A school of fish swimming through your canvas, driven by the classic Boids algorithm. Each fish independently balances cohesion, alignment, and separation — resulting in lifelike flocking behavior with no scripted paths. Move your cursor and the whole school reacts, flowing away and re-forming.

How it works

Every fish scans its neighbors within a fixed radius using a spatial hash grid for performance. Three forces are computed: cohesion (steer toward the average position), alignment (match the average direction), and separation (avoid crowding). A cursor-repulsion force is added when the pointer is nearby, and edge-bounce forces keep the school inside the canvas. Velocity is normalized each frame to maintain a target speed, and each fish is rendered as a bezier curve with an animated tail.

Key Features

- Real Boids behavior — emergent flocking, no scripted paths

- Cursor avoidance — fish flow around your pointer

- Tail animation — each fish wiggles its tail with a unique phase

- Customizable color — pick any color for the school

- Viewport-aware — pauses rendering automatically when offscreen

- 12 exposed properties

Properties

- Fish count multiplier

- Fish size range — min / max

- Swim speed

- Cohesion strength

- Separation distance

- Alignment strength

- Turning speed

- Tail wiggle amplitude

- Cursor avoidance strength

- Glow intensity

- Fish color

Best for

Ambient backgrounds, "flow" themed landing pages, creative portfolios, and any scene that needs a living, breathing element.