Loading...
Installation
Usage
import SpotlightBackground from "@/components/ruixen/spotlight-background";
export default function App() {
return (
<div className="relative h-screen w-full bg-black">
<SpotlightBackground />
<div className="relative z-10">{/* Your content here */}</div>
</div>
);
}Features
- Mouse Following: The spotlight follows your mouse cursor
- Smooth Animations: Transitions smoothly between moving and idle states
- Responsive Size: Spotlight size changes based on movement state
- Performance Optimized: Uses CSS transforms for smooth animations
Customization
The component uses CSS custom properties and can be customized by modifying the spotlight styles:
.spotlight-element {
background: radial-gradient(
circle,
rgba(56, 189, 248, 0.7) 0%,
transparent 70%
);
width: 220px; /* when moving */
height: 220px; /* when moving */
}
.spotlight-element.idle {
width: 280px; /* when idle */
height: 280px; /* when idle */
}