Canvas Star Trail Cursor — Free Twinkling Pointer Trail Effect

<section class="stc-wrap">
  <canvas class="stc-canvas" id="stcCanvas"></canvas>
  <div class="stc-content">
    <span class="stc-tag">canvas 2d · pointer trail</span>
    <h1>Move your cursor</h1>
    <p>Twinkling stars spawn along the path and fade as they drift and rotate.</p>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#06040f;color:#fff;min-height:100vh}
.stc-wrap{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 10%,#1b1240,#06040f 65%)}
.stc-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.stc-content{position:relative;z-index:1;text-align:center;max-width:420px;padding:26px}
.stc-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fbcfe8;background:rgba(251,207,232,.1);border:1px solid rgba(251,207,232,.3);padding:5px 12px;border-radius:99px;margin-bottom:16px}
.stc-content h1{font-size:clamp(30px,7vw,52px);font-weight:800;letter-spacing:-.03em}
.stc-content p{font-size:14.5px;color:#c3b8dd;margin-top:12px;line-height:1.7}

var canvas = document.getElementById('stcCanvas');
var ctx = canvas.getContext('2d');
var wrap = document.querySelector('.stc-wrap');
var W, H;

function resize() {
  W = canvas.width = wrap.clientWidth;
  H = canvas.height = wrap.clientHeight;
}
resize();
window.addEventListener('resize', resize);

var COLORS = ['#fbcfe8', '#e9d5ff', '#bae6fd', '#fef3c7'];
var stars = [];
var last = null;

function spawnStar(x, y) {
  stars.push({
    x: x, y: y,
    size: 3 + Math.random() * 6,
    rotation: Math.random() * Math.PI * 2,
    spin: (Math.random() - 0.5) * 0.12,
    life: 1,
    decay: 0.012 + Math.random() * 0.018,
    twinklePhase: Math.random() * Math.PI * 2,
    vx: (Math.random() - 0.5) * 0.6,
    vy: (Math.random() - 0.5) * 0.6 - 0.15,
    points: Math.random() < 0.5 ? 4 : 5,
    color: COLORS[Math.floor(Math.random() * COLORS.length)]
  });
}

// Draws an n-pointed star by alternating outer and inner radii around the
// circle — the same construction whether it has 4 or 5 points, just a
// different point count and inner-radius ratio.
function drawStar(s) {
  var outer = s.size;
  var inner = outer * (s.points === 4 ? 0.32 : 0.42);
  var step = Math.PI / s.points;

  ctx.save();
  ctx.translate(s.x, s.y);
  ctx.rotate(s.rotation);

  ctx.beginPath();
  for (var i = 0; i < s.points * 2; i++) {
    var r = i % 2 === 0 ? outer : inner;
    var a = i * step;
    var px = Math.cos(a) * r;
    var py = Math.sin(a) * r;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.closePath();

  var twinkle = 0.5 + Math.sin(s.twinklePhase) * 0.5;
  ctx.globalAlpha = Math.max(s.life, 0) * (0.5 + twinkle * 0.5);
  ctx.fillStyle = s.color;
  ctx.shadowColor = s.color;
  ctx.shadowBlur = outer * 1.4;
  ctx.fill();

  ctx.restore();
}

function pointerMove(x, y) {
  if (last) {
    var dx = x - last.x, dy = y - last.y;
    var dist = Math.sqrt(dx * dx + dy * dy);
    var steps = Math.max(1, Math.min(4, Math.floor(dist / 14)));
    for (var i = 1; i <= steps; i++) {
      spawnStar(last.x + (dx * i) / steps, last.y + (dy * i) / steps);
    }
  } else {
    spawnStar(x, y);
  }
  last = { x: x, y: y };
}

wrap.addEventListener('mousemove', function (e) {
  var rect = wrap.getBoundingClientRect();
  pointerMove(e.clientX - rect.left, e.clientY - rect.top);
});
wrap.addEventListener('touchmove', function (e) {
  var rect = wrap.getBoundingClientRect();
  var t = e.touches[0];
  pointerMove(t.clientX - rect.left, t.clientY - rect.top);
}, { passive: true });

var MAX_STARS = 220;

function tick() {
  ctx.clearRect(0, 0, W, H);

  for (var i = stars.length - 1; i >= 0; i--) {
    var s = stars[i];
    s.x += s.vx;
    s.y += s.vy;
    s.rotation += s.spin;
    s.twinklePhase += 0.18;
    s.life -= s.decay;

    if (s.life <= 0) {
      stars.splice(i, 1);
      continue;
    }
    drawStar(s);
  }
  ctx.shadowBlur = 0;

  if (stars.length > MAX_STARS) stars.splice(0, stars.length - MAX_STARS);

  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);