Spotlight

A dynamic spotlight effect component that follows cursor movement.

A dynamic spotlight effect component that follows cursor movement.

Examples

You can customize the color with using Tailwind CSS gradient color stop. (e.g from-blue-800 via-blue-600 to-blue-400)

You can create a spotlight border by creating a container with a padding that will be used as a border.

npx shadcn@latest add "https://components.dylanwlim.com/c/spotlight.json"

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

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.