Make your AI a shadcn expert

React Swarm Background

Animated flocking swarm background for React and Next.js — triangular boids glide, split, and rejoin using the classic Craig Reynolds alignment, cohesion, and separation rules for emergent group motion.

React Swarm Background preview

Scroll to load preview

A living constellation of triangular agents that move as one mind — sometimes gliding in tight formation, sometimes splitting around an invisible obstacle, always re-converging into new shapes. This is Craig Reynolds' classic boids algorithm: each agent samples its neighbours inside a spatial hash grid and applies three gentle steering forces — match their heading, drift toward their centre, nudge away from the too-close ones — producing emergent flock behaviour from local rules alone. Zero dependencies, a single tuned RAF loop, and torus wrapping at the edges so the swarm never bumps into a wall. Perfect for AI product heroes, multi-agent-system landing pages, generative-art portfolios, nature or biology startups, and any surface that wants motion with a hint of collective intelligence.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:

use shadcnio to install the swarm background into my project

FAQ

Was this page helpful?

Sign in to leave feedback.