Grand Fireworks JS | The Most Powerful Fireworks Ever Made

WebGL 215 shellsText fireworksSound engineGuided workbenchEvery feature, compared

Quick start

<script src="GrandFireworks.js"></script>
<script>
  const fireworks = new GrandFireworks();
  fireworks.start();
</script>

The zero-argument constructor creates a transparent fullscreen overlay, uses the cinematic style with the high adaptive performance preset, does not start automatically, and runs indefinitely once started.

CDN

Load directly from GitHub via jsDelivr — no build step, no bundler required.

<script src="https://cdn.jsdelivr.net/gh/travisjmac/grand-fireworks-js@latest/dist/GrandFireworks.min.js"></script>

To stay on one release rather than following the latest, pin its tag:

<script src="https://cdn.jsdelivr.net/gh/travisjmac/grand-fireworks-js@v1.11.1/dist/GrandFireworks.min.js"></script>

Experiences

Explore the default fireworks show, a cinematic scene, or the hands-on feature lab.

Moonlit Horizon ✦A layered parallax night scene with a moon, drifting sky layers, and the horizon placard treatment front and center. Default ShowJust fireworks, running with the engine’s default settings. Feature Lab 🔭One draggable control window for depth, shell types, themes, text, finale, and sound staging—choose a feature group and run it live.

Build it into anything

Grand Fireworks is designed to be dropped into an existing page, experience, or game without adopting a framework or rebuilding your UI. Create one instance, choose a container, and trigger shells, text, finales, or your own gameplay events from ordinary JavaScript. The engine handles the spectacle; your project keeps its own rules, controls, and personality.

Fireworks Command v0.3A tactical Mars defence game with interceptor bunkers, waves, upgrades, chain reactions, and a once-per-round SuperNova. Timed Show Happy Birthday DemoWatch a birthday show with a finale, rainbow message and word-by-word haiku, then explore its timeline and full source.

Configure your show

Configuration & API GuideLearn the options, edit the full configuration and explore the public functions.Config WorkbenchPreview your show and adjust it with visual controls or the full configuration editor.

How it compares

Every row is a Grand Fireworks feature. fireworks-js gets a mark only where version 2.10.8 has that same feature. Open the comparison on its own page.

Feature	Grand Fireworks JS	fireworks-js
Renderer
WebGL 2 renderer	✅	❌
Canvas 2D renderer	✅	✅
Automatic Canvas fallback when WebGL is unavailable	✅	❌
Point-sprite particles	✅	❌
Device-pixel-ratio cap	✅	❌
WebGL context-loss recovery	✅	❌
Long-exposure trails	✅	✅
Bloom	✅	❌
Star-shaped sparks	✅	❌
Rocket exhaust	✅	❌
Explosion flashes	✅	❌
Full-screen flash	✅	❌
Shells
Grand peony shell	✅	❌
Imperial chrysanthemum shell	✅	❌
Weeping willow shell	✅	❌
Royal palm shell	✅	❌
Diamond ring shell	✅	❌
Crossette supreme shell	✅	❌
Golden brocade shell	✅	❌
Dragon fish shell	✅	❌
Majestic comet shell	✅	❌
Cascading horsetail shell	✅	❌
Starburst shell	✅	❌
Glitter nova shell	✅	❌
Crown jewel shell	✅	❌
Thunder clap shell	✅	❌
Galactic spiral shell	✅	❌
Show
Automatic launching show	✅	✅
Intensity control	✅	✅
Opening salvo	✅	❌
Gravity	✅	✅
Air drag	✅	✅
Wind	✅	❌
Camera zoom	✅	❌
Layer opacity	✅	✅
Color control	✅	✅
Named color themes	✅	❌
Named visual styles	✅	❌
Mixed style	✅	❌
Random show	✅	❌
Global speed control	✅	❌
Grouped salvos	✅	❌
Secondary crackle	✅	❌
Ember color burn	✅	❌
Shimmer	✅	❌
Sparkle	✅	❌
Pointer launches a rocket	✅	✅
Burst at an exact point	✅	❌
Fly a rocket from one point to another	✅	❌
Draw inside an element you choose	✅	✅
Transparent fullscreen overlay	✅	❌
Pause and resume	✅	✅
Stop the show	✅	✅
Wait until shells in the air finish	✅	✅
Clear the sky	✅	✅
Launch a shell on demand	✅	✅
Change options while running	✅	✅
Read the current options	✅	✅
Runtime stats	✅	❌
Text
Text fireworks	✅	❌
Multi-line text	✅	❌
Hybrid particle and crisp text	✅	❌
Text position and alignment	✅	❌
Text tilt	✅	❌
Text dissolve, hold, and fall	✅	❌
A sequence of text messages	✅	❌
Finale
Grand finale	✅	❌
World Ender	✅	❌
Show duration	✅	❌
Sound
Sound effects	✅	✅
Turn sound on and off	✅	✅
Volume control	✅	✅
Procedural launch, whistle, boom, and crackle	✅	❌
Ambient hiss	✅	❌
Stereo panning	✅	❌
Performance
Quality presets, including a 60fps target	✅	❌
Adaptive quality	✅	❌
Pause when the tab is hidden	✅	❌
Pause when scrolled offscreen	✅	❌
Reduced-motion support	✅	❌
Particle cap	✅	✅
Rocket cap	✅	❌
Building with it
TypeScript declarations	✅	✅
Zero runtime dependencies	✅	✅
Host-driven frame loop	✅	❌
React component	✅	✅
Preact component	✅	✅
Solid component	✅	✅
Vue component	✅	✅
Svelte component	✅	✅
Angular component	✅	✅
Custom element	✅	✅
SSR-safe React, Vue, and Svelte mounts	✅	⚠️ React use client
Configuration reference	✅	✅
Guided workbench	✅	❌
Copy the running configuration	✅	❌
Live demo	✅	✅

✅ supported · ⚠️ partial · ❌ not supported

Verified October 2026 against fireworks-js 2.10.8 and Grand Fireworks JS 1.11.1. Sources: fireworks.ts, types.ts, sound.ts, README.

Firework types

The best, most advanced, most powerful JavaScript fireworks ever made.

Quick start

CDN

Experiences

Build it into anything

Configure your show

How it compares