Spotlight
A container that draws a radial gradient spotlight chasing the cursor position using CSS custom properties.
When to Use
- Hero sections and feature cards to add cursor-reactive depth.
- Dark-mode landing pages where a subtle glow elevates the design.
- Wrapping any container where you want to draw attention to the hovered area.
Hover over me
The spotlight follows your cursor.
Violet Spotlight
Color and opacity are both configurable.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | Content rendered inside the spotlight container. |
| Color | string | "var(--color-primary)" | CSS color of the spotlight gradient center. |
| Opacity | double | 0.15 | Opacity of the spotlight glow (0–1). |
| Radius | int | 300 | Radius of the spotlight circle in px. |
Related Components
- MagneticButton — Cursor-reactive button translation effect.
- BorderBeam — Animated gradient beam around a container border.