SpotlightCard

A card with a soft radial spotlight that follows the cursor on hover. Great for feature grids, pricing tiers, and product highlights.

Interactive Demo

Hover any card to reveal the spotlight.

Usage

import { SpotlightCard } from "@mantleui/react/motion";

<SpotlightCard
  spotlightColor="rgba(59,130,246,0.15)"
  size={350}
  className="rounded-xl border border-zinc-800 bg-zinc-900 p-6"
>
  <h3>Lightning fast</h3>
  <p>Tree-shakable components with zero runtime overhead.</p>
</SpotlightCard>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Card content.
`spotlightColor`	`string`	`"rgba(255,255,255,0.1)"`	Spotlight color that follows the cursor.
`size`	`number`	`400`	Spotlight radius in pixels.
`className`	`string`	—	Additional class name for the card container.
`style`	`CSSProperties`	—	Inline styles for the card container.

children

ReactNode

Card content.

spotlightColor"rgba(255,255,255,0.1)"

string

Spotlight color that follows the cursor.

size400

number

Spotlight radius in pixels.

className

string

Additional class name for the card container.

style

CSSProperties

Inline styles for the card container.