Shells arc, burst and crackle with glowing, fading sparks.
Each shell is a particle launched with an initial velocity under gravity. At its peak it bursts into a hundred or more sparks with randomized speeds and air drag, in shapes like peonies, rings, willows and crossettes that split again in mid-air. Each spark is drawn as a short streak along its velocity with additive blending, so overlapping sparks glow, and the bursts light the sky and ripple in the water below.
Try it. Click anywhere to launch a shell toward that point. Hold to fire a volley.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a fireworks show with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a dark night-sky gradient.
- A shell is a particle launched upward from the bottom with gravity pulling it down. Choose its starting speed so it peaks at a target height: vy = -sqrt(2 * gravity * height).
- When the shell's vertical speed reaches zero, replace it with about 150 sparks with random directions and speeds and a lifetime of 1 to 2 seconds.
- Each frame, apply gravity and a little air drag (multiply velocity by about 0.98), move the sparks, and fade them out as they age.
- Instead of clearing the canvas, fill it with the background color at about 20% opacity, so sparks leave short trails.
- Launch a new shell at a random spot every second or so, and launch one toward the mouse when I click.
Once that works, make it beautiful:
- Draw sparks with globalCompositeOperation = "lighter" so overlaps glow, and use a pre-rendered radial-gradient sprite for each color.
- Add different burst shapes: a peony (sparks in a sphere), a ring (same speed, evenly spaced angles), a willow (long-lived gold sparks with heavy drag), and a crossette (a few stars that split into four).
- Add a dark city skyline along the bottom and a brief glow in the sky at each burst.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a mirrored reflection in water, shells that draw shapes like hearts or text, or a timed finale.
