Fireworks Background for React

Fireworks sends rockets up from the bottom of the box. Each one slows as it climbs and bursts, anywhere from high in the sky to low over the ground, into a spray of sparks that spread out, slow down, droop under gravity and fade, each drawing a continuous streak behind it. A faint glow lies along the ground, so the frame stays balanced between bursts. A new rocket goes up every 600 milliseconds or so, and a click on empty space launches one toward the pointer.

Use it for launches, milestones and celebration pages. For paper drifting down instead, use Confetti; for what's left long after a star explodes, Supernova; for points that twinkle without any physics, Sparkles. It's a small canvas simulation with drag and gravity; each frame strokes every spark's streak from where it was, batched into one path per color and brightness, the trails come from fading the previous frames, and it stops when it scrolls out of view.

Installation

Usage

import { Fireworks } from "@/components/ui/fireworks";

<Fireworks className="min-h-[480px]">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</Fireworks>

Fireworks is a container: give it a size, put your content inside, and the show runs behind it. The canvas is transparent, so it sits on whatever background you give the container. It follows your theme: deep colors painted on a light page, so the sparks read on paper, and bright light added on a dark one, where crossing sparks glow brighter. For a background behind the whole page, pass className="fixed inset-0 -z-10" and no children.

Demos

Night sky

On a bg-slate-950 section with interval={400}, rockets go up more often. The section adds the dark class, so it gets the bright night palette on a light page too. Click the sky to launch your own; at most three bursts go off a second, clicks included.

Colors

colors takes up to six CSS colors, and each burst picks one; here two golds. interactive={false} turns off click-to-launch, so the card stays a plain card.

Accessibility

The show is decoration: it's hidden from assistive tech and never takes focus. Clicks on your links, buttons and form fields are left alone; only a click on empty space launches a rocket. At most three bursts go off a second, however often rockets are launched or clicked, and no burst covers much of the screen. With reduced motion nothing launches and nothing moves: three bursts stay as a still picture, and clicks do nothing. Sparks are thin and pass quickly, so copy in text-foreground (or a light color on a dark background) stays readable over them; it keeps above 4.5:1 in both color schemes.

FAQ

API Reference