Crosshair Cursor

<!--
  Two 1px guides track the pointer via transform (translateX on the vertical,
  translateY on the horizontal) and a chip prints the local coordinates. The
  guides move 1:1 with the hand, so no reduced-motion opt-out is needed.
-->
<div id="cursor-cross-stage" class="relative h-56 w-full max-w-lg overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex h-full items-center justify-center px-6 text-center">
    <p class="text-sm text-gray-600 dark:text-gray-400">Precision crosshair with live coordinates</p>
  </div>
  <div id="cursor-cross" class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-150" aria-hidden="true">
    <div id="cursor-cross-v" class="absolute inset-y-0 left-0 w-px bg-blue-500/70 dark:bg-blue-400/70"></div>
    <div id="cursor-cross-h" class="absolute inset-x-0 top-0 h-px bg-blue-500/70 dark:bg-blue-400/70"></div>
    <div id="cursor-cross-label" class="absolute left-0 top-0 ml-2 mt-2 rounded bg-gray-900 px-1.5 py-0.5 font-mono text-[10px] text-white">0, 0</div>
  </div>
</div>

<script>
  (() => {
    const stage = document.getElementById('cursor-cross-stage');
    const wrap = document.getElementById('cursor-cross');
    const v = document.getElementById('cursor-cross-v');
    const h = document.getElementById('cursor-cross-h');
    const label = document.getElementById('cursor-cross-label');
    if (!stage || !wrap || !v || !h || !label || !matchMedia('(pointer: fine)').matches) return;
    let rect = stage.getBoundingClientRect();
    stage.style.cursor = 'none';
    stage.addEventListener('pointerenter', () => { rect = stage.getBoundingClientRect(); wrap.style.opacity = '1'; });
    stage.addEventListener('pointerleave', () => { wrap.style.opacity = '0'; });
    stage.addEventListener('pointermove', (e) => {
      const x = Math.round(e.clientX - rect.left), y = Math.round(e.clientY - rect.top);
      v.style.transform = 'translateX(' + x + 'px)';
      h.style.transform = 'translateY(' + y + 'px)';
      label.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';
      label.textContent = x + ', ' + y;
    });
  })();
</script>