Canvas Rainbow Mouse Trail — Free Hue-Cycling Cursor Snippet

<div class="rt-wrap">
  <canvas id="rtCanvas" class="rt-canvas"></canvas>
  <p class="rt-hint">Move your cursor across the panel — the trail cycles through hues.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a10;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.rt-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(720px,96vw)}
.rt-canvas{width:100%;aspect-ratio:16/9;background:#0a0a10;border-radius:18px;border:1px solid rgba(255,255,255,.08);display:block;cursor:none}
.rt-hint{color:#6b7284;font-size:12px;letter-spacing:.04em}

const canvas = document.getElementById('rtCanvas');
const ctx = canvas.getContext('2d');
let width, height, dpr;
let particles = [];
let hue = 0;
let pointer = null;

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

function pointerPos(e) {
  const rect = canvas.getBoundingClientRect();
  const t = e.touches ? e.touches[0] : e;
  return { x: t.clientX - rect.left, y: t.clientY - rect.top };
}

canvas.addEventListener('mousemove', e => {
  pointer = pointerPos(e);
  spawn(pointer.x, pointer.y);
});
canvas.addEventListener('touchmove', e => {
  pointer = pointerPos(e);
  spawn(pointer.x, pointer.y);
}, { passive: true });
canvas.addEventListener('mouseleave', () => { pointer = null; });

// Every mouse move adds a handful of small particles at the cursor, each
// carrying the current global hue so the trail visibly cycles through colors
// as time (and cursor position history) advances.
function spawn(x, y) {
  hue = (hue + 2.5) % 360;
  for (let i = 0; i < 2; i++) {
    particles.push({
      x: x + (Math.random() - 0.5) * 6,
      y: y + (Math.random() - 0.5) * 6,
      vx: (Math.random() - 0.5) * 1.4,
      vy: (Math.random() - 0.5) * 1.4 - 0.3,
      r: 2 + Math.random() * 3,
      life: 1,
      hue
    });
  }
}

function tick() {
  ctx.clearRect(0, 0, width, height);

  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;
    p.vy += 0.01;
    p.life -= 0.025;

    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r * Math.max(p.life, 0), 0, Math.PI * 2);
    ctx.fillStyle = 'hsla(' + p.hue + ',95%,65%,' + Math.max(p.life, 0) + ')';
    ctx.fill();
  });

  particles = particles.filter(p => p.life > 0);

  if (pointer) {
    ctx.beginPath();
    ctx.arc(pointer.x, pointer.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = 'hsla(' + hue + ',95%,75%,0.9)';
    ctx.fill();
  }

  requestAnimationFrame(tick);
}

resize();
window.addEventListener('resize', resize);
tick();