React Spotlight Background
Interactive cursor-following spotlight with smooth gradient glow that tracks mouse movement
React Spotlight Background preview
A soft, radial gradient that follows your cursor around the screen. It's that subtle spotlight effect you see on premium sites like Linear and Stripe—creates depth and draws attention without being distracting. The glow smoothly eases toward the cursor position rather than snapping, which feels much more natural. When there's no mouse activity (or on mobile), it drifts slowly in ambient mode. You can stack multiple spotlights with different colors for richer effects. It's pure CSS gradients with JS for positioning, so performance is excellent. Great for hero sections, pricing pages, or anywhere you want that polished, interactive feel.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the spotlight background into my projectRelated Components
Gradient Background
Floating gradient blobs
Aurora Background
Flowing aurora waves
Dot Pattern
Interactive dot grid
Gradient Animation
Animated gradient mesh
Interactive Grid
Mouse-reactive grid
Light Waves
Ambient wave animation
FAQ
Was this page helpful?
Sign in to leave feedback.