Spotlight

npx shadcn@latest add https://ui.zyeon.ai/r/spotlight.json

Build a React + TypeScript + Tailwind "Spotlight" component — a section
background that paints a soft radial glow following the cursor. Its only
dependency is a cn() class merger (clsx + tailwind-merge).

Contract
- Shared primitive: use-prefers-reduced-motion (installed automatically via
  registryDependencies) — `getPrefersReducedMotion()` is the one-shot
  reduced-motion read in the mousemove handler. If rebuilding without it: read
  matchMedia("(prefers-reduced-motion: reduce)").matches at the moment of the
  event.
- export function Spotlight(props): props extend React.ComponentProps<"div">
  (rest props spread onto the root, so a consumer ref lands on it) plus:
  - size?: number — gradient radius in px (default 320). The glow fades to
    transparent at 60% of it, so the lit disc is about 1.2 x size across.
  - intensity?: "subtle" | "medium" | "bold" (default "medium") — selects a
    color-mix alpha tier for the glow: 12% / 20% / 30%.
  - children render above the effect layer; className merges onto the root.
- "use client" — the component owns pointer events and reads
  prefers-reduced-motion, so it cannot stay a server component.

Behavior
- Root div: relative isolate overflow-hidden. It carries no internal ref, so a
  ref passed by the consumer is never overridden.
- On mousemove, compute the cursor position relative to the root's bounding
  rect (e.currentTarget) and write it straight into two CSS custom properties,
  --spot-x and --spot-y, via lightRef.current.style.setProperty on the light
  layer — never through React state, and never on the root. This is the
  performance contract: a fast mousemove stream updates paint only, so the
  component (and everything nested inside it) never re-renders while the
  cursor moves, and because the light layer is a leaf, the custom-property
  write restyles that one element instead of the whole content subtree.
- A single boolean `active` state (React state is fine here — it only flips
  on mouseenter/mouseleave, a low-frequency boundary event) drives a CSS
  opacity transition on the light layer: fade in on enter, fade out on
  leave.
- The light layer is absolute inset-0, aria-hidden, pointer-events-none,
  with a radial-gradient background sized at `${size}px` centered on
  `var(--spot-x, 50%) var(--spot-y, 50%)`. The 50%/50% fallback matters: it
  is what the effect resolves to whenever the CSS vars are never written.
- prefers-reduced-motion: read it at the moment of each mousemove
  (getPrefersReducedMotion(), one shared MediaQueryList, no subscription and
  no re-render). When reduced motion is on, the handler skips the write and
  never sets --spot-x/--spot-y, so the gradient falls back to a fixed center —
  the glow stays visible as a static decoration but stops chasing the cursor.
- Touch / no-hover devices: the light layer carries a
  [@media(hover:none)]:hidden class so it is absent by default wherever
  there is no cursor to spotlight; content is never affected.
- Cleanup: nothing to release — the component creates no listener, timer or
  observer of its own.

Rendering & styling
- Semantic tokens only. The glow is radial-gradient(${size}px at
  var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklab, var(--primary)
  N%, transparent), transparent 60%) with N from the intensity tier
  (12/20/30). No hex / rgb() / oklch() literals — the color adapts to the
  host theme and dark mode for free.
- Merge consumer className via cn() on the root div.
- Content sits in a relative z-10 wrapper above the light layer so the glow
  can never intercept clicks or enter the accessibility tree.

Customization levers
- Palette: swap var(--primary) for any other theme token (--chart-1..5,
  --accent) to change the glow's hue without touching the tracking logic.
- Multiple spotlights: render more than one light-layer div, each with its
  own CSS var pair, for a multi-cursor or multi-hotspot effect.
- Size / intensity: size and the ALPHA map are the only two knobs — widen
  the 12/20/30 band for a louder or quieter glow.
- Follow inertia: the base version tracks 1:1 with no easing; upgrading to a
  spring/lerp follow (e.g. via requestAnimationFrame or a motion library) is
  a drop-in swap inside the mousemove handler — the CSS var contract stays
  the same.
- Composition: nest GridDots or any other background as a child — Spotlight
  only owns the glow layer and the z-10 content slot, so it composes with
  whatever pattern sits underneath.