Spotlight
Stage beams and a cursor spotlight. Pro · Effects › Backgrounds
Stage lighting for a hero: light beams sweeping down from the top, or a pool of light that follows the pointer. Beams are soft-edged conic gradients rotated on the compositor; the radial light glides after a mouse or trackpad on a soft spring — moved with transforms in the kit's shared frame loop, only while it travels — and drifts home when the pointer leaves. Pauses off screen; with reduced motion the light holds still.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add spotlightnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Spotlight } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
variant | 'beam' | 'radial' | 'beam' | beam — two stage lights shining down from the top edge and sweeping slowly; radial — a soft pool of light that glides after the pointer. |
duration | number | 9 | Seconds per sweep of the beams. |
size | number | 360 | Radius of the radial light, px. |
colors | readonly [string] | readonly [string, string] | Light colours (one for both beams, or one each) replacing the theme's. |
Related components
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
- Particles — Particle field that reacts to the cursor
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
Previous: Fireworks Background · Next: Meteors · All Effects