Animated Spotlight
Cursor spotlight overlay with spring follow and blur control.
Cursor Spotlight
Move your cursor to reveal a soft glow that follows your movement.
White Spotlight
A neutral white glow for a cleaner, minimal aesthetic.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/animated-spotlight.tsx
Installation
Using shadcn CLI
npx shadcn add animated-spotlight --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Backgrounds Components
Dot Pattern Background
Animated dot grid background with a soft wave motion.
Meteors Background
Animated meteor streaks background for hero sections or cards.
Morphing Blob
Animated SVG blob that morphs between shapes with smooth transitions. Perfect for dynamic backgrounds or visual interest.
Noise Texture Background
Subtle animated grain overlay for sections and cards.
Parallax Section
Layered parallax section with foreground and background motion.
Particle Field
Interactive particle field with floating particles that respond to mouse movement. Optional connection lines for a network effect.