Meteors
Falling meteors. Pro · Effects › Backgrounds
Meteors streaking across the area behind its content. Positions and timing come from a seeded generator, so server and client render the same markup; every meteor is a CSS animation of transform and opacity that pauses off screen, started part-way through its cycle so the shower is already falling on the first frame. Reduced motion freezes them mid-flight.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add meteorsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Meteors } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
count | number | 18 | Number of meteors. |
angle | number | 35 | Slant of the fall in degrees from vertical; positive falls towards the left, negative towards the right. |
seed | number | 7 | Seed of the layout: the same seed always places and times the meteors the same way. |
fade | 'none' | 'start' | 'end' | 'none' | Where the meteors stay visible; they fade out towards the other side, keeping text there clear. none fills the whole area. |
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
- Spotlight — Stage beams and a cursor spotlight
- 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: Spotlight · Next: Background Pattern · All Effects