Hanabi Fireworks - HTML5 Particle Effect

Click anywhere on the canvas to create an explosion! Auto explosions occur every second. Choose from different color palettes.

FPS:
0
Active Particles:
0
Pooled Particles:
0
Active Smoke:
0
Pooled Smoke:
0

How the Hanabi Sparkle Effect Works

This fireworks effect uses a four-layer approach with smoke, trails, particles, and sparkles:

  1. Smoke Layer: Soft smoke particles that rise slowly from the explosion center and fade over time
  2. Trail Layer: Persistent particle trails that blur and fade over time (recreates the original AS3 effect)
  3. Particle Layer: Renders sharp, colorful particles at full resolution for the current frame
  4. Glow Layer: Copies the particle canvas and scales it DOWN to 1/4 size (pixel loss occurs here!)
  5. Sparkle Magic: The glow layer is scaled back UP 4x with pixelated rendering - surviving pixels create the sparkle

The smoke layer adds a realistic effect where gray smoke particles are generated near the explosion center, rise slowly upward, spread horizontally, and fade away gradually. This creates depth and makes the explosions feel more realistic by adding the aftermath effect that would occur with real fireworks.

The trail layer adds the missing element from the original AS3 version - particles are drawn to a persistent canvas that gets blurred and faded each frame, creating beautiful trailing effects behind the particles.