Components
Loading preview...
This component creates a smooth circular spotlight effect that dynamically follows the user’s cursor. Unlike scattered or fuzzy glow effects, this version uses a clean radial gradient to form a crisp yet soft circle that expands and contracts based on cursor movement. When the cursor is in motion, the circle becomes slightly smaller, and when idle, it gently grows larger, creating a natural breathing-like interaction. The effect provides a modern and elegant way to bring focus and interactivity to any page background, making it suitable for both dark and light themes. It’s lightweight, reusable, and ideal for hero sections, portfolios, or interactive landing pages where subtle motion enhances the user experience without overwhelming the content.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/spotlight-backgroundimport SpotlightBackground from "@/components/ui/spotlight-background";
export default function Demo() {
return (
<div className="relative w-full h-screen bg-white dark:bg-slate-950 overflow-hidden">
<SpotlightBackground />
<div className="relative z-10 flex items-center justify-center h-full">
<p className="text-lg text-gray-700 dark:text-slate-300 md:text-xl text-center">
A smooth glowing light that follows your cursor.
</p>
</div>
</div>
);
}