Canvas Fluid Cursor Trail — Free Soft Blended Trail Snippet

<div class="fc-wrap">
  <canvas id="fcCanvas" class="fc-canvas"></canvas>
  <p class="fc-hint">Move your cursor across the panel.</p>
</div>

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

const canvas = document.getElementById('fcCanvas');
const ctx = canvas.getContext('2d');
let width, height, dpr;
let blobs = [];
let pointer = { x: 0, y: 0, active: false };
let lastPointer = { x: 0, y: 0 };

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), active: true };
});
canvas.addEventListener('mouseleave', () => { pointer.active = false; });
canvas.addEventListener('touchmove', e => {
  pointer = { ...pointerPos(e), active: true };
}, { passive: true });

function spawnBlob() {
  const vx = pointer.x - lastPointer.x;
  const vy = pointer.y - lastPointer.y;
  const speed = Math.min(Math.hypot(vx, vy), 40);
  blobs.push({
    x: pointer.x,
    y: pointer.y,
    vx: vx * 0.15,
    vy: vy * 0.15,
    r: 10 + speed * 0.6,
    stretch: 1 + speed * 0.03,
    angle: Math.atan2(vy, vx),
    life: 1,
    hue: 200 + (speed * 3) % 120
  });
  lastPointer = { x: pointer.x, y: pointer.y };
}

function tick() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(5,6,10,0.14)';
  ctx.fillRect(0, 0, width, height);

  if (pointer.active) spawnBlob();

  ctx.globalCompositeOperation = 'lighter';
  blobs.forEach(b => {
    b.x += b.vx;
    b.y += b.vy;
    b.vx *= 0.94;
    b.vy *= 0.94;
    b.life -= 0.02;

    ctx.save();
    ctx.translate(b.x, b.y);
    ctx.rotate(b.angle);
    ctx.scale(b.stretch, 1);
    const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, b.r);
    grad.addColorStop(0, 'hsla(' + b.hue + ',90%,70%,' + (0.5 * b.life) + ')');
    grad.addColorStop(1, 'hsla(' + b.hue + ',90%,60%,0)');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(0, 0, b.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  });

  blobs = blobs.filter(b => b.life > 0);
  ctx.globalCompositeOperation = 'source-over';
  requestAnimationFrame(tick);
}

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