Effects/SpotlightCard
SpotlightCard
A card that tracks your cursor with a radial gradient spotlight, creating a depth and focus effect. Zero JS overhead — pure CSS radial-gradient updated on mousemove.
import { SpotlightCard } from "@animui/ui"Basic
Spotlight Card
Hover to see the effect
Feature grid
Use multiple SpotlightCards in a grid for feature sections.
Fast
Hover to spotlight
Accessible
Hover to spotlight
Animated
Hover to spotlight
Props
| Prop | Type | Default | Description |
|---|---|---|---|
spotlightColor | string | "rgba(139,92,246,0.12)" | CSS color of the spotlight gradient. |
spotlightSize | number | 350 | Diameter of the spotlight circle in px. |
className | string | — | Additional classes on the card. |