How a Text Firework Animation Actually Works
Type a name, press a button, and letters explode into the sky. It looks like magic, but the whole trick is built from three old, beautiful ideas in computer graphics. Here's the friendly version of what happens inside the text firework maker — no code required to follow along.
Idea 1: a letter is a set of points
First, the tool draws your letter invisibly, off-screen, and then reads back which pixels got inked. Every inked pixel is a potential landing spot for a spark. Sample a few hundred of those spots and you have a "constellation" — a cloud of coordinates that, seen together, spell the letter. This is why any script works: Vietnamese, Hindi, Arabic, Thai — if a font can draw it, the pixels can be sampled.
The marquee style goes one step further: it computes how far each inside-pixel is from the letter's edge, then keeps the ridge of points that are furthest from every edge — the exact centreline of each stroke. That's where the light bulbs sit, evenly spaced, just like a real sign-maker would drill them.
Idea 2: particles with simple physics
Each spark is a tiny simulated object: a position, a velocity, a colour and a lifespan. The rocket is one particle with an upward velocity and a trail; the explosion is dozens of particles flung outward along straight rays; the "letter forming" moment is pure choreography — each particle is assigned one of the letter's constellation points and glides toward it, fast at first, easing in as it arrives. Hundreds of dumb dots following two-line rules produce something that reads as intentional and alive. That's the core lesson of particle systems, invented for the movie Star Trek II in 1982 and still powering every fireworks scene in games today.
Idea 3: light adds up
On paper, ink layered on ink gets darker. Light is the opposite: two beams crossing get brighter. Computer graphics calls this additive blending — where sparks overlap, their colour values literally add, so dense cores glow toward white while edges stay coloured. This one rendering switch is most of why the animation feels like light on a night sky instead of coloured confetti on black paper. (The bright star field behind, incidentally, is just a few hundred dots of random size and brightness, redrawn once.)
Recording without a server
The last piece surprises people: the video file is made by your own browser. Modern browsers include a screen-recorder for web pages (the MediaRecorder API). The tool points it at the animation canvas, plays the show once, and the browser encodes video frames in real time into a WebM file — which is why you're asked to keep the window visible: browsers pause hidden tabs to save battery, and a paused animation records nothing. When the show ends, the finished file drops into your Downloads folder.
No upload, no render farm, no queue — and as a side effect, complete privacy: the message you typed never leaves your machine. The economics are nice too: because there's no server doing heavy work, the tool can stay free without limits.
Why letters launch one at a time
Purely for storytelling. Launching everything at once is technically easier, but sequential launches give the eye a path to follow and build anticipation for the name at the end — the same reason real firework shows have rhythm instead of firing everything in the first second.