Spotlight
A dynamic spotlight effect component that follows cursor movement.
Examples
Spotlight Basic 1
Spotlight Custom Color
You can customize the color with using Tailwind CSS gradient color stop. (e.g from-blue-800 via-blue-600 to-blue-400)
Spotlight Border
You can create a spotlight border by creating a container with a padding that will be used as a border.
Installation
npx shadcn add "https://motion-primitives.com/c/spotlight.json"Component API
Spotlight
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional CSS classes for styling |
| size | number | 200 | Size of the spotlight effect in pixels |
| springOptions | SpringOptions | { bounce: 0 } | Animation spring configuration |
Credit
Initiated by @divyanshu-vashishth