Vanta BIRDS — Flocking Birds Hero Background

What this does

Animates hundreds of birds flocking together in 3D across your hero background using boid simulation. Birds change color and react to your mouse.

Style Name

BIRDS

When to use

• Dynamic, energetic landing pages
• Nature, freedom, or movement-themed brands
• When you want something visually unique and alive

Implementation

1. Load dependencies in <head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>

2. Apply to your hero element

<section id="hero">Your content here</section>

<script>
VANTA.BIRDS({
  el: "#hero",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  backgroundColor: 0x0a0a20,
  color1: 0x7c3aed,
  color2: 0x2563eb,
  colorMode: "lerpGradient",
  birdSize: 1.5,
  wingSpan: 38,
  speedLimit: 7,
  separation: 40,
  alignment: 80,
  cohesion: 30,
  quantity: 5
});
</script>

3. Key config options

| Option | Description | |---|---| | color1 / color2 | Bird gradient colors | | colorMode | lerpGradient, variance | | birdSize | Size of each bird | | wingSpan | Wing width | | speedLimit | Max bird speed | | separation | Flock separation | | quantity | Number of bird groups |

React / JSX usage

useEffect(() => {
  const effect = VANTA.BIRDS({
    el: heroRef.current,
    THREE: window.THREE,
    backgroundColor: 0x0a0a20,
    color1: 0x7c3aed,
    color2: 0x2563eb,
    colorMode: "lerpGradient",
    quantity: 5
  });
  return () => effect.destroy();
}, []);