Lab/19
Boids
Every boid looks at its neighbors and balances three urges: keep some distance, match their heading, and drift toward their center. The cursor plays predator or magnet.
- Canvas
- Simulation
- Interaction
Move to scatter the flock
lab/boids1.5
1.0
1.0
Installation
Add Boids to your project with the shadcn CLI. The files land in components/lab, ready to edit.
$ pnpm dlx shadcn@latest add @soultel/lab-boidsOr by URL: https://asafefe.dev/r/lab-boids.json
Brings along
- utils
- @soultel/lab-canvas
Usage
import { Boids } from "@/components/lab/boids"
export function Hero() {
return (
<section className="relative h-[420px]">
<Boids className="absolute inset-0" pointer="predator" />
<h1 className="relative">Hello</h1>
</section>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| separation | number | 1.5 | Pull away from close neighbors. |
| alignment | number | 1 | Match neighbors' heading. |
| cohesion | number | 1 | Steer toward neighbors' center. |
| pointer | "predator" | "attractor" | "none" | "predator" | What the cursor does to the flock. |
| pointerRadius | number | 120 | Cursor influence radius in px. |
| speed | number | 2.6 | Top speed in px per frame. |
| perception | number | 50 | Neighbor radius in px. |
| density / maxBoids | number | 1 / 2400, 280 | Boids per px of area, and the cap. |
| color / accentColor | string | "var(--foreground)", "var(--primary)" | Boid color, and the color for startled boids. |
| accentRatio | number | 0.1 | Share of boids always drawn in the accent color. |
| size | number | 7 | Boid length in px. |
| ref | Ref<BoidsHandle> | - | reset() scatters a fresh flock. |