A card with a radial spotlight glow that follows the pointer, optionally lighting the border.

Hobby

$0/mo

For side projects and prototypes.

1 project
Community support
1k events / mo

Pro

Popular

$24/mo

For teams shipping to production.

Unlimited projects
Priority support
1M events / mo
SSO & audit logs

Enterprise

Custom

For organizations at scale.

SLA & uptime guarantee
Dedicated CSM
On-prem option

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/spotlight-card.json"

SpotlightCard writes the pointer position to CSS variables on each move — no React re-render — and reveals a radial gradient that fades in on hover. The border highlight is the same gradient masked to the 1px ring.

Usage

tsx

import { SpotlightCard } from "@/components/godui/spotlight-card";

tsx

<SpotlightCard className="p-8">
  <h3>Title</h3>
  <p>Body copy</p>
</SpotlightCard>

Custom glow

glowColor accepts any CSS color; radius controls the spotlight size in pixels.

tsx

<SpotlightCard glowColor="color-mix(in oklch, oklch(0.7 0.2 320) 50%, transparent)" radius={250} />

Without a border glow

tsx

<SpotlightCard border={false} />

Examples

Single card

A standalone surface — move the pointer across it to see the glow track and the border light up.

Pointer-aware surface

A soft radial glow follows the cursor and lights the 1px border.

Custom glow color

Any color you like

Pass any CSS color through glowColor.

Border glow

With border enabled (the default), the same gradient is masked to the 1px ring, so the border itself lights up where the pointer is closest. Move along the edges.

Trace the edge

The border brightens where the pointer is closest, then fades behind it.

Props

Prop	Type	Default	Description
`glowColor`	`string`	`color-mix(in oklch, var(--primary) 40%, transparent)`	Color of the spotlight glow.
`radius`	`number`	`350`	Spotlight radius in pixels.
`border`	`boolean`	`true`	Also light the card border on move.

SpotlightCard also forwards every standard <div> attribute to the root element.

Spotlight Card