A stunning, physics-based fireworks simulator that runs entirely in your browser.
Click or tap anywhere to launch your own fireworks!
- Fireworks launch automatically on load
- Click or tap anywhere on the screen to launch your own
- Open the ⚙️ settings (top right) to customize everything
The simulator includes 12 unique physics-based shell types:
| Shell | Description |
|---|---|
| 🌸 Chrysanthemum | Classic dense burst, most common firework |
| 🌿 Willow | Long drooping golden trails |
| 🌴 Palm | Thick golden palm-tree effect |
| 💍 Ring | Precise circular explosion |
| 👻 Ghost | Fades in from invisible — dramatic reveal |
| ✨ Strobe | Flickering bright explosion |
| 🍂 Falling Leaves | Gold glitter drift effect |
| 🌺 Floral | Random multi-colored star scatter |
| 🐴 Horsetail | Cascading downward trails |
| 💥 Crackle | Rapid fire crackling burst |
| ✝️ Crossette | Stars split mid-flight |
| 🎲 Random | Surprise mix of all types |
- Real-time canvas rendering using dual-layer
<canvas>(trails + main) - Physics simulation — gravity, velocity, air resistance, glitter effects
- Adaptive quality — automatically adjusts to your device's performance
- Sky lighting — dynamic background illumination during explosions
- Long exposure mode — photographic light trail effect
- Finale mode — intense synchronized burst
- Auto-launch or full manual control
- Fullscreen support
- Sound effects (optional)
- Responsive — works on desktop and mobile
# Clone the repo
git clone https://github.com/Srv99x/Firework-Simulator-v3.git
# Open in browser (no build step needed!)
cd Firework-Simulator-v3
start index.htmlNo dependencies. No npm install. No build step. Just open index.html.
Firework-Simulator-v3/
├── index.html # Main app entry point
├── css/
│ ├── style.css # App layout & UI styles
│ └── reset.min.css # CSS normalize
├── js/
│ ├── script.js # Core simulation engine (physics, shells, rendering)
│ ├── Stage_0.1.4.js # Canvas stage & resize manager
│ ├── MyMath.js # Math utilities (random, lerp, etc.)
│ └── fscreen_1.0.1.js # Cross-browser fullscreen API
├── images/
│ └── firework-burst-icon-v2.png
└── musics/ # Optional sound effects
| Setting | Description |
|---|---|
| Shell Type | Choose which firework type to launch |
| Shell Size | 3" to 16" — bigger = wider spread |
| Quality | Low / Normal / High — affects spark count |
| Sky Lighting | Background glow intensity during explosions |
| Scale | Zoom the simulation in or out |
| Auto Launch | Launches fireworks automatically |
| Finale Mode | Periodic dense burst (requires Auto Launch) |
| Hide Controls | Clean fullscreen experience |
| Long Exposure | Keeps light trails for a photographic effect |
Original physics engine and simulation by Craig Miller on CodePen.
Translated to English and adapted by Srv99x.
Made with ❤️ and a lot of 🎆
⭐ Star this repo if you liked it!