Spotlight
A dynamic spotlight effect component that follows cursor movement.
Examples
Spotlight Basic 1
Spotlight Custom Color
The light is a radial fill made from gradient stops of one colour. Change it with from-*, via-* and to-* classes of the same token, for example from-info via-info/60 to-info/20.
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@latest add https://ui.ndekocode.dev/r/motion-spotlight.jsonComponent 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