Spotlight

---
/**
 * Spotlight — a soft radial light follows the cursor over a surface.
 *
 * One pointermove listener writes the cursor position into two custom
 * properties; the light is a pseudo-element gradient positioned by them and
 * faded in by :hover. Nothing is measured on move except the box, and the
 * listener is bound through the runtime so it survives navigation.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Element to render. */
  as?: HTMLTag;
  /** Radius of the light in px. */
  radius?: number;
  /** Light colour. */
  color?: string;
  /** Strength, 0–1. */
  opacity?: number;
  /** Where the light lives: the surface, or only the card's edge (a ring the same width as `border`). */
  target?: 'surface' | 'border';
  /** Ring width in px for target="border". */
  border?: number;
}

const { as: Tag = 'div', radius = 240, color = 'var(--ma-glow)', opacity = 1, target = 'surface', border = 1, class: className, style, ...rest } = Astro.props;
const inline = [`--ma-spot-r:${radius}px`, `--ma-spot-c:${color}`, `--ma-spot-o:${opacity}`, target === 'border' && `--ma-spot-w:${border}px`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-spot', className]} data-ma-spot data-target={target === 'border' ? 'border' : undefined} style={inline} {...rest}>
  <slot />
</Tag>

<style is:global>
  @layer components {
    :where(.ma-spot) {
      position: relative;
      overflow: hidden;
    }
    :where(.ma-spot)::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(var(--ma-spot-r, 240px) circle at var(--ma-spot-x, 50%) var(--ma-spot-y, 50%), var(--ma-spot-c, var(--ma-glow)), transparent 70%);
      opacity: 0;
      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
    }
    /* border: the same gradient, kept to a ring by two masks composited with exclude (BorderBeam's ring), over the card's own border */
    :where(.ma-spot[data-target='border'])::before {
      inset: calc(-1 * var(--ma-spot-w, 1px));
      padding: var(--ma-spot-w, 1px);
      border-radius: inherit;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
    }
    :where(.ma-spot[data-target='border']) {
      overflow: visible;
    }
    @media (hover: hover) {
      :where(.ma-spot:hover)::before {
        opacity: var(--ma-spot-o, 1);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-spot)::before {
        transition: none;
      }
    }
  }
</style>

<script>
  import { onMount } from '../lib/runtime';

  onMount<HTMLElement>('[data-ma-spot]', (el, { signal }) => {
    el.addEventListener(
      'pointermove',
      (e) => {
        // the rect is in screen pixels, the gradient in the element's own: under a scaled ancestor they differ (a pointer
        // over the element means it has a size, so the ratio is defined)
        const r = el.getBoundingClientRect();
        el.style.setProperty('--ma-spot-x', `${((e.clientX - r.left) * el.offsetWidth) / r.width}px`);
        el.style.setProperty('--ma-spot-y', `${((e.clientY - r.top) * el.offsetHeight) / r.height}px`);
      },
      { signal, passive: true },
    );
  });
</script>