Components
/
Spotlight
Spotlight
A spotlight effect that follows the mouse cursor with smooth animations.
Hover to see the spotlight
Installation
npx shadcn@latest add https://ui.saturation.io/r/spotlight.jsonUsage
import { Spotlight } from "@/components/ui/spotlight"
export default function Example() {
return (
<div className="relative overflow-hidden rounded-xl border bg-zinc-900">
<Spotlight
className="bg-purple-500/30 blur-2xl"
size={150}
springOptions={{ bounce: 0.3, duration: 0.1 }}
/>
<div className="relative p-6">
<h3 className="text-xl font-semibold text-white">Spotlight Card</h3>
<p className="mt-2 text-zinc-400">
Hover to see the spotlight effect.
</p>
</div>
</div>
)
}Examples
Border Spotlight
A spotlight effect on a border with a 1px padding.
Card Spotlight
A spotlight effect on a card background.
Spotlight Card
Hover over this card to see the spotlight effect follow your cursor.
Large Spotlight
A larger spotlight with custom colors.
Large Spotlight
Move your mouse to see the effect
Multiple Cards
Multiple cards with individual spotlight effects.
Card One
Red spotlight effect
Card Two
Cyan spotlight effect
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes for styling the spotlight gradient |
| size | number | 200 | Size of the spotlight in pixels |
| springOptions | SpringOptions | { bounce: 0 } | Framer Motion spring configuration for smooth animations |
On This Page
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.