Online Tool Store
Fireworks Simulator
Launch peony, ring, willow and crackle shells with true flame-test metal colours, then save the sky as a PNG or share a link. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Tap or click the sky to launch one from there
Set it to zero to launch only by hand.
How to use it
- Tap or click anywhere in the sky to send one up from that spot.
- Pick a shell type and a colour — including real flame-test metal colours — then launch again to compare.
- Drag the sliders to change star count, gravity and the automatic rate.
- Press Finale for seven in quick succession, or set the rate to zero to launch by hand.
- Save the current sky as a PNG, copy a link that reopens with this exact setup, or go fullscreen.
Why the shells have the shapes they do
The difference between a firework that looks right and one that looks like scattered dots is almost entirely in how the star speeds are chosen at the moment of the burst:
peony speed × 0.88–1.12, random angle → hollow expanding sphere
ring speed × 0.97–1.03, even angles → one clean circle
willow speed × 0.35–0.70, heavy drag → slow drooping trails
naive speed × random() → filled blob, looks wrong
A real shell fires all its stars with one burst charge, so they leave at nearly the same speed and sit on a sphere that expands and then falls. Multiplying by a plain random number spreads them from nearly zero to full speed, which fills the centre and loses the bright leading edge. The narrow band is the whole trick.
The colour picker now includes real flame-test colours
Alongside random colours, gold and a custom hue, the colour menu has six metal presets taken from the standard flame-test table: lithium (carmine red), sodium (bright golden yellow), copper (blue-green), barium (light apple green), strontium (crimson to scarlet red) and magnesium (intense white). Magnesium needed one change beyond a new hue — a real "white" firework only reads as white at very low colour saturation, so that preset renders with the saturation turned almost all the way down instead of a hue that looks pale-but-tinted.
Three things that make the motion behave
The physics runs on a fixed step. Simulation advances in 1/120-second increments and drawing happens separately, so the show is identical on a 60 Hz and a 120 Hz display. Verified rather than assumed: the same star ends up at exactly the same coordinates at both rates. A 144 Hz screen leaves a fractional step over each frame, which comes to about half a pixel after a second.
Air resistance is exponential in time, not per frame. The usual shortcut is to multiply each velocity by something like 0.98 every frame, and it silently ties the physics to the refresh rate:
v *= 0.98 per frame, after one second
at 60 fps → 0.298 of the original speed
at 120 fps → 0.089 — three times the drag, same code
Writing it as exp(−k × dt) gives the same answer at any rate, which is why the trails hang for the same length of time whatever machine you are on.
Trails fade to transparent, not to black. The common way to get motion trails is to paint translucent black over the canvas each frame instead of clearing it. It never quite gets there — each pass leaves a fraction behind, so old trails settle into permanent grey smears. Fading with destination-out lowers the alpha instead and reaches zero cleanly, so the sky stays properly dark.
Keeping it from stalling
Two limits stop the simulation running away with itself. Old stars are dropped past about 2,600 in flight, so holding the finale button cannot grind the page to a halt. And the catch-up is capped at a quarter second per frame: without that, coming back to a tab left in the background tries to simulate every missed second at once and freezes the page on arrival.
FAQ
Why does a peony look like a hollow sphere rather than a blob?
Because that is what a real shell does. Every star is thrown out by the same burst charge, so they all leave at nearly the same speed and stay on an expanding sphere — which reads as a ring with a bright edge. Giving each star a random speed instead fills the middle in and looks like a smudge, which is the giveaway of a hastily written simulation.
Why does the shell always burst at the top of its climb?
The launch speed is solved from the height you clicked rather than set to a constant, so the rocket arrives at that height exactly as its upward speed reaches zero. At the default gravity that overshoots the mark by about 1.2 pixels, which is the accumulated error of stepping the physics rather than solving it.
Does it run the same on a 120 Hz screen?
Yes. Physics advances in fixed 1/120-second steps and the renderer just draws whatever the current state is, so 60 Hz and 120 Hz produce identical trajectories. Only an odd refresh rate like 144 Hz leaves a fractional step over, and that works out under a pixel.
What does gravity do at zero?
The stars keep going in straight lines, slowed only by air resistance, and the rocket has to burst on reaching its target height rather than at the top of an arc. It looks nothing like a real firework, which is a decent illustration of how much of the shape comes from gravity rather than from the burst.
Why did nothing move when the page loaded?
Because your system is set to reduce motion, and a page full of animation is exactly what that setting is asking about. Nothing starts until you press the button — the setting is respected rather than detected and ignored.
Is there any sound?
No. Audio that starts by itself is worse than no audio, and a browser will block it anyway, so the simulation is silent by design.
Are the metal colour presets — lithium, sodium, copper — actually accurate?
Yes, they follow the standard flame-test colours: lithium burns carmine red, sodium a bright golden yellow, copper blue-green, barium light apple green, strontium crimson to scarlet red, and magnesium an intense white. Real fireworks use these same metal salts to get their colours, so picking "Copper" here gives you the same blue-green a display would.
Can I save or share what I make?
Both. "Save PNG" downloads the current sky as an image, and "Copy share link" copies a URL with your shell, colour, star count, gravity and rate baked into it — opening that link reproduces the same setup, no account needed.
Does the Fullscreen button record or export video?
No, it only expands the sky to fill your screen using the browser's native fullscreen mode — press Esc or the button again to leave it. Recording a video isn't something this tool does.
How we compare
| Feature | Online Tool Store | Rollpie | thebestfireworks.com | Pyro Lab |
|---|---|---|---|---|
| Launch fireworks by clicking the sky | ✓ | ✓ | Auto-plays without a click | ✓ |
| Four named shell types with distinct built-in physics | ✓ | Manual sliders, no named presets | Not shown on the page | Not shown on the page |
| Frame-rate independent motion, verified at 60 Hz and 120 Hz | ✓ | Not disclosed | Not disclosed | Not disclosed |
| Respects your OS's reduced-motion setting | ✓ | Not disclosed | Not disclosed | Not disclosed |
| Chemistry-accurate flame-test colour presets | ✓ | Free-form hex palette, no element presets | Not shown on the page | ✓ |
| Share your setup with a link — no export step | ✓ | Exports PNG/SVG/WebM files instead | ✓ | Not shown on the simple simulator |
| Save the current sky as a PNG | ✓ | ✓ | Not shown on the page | Not shown on the page |
A few seconds of fireworks with physics that actually behaves — the same on any refresh rate, quiet if your system asked for quiet, and now easy to save or hand to someone else with a link. It still doesn't add sound or export a video; for a scripted, music-synced show, a dedicated show-design tool is the better fit for that job.