Build a harbour fireworks finale where every spark is a formula
A night fireworks show over a harbour, shot like a long-lens photograph. One lone shell whistles up and breaks red over the water; then pairs, a fan of five, and a parade of real shell types: chrysanthemums, a weeping gold willow, a palm, rings, crossettes, strobes, crossfire comets and a brocade crown. A huge white shell breaks close enough to fill the frame, and the camera tilts up for a finale of more than fifty shells that turns the whole sky white-gold before the gold drips away and the next lone shell rises, so the Reel loops. The bridge, boats, skyline, rippled reflections and glowing smoke are all drawn in code. Nothing is simulated step by step: every star is a launch state and its position is the exact solution for a projectile with air drag, evaluated in a WebGL2 shader, so any frame is a pure function of time. You get four exact prompts with a check for each, the complete source and the 25-second Reel. Edit one list to program your own show.
Before you start
Uses your AI plan
You’ll need
Claude Code
HyperFrames
GSGSAP
</>HTML, CSS & JavaScript
NoNode.js
FFFFmpeg
What it uses
4 prompts to your coding assistantCounts toward your assistant’s usual allowance. Nothing extra to buy.
The tutorial
Free with an account · 4 steps
Free with an account. Your assistant runs on the plan you already have.
The recipe
4 steps, from nothing to yours.
Every step gives you the action, the exact input (a prompt, settings or a file) and a check to compare your result against the original.
Step 01
Write the shell recipes (seeded numbers → star records)
Step 02
Draw the stars in closed form (the WebGL2 star shader)
Step 03
Light it: bloom, tone mapping, the harbour, the water and the smoke
YoursStep 04
Script the show, the camera and the loop, then render
Exactly what the creator used
Claude Code
Any recent version
HyperFrames
Any recent version
GSAP
Any recent version
WebGL2
Any recent version
Node.js
Any recent version
FFmpeg
Any recent version
Claude Code — Claude Opus 5.5 (claude-opus-5-5) — wrote every file — your Claude plan
HyperFrames — 0.8.74 (npx hyperframes@0.8.74) — check, snapshot, render (HTML → MP4) — free, runs locally
GSAP — 3.14.2 (jsDelivr CDN) — the one paused timeline HyperFrames seeks — free
WebGL2 — built into Chrome — everything you see (raw WebGL2, no three.js) — free
Node.js — 24.x (24.13.1 here) — runs the HyperFrames CLI and the formula check — free
FFmpeg — any recent build — the Instagram re-encode and the loop test — free
Codex or any agent that can write files and run commands works too. No GPU is needed: HyperFrames renders WebGL in software (SwiftShader). The renderer needs EXT_color_buffer_float (half-float render targets), which SwiftShader and current desktop browsers support.
Provenance: Recorded September 28, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); raw WebGL2 (no 3D library) and GSAP 3.14.2 from jsDelivr; HyperFrames 0.8.74 rendering in Chrome 152 headless shell with SwiftShader (software WebGL2 with EXT_color_buffer_float) at 1080×1920, 30 fps, 25 s (750 frames), no audio; Node.js 24.13.1. The render took 5 min 55 s with 4 workers on a 24-thread machine, on its own (HyperFrames default "standard" quality, beginframe capture, software GPU, HF_DE_STALL_MS=600000). The master is 87.4 MB (29 Mbit/s). The Reels copy was re-encoded with FFmpeg 4.4.2 (libx264, preset slow, CRF 21, aq-mode 3, maxrate 22M, bufsize 44M, faststart) to 44.5 MB. check passed with 0 errors and 4 warnings, all Chrome's own "GPU stall due to ReadPixels" driver notes; it took 3.5 minutes. Loop test (Gaussian blur sigma 2, then SSIM, on the master): 0.9873 across the seam against 0.9892 and 0.9890 either side; on the Reels copy 0.9859 against 0.9896 and 0.9895 (the keyframe at frame 0). Rendered losslessly in the browser, the seam's mean difference is 0.520 against 0.522 and 0.527 either side. The same frame rendered in two browser sessions gave byte-identical PNGs. The show has 98 shells (21,405 head records, 5,707 short and 2,986 long trails, 2,394 smoke puffs, 186 lights). No external images, footage, textures, models or generative-media models were used.
Build a harbour fireworks finale where every spark is a formulaUses your AI plan
Claude Code
HyperFrames