Cursor Spotlight

<!-- Container where the spotlight reveals content -->
<div class="nuda-cursor-spotlight-area" aria-hidden="true">
  <p class="nuda-cursor-spotlight__content">Hidden content revealed by spotlight</p>
  <div class="nuda-cursor-spotlight__light"></div>
</div>

/* Cursor Spotlight
   Spotlight effect that follows the cursor, illuminating content.
   Customize: --spotlight-color, --spotlight-size */

.nuda-cursor-spotlight-area {
  --spotlight-color: #e4ff54;
  --spotlight-size: 150px;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 2rem;
}

.nuda-cursor-spotlight__content {
  color: #333;
  font-size: 0.9rem;
  text-align: center;
  transition: color 0.3s ease;
}

.nuda-cursor-spotlight__light {
  position: absolute;
  width: var(--spotlight-size);
  height: var(--spotlight-size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(228, 255, 84, 0.15) 0%,
    rgba(228, 255, 84, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: -200px;
  top: -200px;
  transition: left 0.08s ease-out, top 0.08s ease-out;
  mix-blend-mode: screen;
}

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

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

(function () {
  var area = document.querySelector('.nuda-cursor-spotlight-area');
  var light = document.querySelector('.nuda-cursor-spotlight__light');
  if (!area || !light) return;

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

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