Move the cursor over the card. A soft radial mask punches through the overlay so the base layer shows in the spotlight. With prefers-reduced-motion, the spotlight stays centered—no pointer tracking.
Base layer
Muted card surface. The pointer reveals this copy through the mask.
Overlay layer
High-contrast treatment with a subtle grid—only outside the spotlight.
Quiet base panel underneath
Gradient overlay — hover to peek
1import { CursorSpotlight } from "@/components/CursorSpotlight";2 3<CursorSpotlight4 className="w-full max-w-lg rounded-2xl border border-border shadow-sm"5 radius={150}6 softness={0.38}7 overlayClassName="bg-zinc-900 dark:bg-zinc-950"8 overlay={9 <div className="flex min-h-[220px] flex-col justify-end p-8 text-zinc-100">10 <p className="text-lg font-semibold">Overlay layer</p>11 </div>12 }13>14 <div className="flex min-h-[220px] flex-col justify-end bg-card p-8">15 <p className="text-lg font-semibold text-foreground">Base layer</p>16 </div>17</CursorSpotlight>