Text Zoom Cursor

<!--
  On hover the word scales up and tilts toward the pointer; a transition on the
  transform does the smoothing, so there is no rAF loop. The zoom is decoration,
  hence motion-reduce:transform-none.
-->
<div id="cursor-zoom-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 [perspective:600px] dark:border-gray-800 dark:bg-gray-900">
  <span id="cursor-zoom-text" class="text-5xl font-bold tracking-tight text-gray-900 will-change-transform transition-transform duration-200 ease-out motion-reduce:transform-none dark:text-gray-100">
    Zoom
  </span>
</div>

<script>
  (() => {
    const stage = document.getElementById('cursor-zoom-stage');
    const el = document.getElementById('cursor-zoom-text');
    if (!stage || !el || !matchMedia('(pointer: fine)').matches) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let rect = stage.getBoundingClientRect();
    stage.addEventListener('pointerenter', () => { rect = stage.getBoundingClientRect(); el.style.transform = 'scale(1.35)'; });
    stage.addEventListener('pointerleave', () => { el.style.transform = 'scale(1)'; });
    stage.addEventListener('pointermove', (e) => {
      const px = (e.clientX - rect.left) / rect.width - 0.5;
      const py = (e.clientY - rect.top) / rect.height - 0.5;
      el.style.transform = 'scale(1.35) rotateX(' + (-py * 18) + 'deg) rotateY(' + (px * 18) + 'deg)';
    });
  })();
</script>