Cursor Trail

<!-- Container where the trail effect appears -->
<div class="nuda-cursor-trail-area" aria-hidden="true"></div>

/* Cursor Trail
   Dots that trail behind the cursor and fade out.
   Customize: --trail-color, --trail-size, --trail-count */

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

.nuda-cursor-trail__dot {
  --trail-color: #e4ff54;
  --trail-size: 8px;
  position: absolute;
  width: var(--trail-size);
  height: var(--trail-size);
  background: var(--trail-color);
  border-radius: 50%;
  pointer-events: none;
  animation: nuda-trail-fade 0.8s ease-out forwards;
}

@keyframes nuda-trail-fade {
  to {
    opacity: 0;
    transform: scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-cursor-trail__dot {
    animation: none;
    display: none;
  }
}

/* Cursor Trail — Creates dots that follow the mouse and fade out.
   Attach to any container with class "nuda-cursor-trail-area". */

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

  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reducedMotion) return;

  area.addEventListener('mousemove', function (e) {
    var rect = area.getBoundingClientRect();
    var dot = document.createElement('div');
    dot.className = 'nuda-cursor-trail__dot';
    dot.style.left = (e.clientX - rect.left) + 'px';
    dot.style.top = (e.clientY - rect.top) + 'px';
    area.appendChild(dot);

    dot.addEventListener('animationend', function () {
      dot.remove();
    });
  });
})();