custom-cursor

Summary

Two-element custom cursor (outer ring + inner dot) layered above the page on desktop. Both <div>s are positioned absolutely and tracked via the bundled viewport.jquery.js follower script. The outer ring lags behind the inner dot to give the cursor body weight.

HTML structure (minimal)

<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>

Key SCSS tokens

.mouse-cursor {
  position: fixed;
  pointer-events: none;
  top: 0; left: 0;
  z-index: 10000;
  transition: 0.1s;
}
.cursor-outer {
  width: 32px; height: 32px;
  border: 1px solid var(--theme);
  border-radius: 50%;
  transition: transform 0.4s, opacity 0.4s;
}
.cursor-inner {
  width: 6px; height: 6px;
  background: var(--theme);
  border-radius: 50%;
}
@media (max-width: 991px) {
  .mouse-cursor { display: none; }
}

Animation logic

// viewport.jquery.js drives the position; the inner dot snaps to the cursor
// while the outer ring eases via CSS transition delay.
// (Initialised globally inside main.js / viewport.jquery.js — no per-page wiring.)

Notable details

• Hidden on <= 991px viewports — touch devices keep the native cursor.
• Two-layer pattern (snap dot + lagging ring) is the de-facto template cursor — copy whole instead of reinventing.
• Stroke-only outer + filled inner means the cursor reads on light AND dark backgrounds without a mix-blend-mode trick.

Use when

• Template-grade sites where you want a tasteful cursor signature without GSAP.
• Showcase pages with photography or video — the lagging ring gives a "premium" feel.

Caveats

• The cursor sits on .mouse-cursor.cursor-outer which has top:0; left:0 at first paint, so the screenshot pipeline will catch a thin ring in the top-left corner — expected. For a richer screenshot, the placeholder gradient may be preferable.
• pointer-events: none is essential — without it the divs intercept clicks.