Fireworks Background
Fireworks for wins and achievements, launch on click. Pro · Effects › Backgrounds
Fireworks behind content: rockets rise, burst into sparks that slow, fall and crackle out, each drawing a short fading streak (and, with the theme's glow, a soft halo). On a dark sky the light adds up into a bloom where sparks crowd and fresh sparks burn white-hot before cooling to their colour. For moments of celebration (a win, a new rank), not a permanent backdrop. The sky opens with a salute already bursting. The canvas runs at a capped pixel ratio and only while on screen and the tab is visible; reduced motion draws a still burst.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add fireworks-backgroundnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FireworksBackground } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
population | number | 1 | Launches per second, roughly (default 1). |
color | string | readonly string[] | One colour or a palette for the bursts (default: the theme's chart colours). | |
fireworkSpeed | Range | { min: 4, max: 8 } | Launch speed range, px per frame at 60 fps (default 4–8). |
fireworkSize | Range | { min: 2, max: 5 } | Rocket size range, px (default 2–5). |
particleSpeed | Range | { min: 2, max: 7 } | Burst speed range of the sparks, px per frame at 60 fps (default 2–7). |
particleSize | Range | { min: 1, max: 5 } | Spark size range, px (default 1–5). |
glow | number | Soft halo around each spark, 0–1 (default: the theme's --ui-fireworks-background-glow). | |
launchOnClick | boolean | true | A click or tap launches a rocket at that point (default true). |
canvasProps | ComponentPropsWithoutRef<'canvas'> | Props for the canvas element. |
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
- 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: Hole Background · Next: Spotlight · All Effects