Spotlight Card

Interactive

A surface lit by a pointer-following spotlight — a soft radial face wash plus a mask-composited border-glow ring, both tracked through CSS custom properties written on pointermove so nothing re-renders per frame.

Inspired by Componentry — Spotlight Card (free, MIT) — independently built, not affiliated. Attribution policy

Pointer light

Move your cursor across the card. The wash and the lit edge follow it.

Signal

Each card measures its own bounds, so a whole grid lights independently.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/spotlight-card.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/spotlight-card.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full items-center justify-center bg-[#0f0f10] p-8">
    <div className="grid w-full max-w-md grid-cols-1 gap-4 sm:grid-cols-2">
      <SpotlightCard glowColor="#8b5cf6" className="p-5">
        <div className="text-sm font-semibold text-white">Pointer light</div>
        <p className="mt-1.5 text-xs leading-relaxed text-white/55">
          Move your cursor across the card. The wash and the lit edge follow it.
        </p>
      </SpotlightCard>
      <SpotlightCard glowColor="#22d3ee" radius={260} className="p-5">
        <div className="text-sm font-semibold text-white">Signal</div>
        <p className="mt-1.5 text-xs leading-relaxed text-white/55">
          Each card measures its own bounds, so a whole grid lights independently.
        </p>
      </SpotlightCard>
    </div>
  </div>

Props

SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
glowColor	string	"#8b5cf6"	Colour of the spotlight and edge glow. Mirrors the site `--pb-violet` token.
radius	number	320	Diameter of the light pool, in px. Larger = softer, wider wash.
children	React.ReactNode	—	Card contents. Rendered above every decorative layer.