Hanabi: Real-time pyrotechnic physics and

Hanabi: Real-time pyrotechnic physics and interactive story:

I built Hanabi as an interactive archive for a five-generation Japanese fireworks workshop. Instead of putting their history and summer schedule on a plain editorial layout, I set the entire page against an active night sky over a river. As you scroll down the page, mortars fire from the banks and break directly behind the reading text.

The interface gives visitors direct control over what is firing. You can switch between 4-sun, 8-sun, and 12-sun calibers and launch four traditional shell types. Kiku throws a tight sphere of tailed sparks. Botan expands fast and vanishes instantly without trailing smoke. Yanagi drops heavy charcoal-gold streamers down toward the waterline, and Kamuro produces a slow glittering crown that floats near the apex before dying out.

Under the hood, everything runs on a raw HTML5 Canvas particle loop with sound effects synthesized in real time via the Web Audio API. Stepping up to larger calibers increases the launch velocity, extends the climb duration, raises the explosion height, and spawns more stars. Each particle recalculates air resistance, gravity falloff, color fade, and alpha trails every frame. At the bottom edge of the screen, a mirrored pass draws soft vertical reflections over the water, and reaching the end of the text dims the interface so a scheduled finale can take over the canvas.

Most of my tuning time went into balancing contrast. If I threw too many particles into the air at once, the background got muddy and the text became impossible to read. The shells started looking right only after I dialed in drag math and burn lengths instead of adding more particles. Getting the willow trails to stall at their peak and drift down toward their water reflection made the whole scene feel physical without fighting the typography.😊