custom-cursor

Summary

A single small dot follows the mouse, hiding the OS cursor. It is positioned absolutely on the body and updated on every mousemove via clientX/clientY.

HTML structure (minimal)

<div class="mouse-pointer" id="mouse-pointer"></div>

Key SCSS tokens

.mouse-pointer {
  position: fixed; top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--theme-color);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: difference;
}
body { cursor: none; }

Animation logic

var e = document.getElementById("mouse-pointer");
document.body.addEventListener("mousemove", function(n) {
  e.style.left = n.clientX + "px";
  e.style.top  = n.clientY + "px";
});

Notable details

• No interpolation — the dot tracks the cursor 1:1, which feels precise rather than draggy. To soften, lerp clientX/Y in a rAF loop.
• Pure DOM API: no jQuery, no GSAP. Cheapest possible custom cursor.
• Combine with mix-blend-mode: difference for automatic legibility on light and dark backgrounds.

Use when

• Portfolios that want a small visual signature without the cost of a magnetic/lerp cursor library.
• Sites with mostly-static page layouts where a heavy cursor would distract.

Caveats

• No touch detection — on touch devices the dot remains stuck top-left. Wrap the listener in a (matchMedia('(pointer: fine)').matches) check before shipping.
• No hover-state expansion (no scaling on links). Add a mouseenter/mouseleave pair on a, button if needed.
• The default OS cursor must be hidden by body { cursor: none } or you get two cursors.