Magnetic Hover

<!-- Magnetic Hover — button content follows cursor slightly -->
<button class="nuda-magnetic">Magnetic Hover</button>

/* ── Magnetic Hover ──────────────────────────────────────────
   Customize:
     --nuda-mg-bg      : button background
     --nuda-mg-clr     : text color
     --nuda-mg-radius  : border radius
     --nuda-mg-ease    : return-to-center easing
   ──────────────────────────────────────────────────────────── */
.nuda-magnetic {
  --nuda-mg-bg: #6366f1;
  --nuda-mg-clr: #fff;
  --nuda-mg-radius: 8px;
  --nuda-mg-ease: cubic-bezier(0.23, 1, 0.32, 1);

  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-mg-clr);
  background: var(--nuda-mg-bg);
  border: none;
  border-radius: var(--nuda-mg-radius);
  cursor: pointer;
  transition: transform 0.3s var(--nuda-mg-ease);
  will-change: transform;
}

/* ── Magnetic Hover — vanilla JS ─────────────────────────────
   Shifts button content toward cursor position.
   Respects prefers-reduced-motion.
   ──────────────────────────────────────────────────────────── */
;(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  var strength = 0.35; /* 0–1, how strongly the button follows */

  document.querySelectorAll(".nuda-magnetic").forEach(function (btn) {
    btn.addEventListener("mousemove", function (e) {
      var rect = btn.getBoundingClientRect();
      var x = e.clientX - rect.left - rect.width / 2;
      var y = e.clientY - rect.top - rect.height / 2;
      btn.style.transform =
        "translate(" + (x * strength) + "px, " + (y * strength) + "px)";
    });

    btn.addEventListener("mouseleave", function () {
      btn.style.transform = "translate(0, 0)";
    });
  });
})();