Gradient Blob Cursor

<!--
  A blurred radial blob sits behind the content and eases after the pointer in
  rAF. The drift is decoration, so reduced motion parks the blob in the centre
  and attaches no listeners.
-->
<div id="cursor-blob-stage" class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950">
  <div id="cursor-blob" class="pointer-events-none absolute left-1/2 top-1/2 h-32 w-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.7),transparent_70%)] blur-2xl" aria-hidden="true"></div>
  <div class="relative flex h-56 flex-col items-center justify-center gap-2 px-6 text-center">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Follow the light</h3>
    <p class="max-w-xs text-sm text-gray-600 dark:text-gray-400">A soft gradient blob eases after your pointer.</p>
  </div>
</div>

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