Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Fireworks

A fireworks show over a harbour at night: shells climb, burst into peonies, willows and rings, light the smoke and mirror in the water. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified743 lines of codev1.0.0

In Light, glass & shine, Toys, games & parties

Next: Disco BallSurprise me

Fireworks preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

7
1
1
0.8
1
7

Changes where and in which order the shells burst, their colours and the shore.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 7.1 MB)
Info

What it is

Rockets trailing sparks climb into a dark sky and burst into peonies, chrysanthemums, golden willows, rings, palms and crackling glitter. Every spark is white-hot when it is born, changes colour as it burns and cools to an ember, drawn as a trail that bends under gravity. The bursts flash the sky, light the smoke they leave and are mirrored in the water below a small harbour town, a city skyline or a ridge of pines. Choose the show (a mixed finale, peonies, willows or rings), the colours, how many shells, how wide they open, how long the trails are, how much smoke, the scenery and the mirror.

Reuse it in your own idea

  • New year countdown: Finale over the harbour behind a number reveal.
  • Wedding or concert opener: Golden willows with a slow title.
  • Festival video: New year over the city, shells set to 9.

Which part is reusable

src/fireworks.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The sky, the town and the sparks are flat: the bursts are drawn face-on, not as spheres in depth.
  • No sound.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/fireworks.js
Exports
  • createFireworks({ show?, palette?, shells?, size?, trails?, smoke?, scenery?, reflection?, seed?, aspect?, loopSeconds? }) => { scene, camera, plan, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • planShow({ show?, palette?, shells?, size?, trails?, seed?, aspect?, loopSeconds? }) => [{ kind, launch, rise, x, y, size, sparks, colours }]
  • PALETTES: { festival, gold, ice, sunset }
  • SHOWS: { finale, peonies, willows, rings }
  • KINDS: ['peony', 'chrysanthemum', 'willow', 'ring', 'palm', 'crackle']
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, instanced ribbons and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Orthographic: x from -aspect to aspect, y from -1 to 1; the water line sits at y = -0.36 and bursts open between 0.04 and 0.52.

Lighting: Self-lit: each burst flashes and lights the sky and its smoke in its own colour; the bloom adds the glow.

Timing: update(time, loopSeconds) sets the time; each spark is a closed-form function of it, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Every shell is scheduled round the loop and measures its own time with a modulo, so each is spent before its next launch comes round; the smoke drifts on a circle of the noise and the water ripples, the stars twinkle and the lights blink in whole cycles.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
About 3,000 spark ribbons (each a strip of seven pieces) positioned in the vertex shader, one full-screen backdrop and a small bloom: no per-frame JavaScript work beyond setting the time. More than 12 shells need a larger array in the shader.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- fireworks/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:1e0a227f2e4b9334…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/objects-scenes/webgpu-fireworks (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original closed-form show: shells scheduled round an exact loop, six kinds of burst, white-hot sparks that change colour and cool to embers, lit smoke, a mirrored harbour and three kinds of shore.
BinMore like this

More like this

Play these full screen

Disco Ball

Background3DSeamless loop12 seconds