BackgroundsCanvasFlock

Bird Swarm

A cursor-reactive flock of tiny birds that part, regroup, and drift.

"use client";

import { useEffect, useRef } from "react";

export default function BirdSwarm() {
  const canvasRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const mouse = { x: -9999, y: -9999, px: -9999, py: -9999, active: false };
const config = {
  count: 60,
  backgroundColor: "#03020d",
  birdColor: "#8f9cff",
  highlightColor: "#cbd3ff",
  layout: "field",
  size: 1,
  speed: 1,
  mouseRadius: 170,
  mouseForce: 0.42,
  separation: 0.09,
  alignment: 0.04,
  cohesion: 0.02
};
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
const birds = [];
let width = 0;
let height = 0;
let tick = 0;
let frame = 0;

function clusterPoint(index) {
  if (config.layout === "diagonal") {
    const progress = config.count <= 1 ? 0 : index / (config.count - 1);
    const wave = Math.sin(progress * Math.PI * 2.1) * 0.08;
    return {
      x: width * (0.2 + progress * 0.62 + (Math.random() - 0.5) * 0.18),
      y: height * (0.18 + progress * 0.48 + wave + (Math.random() - 0.5) * 0.18)
    };
  }

if (config.layout === "main") {
    const isStray = index % 5 === 0;
    return {
      x: width * (isStray ? 0.72 + (Math.random() - 0.5) * 0.32 : 0.42 + (Math.random() - 0.5) * 0.28),
      y: height * (isStray ? 0.28 + (Math.random() - 0.5) * 0.34 : 0.3 + (Math.random() - 0.5) * 0.2)
    };
  }

if (config.layout === "s-curve") {
    const progress = config.count <= 1 ? 0 : index / (config.count - 1);
    const curve = Math.sin(progress * Math.PI * 2 - Math.PI / 2);
    return {
      x: width * (0.18 + progress * 0.68 + (Math.random() - 0.5) * 0.14),
      y: height * (0.5 + curve * 0.24 + (Math.random() - 0.5) * 0.16)
    };
  }

if (config.layout === "field") {
    return {
      x: width * (0.08 + Math.random() * 0.84),
      y: height * (0.08 + Math.random() * 0.84)
    };
  }

function resize() {
  const rect = canvas.getBoundingClientRect();
  width = rect.width;
  height = rect.height;
  canvas.width = Math.max(1, Math.floor(width * pixelRatio));
  canvas.height = Math.max(1, Math.floor(height * pixelRatio));
  ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
  resetBirds();
}

function drawBird(bird) {
  const angle = Math.atan2(bird.vy, bird.vx);
  const flap = Math.sin(tick * 0.09 + bird.phase) * bird.size * 0.05;
  ctx.save();
  ctx.translate(bird.x, bird.y);
  ctx.rotate(angle);
  ctx.globalAlpha = 0.88;
  ctx.shadowBlur = 6;
  ctx.shadowColor = "rgba(143, 156, 255, 0.22)";
  ctx.beginPath();
  ctx.moveTo(bird.size * 1.35, 0);
  ctx.lineTo(-bird.size * 0.78, -bird.size * 0.62 - flap);
  ctx.lineTo(-bird.size * 0.22, 0);
  ctx.lineTo(-bird.size * 0.78, bird.size * 0.62 + flap);
  ctx.closePath();
  ctx.fillStyle = config.birdColor;
  ctx.fill();
  ctx.globalAlpha = 0.28;
  ctx.beginPath();
  ctx.moveTo(bird.size * 1.35, 0);
  ctx.lineTo(-bird.size * 0.22, 0);
  ctx.lineTo(-bird.size * 0.62, -bird.size * 0.4 - flap * 0.35);
  ctx.closePath();
  ctx.fillStyle = config.highlightColor;
  ctx.fill();
  ctx.restore();
  ctx.globalAlpha = 1;
}

function draw() {
  tick += 1;
  ctx.fillStyle = config.backgroundColor;
  ctx.fillRect(0, 0, width, height);
  const mouseVx = mouse.x - mouse.px;
  const mouseVy = mouse.y - mouse.py;

for (let i = 0; i < birds.length; i++) {
    const bird = birds[i];
    let nearby = 0;
    let avgVx = 0;
    let avgVy = 0;
    let avgX = 0;
    let avgY = 0;
    let pushX = 0;
    let pushY = 0;

for (let j = 0; j < birds.length; j++) {
      if (i === j) continue;
      const other = birds[j];
      const dx = other.x - bird.x;
      const dy = other.y - bird.y;
      const distance = Math.hypot(dx, dy);
      if (distance < 72) {
        nearby += 1;
        avgVx += other.vx;
        avgVy += other.vy;
        avgX += other.x;
        avgY += other.y;
      }
      if (distance > 0.01 && distance < 34) {
        const strength = (34 - distance) / 34;
        pushX -= (dx / distance) * strength;
        pushY -= (dy / distance) * strength;
      }
    }

if (nearby > 0) {
      avgVx /= nearby;
      avgVy /= nearby;
      avgX /= nearby;
      avgY /= nearby;
      bird.vx += (avgVx - bird.vx) * config.alignment;
      bird.vy += (avgVy - bird.vy) * config.alignment;
      bird.vx += (avgX - bird.x) * config.cohesion * 0.01;
      bird.vy += (avgY - bird.y) * config.cohesion * 0.01;
    }

bird.vx += pushX * config.separation;
    bird.vy += pushY * config.separation;
    bird.vx += (bird.homeX - bird.x) * 0.00018;
    bird.vy += (bird.homeY - bird.y) * 0.00018;
    bird.homeX += Math.sin(tick * 0.002 + bird.phase) * 0.018;
    bird.homeY += Math.cos(tick * 0.0024 + bird.phase) * 0.018;

if (mouse.active) {
      const dx = bird.x - mouse.x;
      const dy = bird.y - mouse.y;
      const distance = Math.hypot(dx, dy);
      if (distance > 0.01 && distance < config.mouseRadius) {
        const p = (config.mouseRadius - distance) / config.mouseRadius;
        const eased = p * p * (3 - 2 * p);
        bird.vx += (dx / distance) * eased * config.mouseForce;
        bird.vy += (dy / distance) * eased * config.mouseForce;
        bird.vx += mouseVx * eased * 0.018;
        bird.vy += mouseVy * eased * 0.018;
      }
    }

bird.vx += Math.sin(tick * 0.014 + bird.phase) * 0.004;
    bird.vy += Math.cos(tick * 0.012 + bird.phase) * 0.004;
    bird.vx *= 0.972;
    bird.vy *= 0.972;

const maxSpeed = 2.35 * config.speed;
    const currentSpeed = Math.hypot(bird.vx, bird.vy);
    if (currentSpeed > maxSpeed) {
      bird.vx = (bird.vx / currentSpeed) * maxSpeed;
      bird.vy = (bird.vy / currentSpeed) * maxSpeed;
    }

const minSpeed = 0.32 * config.speed;
    if (currentSpeed < minSpeed) {
      const angle = Math.atan2(bird.vy, bird.vx) || bird.phase;
      bird.vx += Math.cos(angle) * 0.018;
      bird.vy += Math.sin(angle) * 0.018;
    }

bird.x += bird.vx * config.speed;
    bird.y += bird.vy * config.speed;
    if (bird.x < -30) bird.x = width + 30;
    if (bird.x > width + 30) bird.x = -30;
    if (bird.y < -30) bird.y = height + 30;
    if (bird.y > height + 30) bird.y = -30;
    drawBird(bird);
  }

mouse.px = mouse.x;
  mouse.py = mouse.y;
  frame = requestAnimationFrame(draw);
}

function move(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  if (!mouse.active) {
    mouse.px = x;
    mouse.py = y;
  }
  mouse.x = x;
  mouse.y = y;
  mouse.active = true;
}

function leave() {
  mouse.x = -9999;
  mouse.y = -9999;
  mouse.px = -9999;
  mouse.py = -9999;
  mouse.active = false;
}
    resize();
    draw();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointermove", move);
    canvas.addEventListener("pointerleave", leave);
    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointermove", move);
      canvas.removeEventListener("pointerleave", leave);
    };
  }, []);

return <canvas ref={canvasRef} style={{ display: "block", width: "100%", height: "100%" }} />;
}