Cursor Magnet

<div class="nuda-cursor-magnet-area" aria-hidden="true">
  <div class="nuda-cursor-magnet__item">A</div>
  <div class="nuda-cursor-magnet__item">B</div>
  <div class="nuda-cursor-magnet__item">C</div>
</div>

/* Cursor Magnet
   Elements attract toward the cursor when nearby.
   Customize: --magnet-color, --magnet-strength */

.nuda-cursor-magnet-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.nuda-cursor-magnet__item {
  --magnet-color: #e4ff54;
  --magnet-strength: 0.3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(228, 255, 84, 0.25);
  border-radius: 10px;
  color: var(--magnet-color);
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform 0.2s ease-out;
  cursor: pointer;
}

.nuda-cursor-magnet__item:hover {
  border-color: var(--magnet-color);
  box-shadow: 0 0 12px rgba(228, 255, 84, 0.15);
}

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

/* Cursor Magnet — Elements attract toward cursor when nearby.
   Each .nuda-cursor-magnet__item moves toward the pointer. */

(function () {
  var items = document.querySelectorAll('.nuda-cursor-magnet__item');
  if (!items.length) return;

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

  var strength = 0.3; // 0-1 range

  items.forEach(function (item) {
    item.addEventListener('mousemove', function (e) {
      var rect = item.getBoundingClientRect();
      var cx = rect.left + rect.width / 2;
      var cy = rect.top + rect.height / 2;
      var dx = (e.clientX - cx) * strength;
      var dy = (e.clientY - cy) * strength;
      item.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
    });

    item.addEventListener('mouseleave', function () {
      item.style.transform = 'translate(0, 0)';
    });
  });
})();