Aurora Background
Slow aurora behind your content. Pro · Effects › Backgrounds
Slow-moving aurora light behind content. Two bands of soft colour drift past each other on the compositor (transform only) and pause while the area is off screen or the tab is hidden. Reduced motion keeps a still frame; children render above the light in normal flow.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add aurora-backgroundnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { AuroraBackground } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
duration | number | 40 | Seconds for one drift cycle of the light bands; larger is calmer. |
fade | 'top' | 'center' | 'none' | 'top' | Where the aurora is brightest; it fades out away from there. none fills the whole area. |
colors | readonly [string, string, string] | Three colours that replace the theme's aurora palette. |
Related components
- 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
- Spotlight — Stage beams and a cursor spotlight
- 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: Floating Tab Bar · Next: Gradient Background · All Effects