Fireworks Background
betaRockets rise on a timer and burst into peonies, rings and willows of sparks that drag, fall, fade and crackle, cycling through the theme's colours; a click launches one at the pointer.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add fireworks-backgroundnpm packages installed: class-variance-authority.
import { FIREWORKS } from "@/components/ui/fireworks-background";Default
Monochrome
On Click
Finale
<FireworksBackground>
| Prop | Type | Default |
|---|---|---|
autoLaunchLaunch rockets on a timer. Default true. | boolean | true |
colorPaint every burst in one colour token. Omit to cycle through | string | — |
fade | "none" | "bottom" | "none" |
interactiveA click or tap launches a rocket that bursts at the pointer. Default true. | boolean | true |
paletteColour tokens the bursts cycle through. Default FIREWORKS_PALETTE. | readonly string[] | FIREWORKS_PALETTE |
particleCountSparks per burst. Default 70. | number | 70 |
rateAutomatic launches a second, on average, capped at 3. Default 0.8. | number | 0.8 |
seedSeed for launch timing, positions and burst shapes. Default 1. | number | 1 |
Plus every attribute of <div>.
The show is decoration: the canvas is aria-hidden and ignores the pointer, and children render above it in their own layer with their roles, focus order and hit areas intact. A press launching a rocket is an optional flourish tracked on the root without capturing or cancelling the event, so a button inside still works and nothing depends on it. Bursts are soft and short; automatic launches are capped at three a second, whatever the `rate`. The loop pauses off-screen and in hidden tabs; under reduced motion (or a --motion-scale near zero) it draws one still frame of three frozen bursts, and presses do nothing. Colour carries no meaning: every burst is equally decorative.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes