Mouse Trail Particles

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  overflow: hidden;
  background: #050910;
  cursor: none;
}

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

.label {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

(function () {
  "use strict";

  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const DPR = window.devicePixelRatio || 1;

  let W, H;
  function resize() {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W * DPR;
    canvas.height = H * DPR;
    canvas.style.width = W + "px";
    canvas.style.height = H + "px";
    ctx.scale(DPR, DPR);
  }
  resize();
  window.addEventListener("resize", resize);

  // ── Particle ──────────────────────────────────────────────────
  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.vx = (Math.random() - 0.5) * 1.5;
      this.vy = (Math.random() - 0.5) * 1.5 - 0.5;
      this.radius = Math.random() * 4 + 2;
      this.alpha = 1;
      this.hue = Math.random() * 60 + 180; // 180–240: cyan/blue/indigo
    }

    update() {
      this.x += this.vx;
      this.y += this.vy;
      this.radius *= 0.96;
      this.alpha -= 0.018;
    }

    draw() {
      const g = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
      g.addColorStop(0, `hsla(${this.hue}, 100%, 70%, ${this.alpha})`);
      g.addColorStop(1, `hsla(${this.hue}, 100%, 50%, 0)`);
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = g;
      ctx.fill();
    }

    isDead() {
      return this.alpha <= 0 || this.radius <= 0.3;
    }
  }

  let particles = [];
  let mx = W / 2,
    my = H / 2;

  document.addEventListener("mousemove", (e) => {
    mx = e.clientX;
    my = e.clientY;
    for (let i = 0; i < 4; i++) {
      particles.push(new Particle(mx, my));
    }
  });

  // Touch support
  document.addEventListener(
    "touchmove",
    (e) => {
      const t = e.touches[0];
      for (let i = 0; i < 4; i++) {
        particles.push(new Particle(t.clientX, t.clientY));
      }
    },
    { passive: true }
  );

  function loop() {
    // Semi-transparent clear — creates trail persistence
    ctx.fillStyle = "rgba(5, 9, 16, 0.18)";
    ctx.fillRect(0, 0, W, H);

    // Update + draw
    for (let i = particles.length - 1; i >= 0; i--) {
      particles[i].update();
      particles[i].draw();
      if (particles[i].isDead()) particles.splice(i, 1);
    }

    requestAnimationFrame(loop);
  }

  loop();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mouse Trail Particles</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <canvas id="canvas"></canvas>
  <div class="label">Move your cursor</div>
  <script src="script.js"></script>
</body>
</html>

A Canvas 2D particle system that spawns glowing particles at the cursor position. Each particle drifts, shrinks, and fades out — leaving a luminous comet-like trail.

How it works

mousemove pushes new Particle objects into an array with position, velocity, size, opacity, and a hue
requestAnimationFrame loop updates each particle: drift by velocity, reduce size and opacity
Dead particles (opacity ≤ 0) are removed from the array
The canvas is cleared with a semi-transparent fill each frame — creates the fade trail

ctx.fillStyle = "rgba(0,0,0,0.15)"; // semi-clear → trail persists briefly
ctx.fillRect(0, 0, W, H);

Performance

Particles are plain objects — no DOM, no CSS, no reflows
Array .splice() removes dead particles in-place
devicePixelRatio scaling for sharp rendering on HiDPI screens