BackgroundsCanvasTurbulence

Particle Field

A drifting canvas particle field where the cursor creates turbulence.

"use client";

import { useEffect, useRef } from "react";

export default function ParticleField() {
  const canvasRef = useRef(null);
  const mouse = useRef({ x: -9999, y: -9999 });

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
    let frame = 0;
    let width = 0;
    let height = 0;
    let particles = [];

function resetParticles() {
      particles = Array.from({ length: 90 }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.4,
        vy: (Math.random() - 0.5) * 0.4,
        r: 1 + Math.random() * 1.8
      }));
    }

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);
      resetParticles();
    }

function draw() {
      ctx.fillStyle = "#080c14";
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = "#60a5fa";

for (const particle of particles) {
        const dx = particle.x - mouse.current.x;
        const dy = particle.y - mouse.current.y;
        const distance = Math.hypot(dx, dy);

if (distance > 0.01 && distance < 120) {
          const force = ((120 - distance) / 120) * 0.55;
          particle.vx += (dx / distance) * force;
          particle.vy += (dy / distance) * force;
        }

particle.vx *= 0.97;
        particle.vy *= 0.97;
        particle.x = (particle.x + particle.vx + width) % width;
        particle.y = (particle.y + particle.vy + height) % height;

ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
        ctx.fill();
      }

frame = requestAnimationFrame(draw);
    }

resize();
    draw();

const observer = new ResizeObserver(resize);
    observer.observe(canvas);

return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
    };
  }, []);

function move(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    mouse.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
  }

return (
    <canvas
      ref={canvasRef}
      onPointerMove={move}
      onPointerLeave={() => { mouse.current = { x: -9999, y: -9999 }; }}
      style={{ width: "100%", height: "100%", display: "block" }}
    />
  );
}