A free fireworks simulator online, with a New Year countdown for kids, and how to make your own

Your own fireworks show and New Year countdown, built in stages

A fireworks display looks like magic, but every burst is just a few hundred dots, each pulled down by gravity and slowed by the air. That makes it a brilliant thing to build with AI: you describe what you want to see in plain English, and the assistant writes the code. You won't write any yourself. You describe, paste, test and paste back any errors.

• A fireworks show over a city skyline that opens in any web browser, works offline and runs smoothly on a laptop, phone or TV
• Rockets that climb with a trail of sparks and burst exactly where you tap
• Seven kinds of firework: peony, chrysanthemum, willow, ring, glitter, heart and multi-break
• Bangs and crackles made live by the browser, with no sound files
• An auto show and a grand finale button
• A New Year countdown with big numbers for the last ten seconds, a “Kids’ midnight” for early bedtimes and a practice run you can try any day

Good for: families planning New Year’s Eve, anyone hosting a party on the 4th of July or Bonfire Night, children who love fireworks but not the loud real ones, and anyone who’s built one of our games and wants something beautiful next.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. So this guide builds the fireworks in stages. After each stage, play with it, check it works and save a copy (fireworks-v1.html, fireworks-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

The idea behind it is called a particle system: thousands of tiny dots, each with its own position, speed and lifetime, moved forward a little every frame. AI assistants know it well, because it's how games make fire, smoke, rain and explosions.

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The fireworks at the top of this page are roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. A rocket that bursts where you click

   The first version is a night sky over a city. Click anywhere and a rocket climbs up and bursts into a ball of glowing sparks right where you clicked.

   Copy this promptCopy

   I don't know how to code. Please make me a fireworks simulator that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it. No external libraries and no internet connection.
   - A wide canvas with a dark night sky that fades from deep navy at the top to purple near the horizon, a scattering of faint stars, and a black city skyline along the bottom with a few lit windows. Make it sharp on high-resolution screens by using devicePixelRatio.
   - When I click the sky, launch a rocket from the bottom of the screen. It climbs towards the spot I clicked, slowing down as it gets there, leaving a short trail of gold sparks. When it reaches that spot, it bursts.
   - A burst is about 100 "particles": small glowing dots that fly out in all directions. Each one has a position, a speed and a lifetime. Every frame, slow each particle down a little (air drag), pull it down a little (gravity), move it, and fade it out near the end of its life.
   - Draw each particle as a short line from where it was last frame to where it is now, using the "lighter" blend mode so overlapping light adds up and glows.
   - For trails, don't clear the screen each frame. Instead, draw the night sky over everything at about 20% opacity, so old sparks fade away slowly. Redraw the skyline on top every frame so the fireworks go behind the buildings.
   - Add a soft flash of light where each burst happens.
   - Put a hint on the canvas: "Click the sky to launch a firework".
   - Run it with requestAnimationFrame.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as fireworks.html and double-click it. Click the sky and you should see a rocket climb up and burst into a ball of colour that droops and fades.

   Nothing happens? Press F12 (or Cmd+Option+I on a Mac), click the Console tab, copy any red text and paste it into the chat. The AI fixes most errors straight away once it can see the message.

2. Seven kinds of firework

   Real fireworks come in named shapes, called shells. This step adds seven of them, each with its own look, and a row of buttons to pick one.

   Copy this promptCopy

   That works, thank you! Now please add different kinds of firework ("shells"):
   - Peony: a round ball of colour. Pick each particle's direction as a random point on a sphere seen from the side, so it looks round and solid. Sometimes use two colours, and sometimes add a small white ball in the middle.
   - Chrysanthemum: like a peony, but each particle leaves its own trail of tiny fading silver or gold sparks as it flies.
   - Willow: long, drooping gold. Particles live 3 to 4 seconds, with lots of air drag and their own trails, so they hang and fall like a weeping willow tree.
   - Ring: a perfect hoop of particles, tilted at a random angle so it looks like a ring seen in 3D.
   - Glitter: gold and white particles that twinkle on and off, then each one pops into a few tiny white sparks at the end.
   - Heart: particles that fly out in a heart shape (use the heart curve x = 16 sin³t, y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t).
   - Multi-break: about 12 bright stars that fly out, then each one bursts again into a small ball of a different colour.
   - Choose the size of every burst from the size of the canvas, so it looks right on a phone and on a big screen. To make a burst a set size, give each particle a starting speed of size x drag.
   - Under the canvas, a row of buttons: Mixed, Peony, Chrysanthemum, Willow, Ring, Glitter, Heart and Multi-break, with the selected one highlighted. Mixed picks a random type for each rocket. When I click a button, launch one of that type straight away so I can see it.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Bangs and crackles

   Sound makes it feel real. The browser can make a convincing bang from “noise” (a hiss like an untuned radio), so you don't need any sound files at all.

   Copy this promptCopy

   Please add sound with the Web Audio API, made in code with no sound files:
   - Make a 2-second buffer of white noise once, and reuse it for every sound.
   - Bang: play the noise through a low-pass filter that sweeps down from about 3,400 Hz to 250 Hz, with a very fast start and a fade over about a second. Add a short low "thump" (a sine wave dropping from about 115 Hz to 40 Hz).
   - Delay each bang a little based on how high the burst is, from about 0.05 seconds for low ones to 0.35 seconds for high ones, because light travels faster than sound. Make high bursts a little quieter, and pan each sound left or right to match where it is.
   - Crackle: for glitter shells, about 30 tiny clicks of high-pass filtered noise, scattered over half a second, timed to when the sparks pop.
   - Rockets: a quiet rising "whoosh" (noise through a band-pass filter that sweeps upwards) as they launch.
   - Send everything through a compressor so lots of bangs at once never distort, and skip some sounds if there are already lots playing.
   - Browsers only allow sound after I tap or click. Start with the sound off, then switch it on with my first tap on the sky.
   - Add a clear "Sound on / Sound off" button above the canvas.
   
   Send me the complete updated file.

4. An auto show and a grand finale

   Now it puts on a show by itself, so the sky is never empty, and one button sets off a big finale.

   Copy this promptCopy

   Please add:
   - An auto show that's on when the page opens: launch a rocket every 0.7 to 1.6 seconds at a random spot in the upper part of the sky, sometimes two at once. Use the shell type I've chosen, or random ones for Mixed.
   - When the page opens, start with one burst already open and two rockets on their way, so it never looks empty.
   - An "Auto show" button to turn it on and off, highlighted when it's on.
   - A big yellow "Grand finale" button that launches about 40 rockets over 7 seconds: a quick opening, then pairs getting faster, then nine at once right across the sky, then five gold willows hanging over the city to finish. Rockets in the finale climb faster.
   - A Pause/Play button that freezes everything.
   - Dragging across the sky should launch a stream of rockets along my path, at most one every 0.1 seconds.
   - Hide the hint after my first tap, and draw a small fading ring where I tapped, so I know it heard me.
   
   Send me the complete updated file.

   Something stopped working? Tell the AI exactly what you did and what happened, for example: "When I press Grand finale, the auto show stops for good. It should carry on afterwards." That's usually all it needs.

5. The New Year countdown

   This is the part families love: a giant countdown to midnight, with an earlier “Kids’ midnight” for children who won't make it to twelve, and a practice run you can try today.

   Copy this promptCopy

   Please add a New Year countdown:
   - Two tabs above the canvas: "Fireworks" and "New Year countdown".
   - In countdown mode, show a big, friendly countdown over the sky in hours : minutes : seconds, with small labels underneath, counting down to midnight on New Year's Eve in my own time zone. If it's more than a day away, show the number of days above it.
   - Work the time out from the real clock (Date.now()) every frame, never by counting frames, so it stays exact even if the tab was in the background.
   - A "Kids’ midnight" option, with buttons for 6 pm, 7 pm, 8 pm and 9 pm and a box to type any other time. It counts down to that time today (or tomorrow, if it has already gone), so children can celebrate before bed.
   - A "Practice: count down from 10" button that starts a 10-second countdown right now, so I can try it on any day.
   - For the last 10 seconds, hide the clock and show one huge number in the middle of the sky, popping in each second with a beep. Pause the auto show so the sky is dark and exciting.
   - At zero, play a grand finale and show "Happy New Year 2027!" in big festive letters. Work the year out from the date, never type it in.
   - A "Full screen" button so I can put it on the TV at a party, with Sound and Exit buttons in the corner while it's full screen.
   
   Send me the complete updated file.

6. Make it solid on phones, laptops and TVs

   The last step makes it feel finished, and stops it ever freezing, however many fireworks go off at once.

   Copy this promptCopy

   Please finish it off:
   - Never let more than 4,000 particles exist. Store them in typed arrays (Float32Array) instead of lots of little objects, and when one dies, swap the last one into its place.
   - Draw them quickly: group the particles by colour and brightness, and draw each group with one path and one stroke, instead of one at a time.
   - Draw the glows from small ready-made images (an offscreen canvas for each colour) instead of making a new gradient every frame.
   - If a frame takes too long, use fewer particles per burst, so it slows down gently instead of freezing.
   - Phones: tapping the sky must never scroll or zoom the page (touch-action: none, and preventDefault on touch events). Make the canvas taller than it is wide on narrow screens, and make sure nothing on the page scrolls sideways.
   - Use devicePixelRatio (up to 2) so it's crisp on every screen, and resize properly when the window changes or goes full screen.
   - Stop the animation and the sound when the tab is hidden, to save the battery.
   - Keep it running even if my computer has "reduce motion" turned on. The motion is the whole point.
   
   Send me the complete updated file.

Quick fixes

The fireworks get slow when lots go off at once. Please make it faster: cap it at 4,000 particles in typed arrays, use fewer particles per burst when there are already lots, stop adding trail sparks when it's nearly full, group the particles by colour so each group draws in one stroke, and draw glows from ready-made images instead of new gradients. Send me the complete fixed file.

Questions people ask

Twist it into something else

Once your fireworks work, you can turn them into all sorts of things:

Made something amazing? Send it to us. We feature reader projects.

Why a few hundred dots look like real fireworks

Every burst is a particle system: a list of tiny dots, each with a position, a speed and a lifetime. Sixty times a second the program nudges every dot by its speed, and that's all movement is.

Two small rules make the dots behave like the real thing. Gravity adds a little downward speed every frame, which is why bursts droop and willows fall like drooping branches. Drag takes away a small share of the speed every frame, the way air slows the burning stars of a real shell. Together they give the famous fireworks shape: a fast burst that slows, hangs for a moment, then falls. Change the drag and gravity, and the same code makes a crisp peony or a lazy willow.

The glow comes from additive light. Instead of painting colours over each other, the “lighter” blend mode adds them together, like overlapping torch beams, so where lots of sparks cross they turn bright and white-hot. The trails come from not wiping the screen: each frame the sky is painted over at low opacity, so old sparks fade out slowly behind new ones.

Even the bangs follow the real world. Light reaches you almost instantly, but sound only travels about 340 metres a second, so the simulator plays high bursts a moment after you see them. Building one is a lovely way to see that a few simple rules can make something that feels alive. It also teaches the habit that matters most with AI: describe what you want clearly, test it, and adjust.

What to build next