Signature / Moleculestable

Spotlight Card

Card with cursor-tracked radial spotlight effect on hover.

@glinui/uiComponent: spotlight-card

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add spotlight-card

Usage$

SpotlightCard wraps GlassCard and tracks the cursor position via CSS custom properties --spot-x and --spot-y to project a radial spotlight onto the card surface. Move your pointer over the card below to see the effect.

Spotlight Card

Hover to reveal the cursor-tracked spotlight effect.

TSX

1import { SpotlightCard } from "@glinui/ui"
2
3export function SpotlightCardBasicDemo() {
4return (
5  <div className="flex items-center justify-center min-h-[240px] bg-gradient-to-br from-neutral-950 to-neutral-900 rounded-xl p-8">
6    <SpotlightCard className="w-72">
7      <p className="text-sm font-semibold text-foreground">Spotlight Card</p>
8      <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
9        Hover to reveal the cursor-tracked spotlight effect.
10      </p>
11    </SpotlightCard>
12  </div>
13)
14}

Examples$

Custom Spotlight Color$

Pass spotlightClassName to override the radial gradient used for the spotlight. The overlay is a radial-gradient positioned at --spot-x / --spot-y, so swapping the color stop is the only change needed.

Default

White radial light

Indigo

Accent-colored light

Amber

Warm golden light

TSX

1import { SpotlightCard } from "@glinui/ui"
2
3export function SpotlightCardColorDemo() {
4return (
5  <div className="flex flex-wrap items-center justify-center gap-4 bg-gradient-to-br from-neutral-950 to-neutral-900 rounded-xl p-8">
6    {/* Default — white light */}
7    <SpotlightCard className="w-52">
8      <p className="text-xs font-semibold text-neutral-400 uppercase tracking-widest">Default</p>
9      <p className="mt-2 text-sm text-neutral-300">White radial light</p>
10    </SpotlightCard>
11
12    {/* Indigo accent */}
13    <SpotlightCard
14      className="w-52"
15      spotlightClassName="[background:radial-gradient(220px_circle_at_var(--spot-x,_50%)_var(--spot-y,_50%),rgb(99_102_241_/_0.35),transparent_70%)]"
16    >
17      <p className="text-xs font-semibold text-neutral-400 uppercase tracking-widest">Indigo</p>
18      <p className="mt-2 text-sm text-neutral-300">Accent-colored light</p>
19    </SpotlightCard>
20
21    {/* Amber warmth */}
22    <SpotlightCard
23      className="w-52"
24      spotlightClassName="[background:radial-gradient(220px_circle_at_var(--spot-x,_50%)_var(--spot-y,_50%),rgb(251_191_36_/_0.3),transparent_70%)]"
25    >
26      <p className="text-xs font-semibold text-neutral-400 uppercase tracking-widest">Amber</p>
27      <p className="mt-2 text-sm text-neutral-300">Warm golden light</p>
28    </SpotlightCard>
29  </div>
30)
31}

Sizes$

SpotlightCard inherits the size prop from GlassCard — sm, md, or lg — which controls internal padding.

Small — p-4

Compact padding for dense layouts

Medium — p-6

Default comfortable padding

Large — p-8

Generous padding for hero cards

TSX

1import { SpotlightCard } from "@glinui/ui"
2
3export function SpotlightCardSizeDemo() {
4return (
5  <div className="flex flex-col gap-4 bg-gradient-to-br from-neutral-950 to-neutral-900 rounded-xl p-8">
6    <SpotlightCard size="sm" className="w-full">
7      <p className="text-sm font-semibold text-foreground">Small — p-4</p>
8      <p className="text-xs text-neutral-500 mt-1">Compact padding for dense layouts</p>
9    </SpotlightCard>
10    <SpotlightCard size="md" className="w-full">
11      <p className="text-sm font-semibold text-foreground">Medium — p-6</p>
12      <p className="text-xs text-neutral-500 mt-1">Default comfortable padding</p>
13    </SpotlightCard>
14    <SpotlightCard size="lg" className="w-full">
15      <p className="text-sm font-semibold text-foreground">Large — p-8</p>
16      <p className="text-xs text-neutral-500 mt-1">Generous padding for hero cards</p>
17    </SpotlightCard>
18  </div>
19)
20}

Feature Grid$

A common landing-page pattern: a grid of SpotlightCard components on a dark backdrop creates interactive feature sections with zero animation boilerplate.

Fast by Default

Zero-config tree-shaking and code splitting out of the box.

Type-Safe API

Every prop is typed end-to-end with TypeScript generics.

Composable

Radix primitives at the core — extend without fighting the API.

TSX

1import { SpotlightCard } from "@glinui/ui"
2
3const features = [
4{ title: "Fast by Default", body: "Zero-config tree-shaking and code splitting out of the box." },
5{ title: "Type-Safe API", body: "Every prop is typed end-to-end with TypeScript generics." },
6{ title: "Composable", body: "Radix primitives at the core — extend without fighting the API." },
7]
8
9export function SpotlightFeatureGridDemo() {
10return (
11  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 bg-gradient-to-br from-neutral-950 to-neutral-900 rounded-xl p-8">
12    {features.map((f) => (
13      <SpotlightCard key={f.title} size="sm">
14        <p className="text-sm font-semibold text-foreground">{f.title}</p>
15        <p className="mt-1 text-xs text-neutral-500 leading-relaxed">{f.body}</p>
16      </SpotlightCard>
17    ))}
18  </div>
19)
20}

Accessibility$

The spotlight overlay carries aria-hidden="true" and pointer-events-none so it is invisible to assistive technology and cannot intercept interactions.
All content inside the card remains fully keyboard-accessible and semantically structured.
SpotlightCard does not modify focus behavior — interactive children (buttons, links) work as expected.

Reduced Motion$

The spotlight overlay is hidden entirely when prefers-reduced-motion: reduce is set via motion-reduce:hidden. The underlying GlassCard hover transition (transform, box-shadow) is also disabled via motion-reduce:transition-none and motion-reduce:hover:translate-y-0, ensuring zero motion for users who prefer it.

API Reference$

SpotlightCard$

Accepts all props from GlassCard (which in turn accepts all div HTML attributes). The only additional prop is spotlightClassName.

Prop	Type	Required	Default	Description
`spotlightClassName`	`string`	No	`-`	Auto-generated from TypeScript source.

Source$

TSX

1import { SpotlightCard } from "@glinui/ui"

packages/ui/src/components/spotlight-card.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/spotlight-card.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SpotlightCardProps

`SpotlightCardProps`

Prop	Type	Required	Default	Description
`spotlightClassName`	`string`	No	`-`	-