Spotlight Card Component

A card with a radial spotlight glow that smoothly follows the cursor, adding depth and interactivity to any content.

Features

Cursor-following radial spotlight built on motion values for jank-free updates.
Fully customizable glow color and size.
Works with any content via children.
Can be disabled for static contexts.

Spotlight Card

Move your cursor across the card to reveal the spotlight that follows your pointer.

Playground

Adjust the spotlight size and color, then move your cursor across the card.

Spotlight Card

Move your cursor across the card to reveal the spotlight.

Controls

Spotlight size (px)350

Spotlight color

Disable effect

Installation

npx shadcn@latest add @sona-ui/spotlight-card

Usage


export default function SpotlightCardExample() {
  return (
    <SpotlightCard className="max-w-sm">
      <h3 className="text-foreground text-lg font-semibold">Spotlight Card</h3>
      <p className="text-muted-foreground mt-2 text-sm">
        Move your cursor across the card to reveal the spotlight that follows
        your pointer.
      </p>
    </SpotlightCard>
  );
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The content rendered inside the card.
`className`	`string`	`—`	Additional CSS classes for the card.
`spotlightColor`	`string`	`"rgba(255,255,255,0.15)"`	The color of the spotlight glow. Accepts any CSS color value.
`spotlightSize`	`number`	`350`	The radius of the spotlight in pixels.
`disabled`	`boolean`	`false`	Disables the spotlight effect.