Cursor Glow

<!-- Container where the glow follows the cursor -->
<div class="nuda-cursor-glow-area" aria-hidden="true">
  <div class="nuda-cursor-glow__circle"></div>
</div>

/* Cursor Glow
   Glowing circle that follows the cursor smoothly.
   Customize: --glow-color, --glow-size */

.nuda-cursor-glow-area {
  position: relative;
  overflow: hidden;
}

.nuda-cursor-glow__circle {
  --glow-color: #e4ff54;
  --glow-size: 80px;
  position: absolute;
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(228, 255, 84, 0.25) 0%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out;
  left: -100px;
  top: -100px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-cursor-glow__circle {
    transition: none;
  }
}

/* Cursor Glow — Glowing circle that follows the cursor.
   Attach to any container with class "nuda-cursor-glow-area". */

(function () {
  var area = document.querySelector('.nuda-cursor-glow-area');
  var glow = document.querySelector('.nuda-cursor-glow__circle');
  if (!area || !glow) return;

  area.addEventListener('mousemove', function (e) {
    var rect = area.getBoundingClientRect();
    glow.style.left = (e.clientX - rect.left) + 'px';
    glow.style.top = (e.clientY - rect.top) + 'px';
  });

  area.addEventListener('mouseleave', function () {
    glow.style.left = '-100px';
    glow.style.top = '-100px';
  });
})();