Back to Components
Components
Cursor Spotlight
A spotlight section that tracks the cursor and reveals content inside the highlight.
Spotlight
Cursor guided focus
Move your cursor to reveal the highlight and bring focus to key details.
- ●Real time tracking
- ●Soft reveal mask
- ●Premium presentation
- ●Smooth motion
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/cursor-spotlight.tsx
Installation
Using shadcn CLI
npx shadcn add cursor-spotlight --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motion