# Spotlight Background

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/spotlight-background

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/spotlight-background?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt