Star Mouse Trail

mouse and cursor 1998 still works

A tail of little stars that chases the pointer around the page.

In 2026: Rewritten from the <layer> original to absolutely positioned divs, so it works in current browsers. The behaviour is identical.

Where it came from: The JavaScript Source and Dynamic Drive, roughly 1998. Dozens of variants circulated at once. MDN ↗

<script language="JavaScript">
var TRAIL = 14, dots = [];
for (var i = 0; i < TRAIL; i++) {
  var d = document.createElement("div");
  d.innerHTML = "\u2726";
  d.style.cssText = "position:fixed;left:0;top:0;pointer-events:none;z-index:9999;"
    + "color:hsl(" + (i * 360 / TRAIL) + ",100%,65%);font-size:"
    + (16 - i * 0.8) + "px";
  document.body.appendChild(d);
  dots.push({ el: d, x: 0, y: 0 });
}
var mx = 0, my = 0;
document.onmousemove = function (e) { mx = e.clientX; my = e.clientY; };
setInterval(function () {
  var px = mx, py = my;
  for (var i = 0; i < dots.length; i++) {
    var s = dots[i];
    s.x += (px - s.x) * 0.35;
    s.y += (py - s.y) * 0.35;
    s.el.style.left = s.x + "px";
    s.el.style.top = s.y + "px";
    px = s.x; py = s.y;
  }
}, 25);
</script>

sandboxed demo · breaks nothing but itselfrestart

More in mouse and cursor