Spotlight Card

Link the stylesheet and the script once. Put cards in a data-spotlight-group so the light spills from one to the next; a card on its own takes data-spotlight:

<link rel="stylesheet" href="spotlight-card.css" />
<script src="spotlight-card.js" defer></script>

<div class="spotlight-group" data-spotlight-group>
  <article class="spotlight-card">…</article>
  <article class="spotlight-card" data-variant="featured">…</article>
  <article class="spotlight-card">…</article>
</div>

<a class="spotlight-card" href="/changelog" data-spotlight>…</a>

Every .spotlight-card inside a group is lit by the group — cards added to it later too. The spotlight-group class is an optional responsive grid; any layout works. Tilt the card under the pointer with data-spotlight-tilt (in degrees, default 0 = off; 4–8 feels right) on the group or the single card. Groups or cards added after the page loads: SpotlightCard.init(container) — it returns a function that undoes it.

Copy SpotlightCard.tsx, spotlight-card.css and the core folder into your project:

import { SpotlightCard, SpotlightGroup } from "./SpotlightCard";

<SpotlightGroup tilt={5}>
  <SpotlightCard>…</SpotlightCard>
  <SpotlightCard variant="featured">…</SpotlightCard>
  <SpotlightCard as="a" href="/team">…</SpotlightCard>
</SpotlightGroup>

<SpotlightCard as="section" tilt={6}>On its own</SpotlightCard>

as picks the element (article by default for a card, div for a group; ul + li work too). Every other prop goes to that element (className, id, onClick, aria-*…). Inside a group, set tilt on the group. React 18 or 19.

The file starts with "use client", so use it from any page or server component. With the App Router nothing else is needed. With the Pages Router, move the CSS import into pages/_app.

Set these on .spotlight-card (or a class of your own):

Property	What it changes
--spotlight-from, --spotlight-via, --spotlight-to	The border light's colours (violet, pink, cyan)
--spotlight-light, --spotlight-light-size	The light inside the card and its radius
--spotlight-reach	How far the border light reaches — and so how far it spills onto neighbours
--spotlight-surface, --spotlight-surface-top, --spotlight-blur	The frosted glass
--spotlight-edge, --spotlight-border-width, --spotlight-sheen	The resting border and the top highlight
--spotlight-text, --spotlight-shadow, --spotlight-ring	Text, shadow, focus ring
--spotlight-radius, --spotlight-padding	Shape and size
--spotlight-rest	How bright the still glow is (featured cards, touch screens)
--spotlight-fade, --spotlight-follow, --spotlight-settle, --spotlight-ease	How fast the light fades and the tilt follows and settles
--spotlight-perspective	Depth of the tilt

On .spotlight-group: --spotlight-gap and --spotlight-min (narrowest column). Colours use light-dark(): they follow color-scheme on your page.

With prefers-reduced-motion, cards never tilt; the light keeps following the pointer, because nothing on the page moves — only a glow changes place.