Magnetic Button

<!--
  The button is pulled a fraction of the way toward the pointer, eased in rAF.
  The pull is decoration, so prefers-reduced-motion skips the effect entirely
  and the button stays put - still fully clickable and focusable either way.
-->
<div id="cursor-mag-stage" class="relative flex h-56 w-full max-w-lg items-center justify-center overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
  <button id="cursor-mag-btn" type="button" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white will-change-transform transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 motion-reduce:transform-none dark:focus-visible:ring-offset-gray-900">
    Get started
  </button>
</div>

<script>
  (() => {
    const stage = document.getElementById('cursor-mag-stage');
    const btn = document.getElementById('cursor-mag-btn');
    if (!stage || !btn || !matchMedia('(pointer: fine)').matches) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let b = btn.getBoundingClientRect();
    let tx = 0, ty = 0, cx = 0, cy = 0, raf = 0;
    const loop = () => {
      cx += (tx - cx) * 0.2; cy += (ty - cy) * 0.2;
      btn.style.transform = 'translate3d(' + cx.toFixed(2) + 'px,' + cy.toFixed(2) + 'px,0)';
      if (tx === 0 && ty === 0 && Math.abs(cx) < 0.1 && Math.abs(cy) < 0.1) { raf = 0; return; }
      raf = requestAnimationFrame(loop);
    };
    stage.addEventListener('pointerenter', () => { b = btn.getBoundingClientRect(); });
    stage.addEventListener('pointermove', (e) => {
      tx = (e.clientX - (b.left + b.width / 2)) * 0.4;
      ty = (e.clientY - (b.top + b.height / 2)) * 0.4;
      if (!raf) raf = requestAnimationFrame(loop);
    });
    stage.addEventListener('pointerleave', () => { tx = 0; ty = 0; if (!raf) raf = requestAnimationFrame(loop); });
  })();
</script>