How I Built a 40-Second Showreel Entirely in Code

Quick Summary

• The showreel is one HTML composition rendered frame by frame with HyperFrames. Six acts are painted from a single timeline, so any frame can be rendered on its own and always comes out the same.
• Every move lands on a score composed in Python at 120 BPM. The score is then analysed frame by frame, and act five draws its own spectrum as a ridge field.
• The same file lays itself out in 9:16 for phones, and a 15-second teaser is cut from it on downbeats so the music never skips a beat.

The brief: a film about consistency

The film sells AI Brand Visuals, a service that makes on-brand images, motion loops, films and music with AI. Its promise is consistency: every project starts with a visual style system, so a whole campaign looks like one brand instead of a stack of unrelated AI images.

So the film had to make the same argument without a single line of narration. It opens with a brand guide writing itself, shows each kind of work the service makes, and ends with every still on this site regraded into one look under the title. Every image and clip in it is my own AI work from this site; the film itself, its transitions and its music are built in code.

One clock, six acts

The film is a single HTML page rendered to video by HyperFrames, which steps through time and captures each frame. Everything on screen is positioned by one paint function that reads one number, the current time. There are no separate animations running on their own, which means frame 612 can be rendered alone and always looks the same.

That discipline pays off three ways. Previews scrub instantly, renders are deterministic, and when a transition needs changing there is exactly one place to change it. It also made the vertical version possible later, because every position is computed rather than baked in.

The six acts are the style system, stills, motion, films, music and one brand, each six to eight seconds long and each built around one technique.

Act by act: the technique behind each moment

The style system. Each rule of a brand guide slams in on the beat (Light, Palette, Frame, Never) and then tucks into a list at the top. The palette swatches pop in on sixteenth notes, and on the drop they grow into four windows, each one opening onto a still in its colour.

Windows on the beat. The windows rearrange into a new layout on every beat: quarters, columns, a big frame with a stack, strips. Each layout is a set of fractions of the frame, and the move between two layouts is a single eased blend, so seven layouts cost almost no code. On the last beat the yellow-suit campaign still fills the frame, then punches back into depth with motion blur.

The fly-through. Every still becomes a card in a 3D field built with CSS perspective. The camera flies through it, rolling slightly, and lands on the same yellow-suit still at the far end. The cards fade in with distance, as if through fog, and disappear as they pass the lens.

One image, three brands. The frame splits into three panels, and a scan line regrades each one into a different invented brand: teal, warm and violet, each with its palette chips. It is the service's promise in one shot: the same image, three style systems.

Motion. A frozen kingfisher sits under a Still stamp until a scan line wipes across and it starts to move. Then an eye opens out of a point in a circle mask, the circle closes onto the pupil, and a whale shark opens out of that pupil: an iris match cut computed from the pupil's position in the clip.

Films. Letterbox bars slam in with a recording dot, a running timecode and frame brackets. Eight clips cut on every beat with whip pans: each outgoing shot slides and blurs one way while the next arrives from the other.

Music and one brand. The score draws itself as a ridge field, then flattens into one line, which unfolds into a grid of stills. A final scan line regrades every tile into the same teal look, and the title rises over it.

A score composed in code, then used as data

The music is composed in Python with NumPy at 120 BPM, so a beat is half a second and a bar is two. Kick, snare, bass, pads and bells are all synthesised in the script, and every cue sits at a named time shared with the picture: the drop when the swatches become windows, a boom when the camera lands on the hero, a tom for each sliding panel, a shutter click on every film cut.

Because the score exists before the picture is final, it can also drive the picture. A second script analyses the finished audio frame by frame and writes its loudness and a 48-band spectrum to a data file. Act five draws that spectrum as stacked ridge lines with the bass in the middle, so what you see there is literally the sound you are hearing.

One source, every format

Phones want 9:16, so the composition reads its frame size and lays itself out for portrait. The three brands stack as bands that each show the whole image, the motion panels stack top to bottom, the films play in a 4:5 frame instead of a thin letterbox strip, and every clip slides to frame its own subject. A small script writes the vertical project from the same file, and the 16:9 film was checked pixel for pixel after the change to prove nothing moved.

The 15-second teaser is not a separate edit. It is cut from the vertical render at four bar lines (the windows, the iris match cut, three film cuts, the final regrade), so every cut lands on a downbeat and the music reads as one track.

The one transition that needed a second pass

On the vertical preview the second between 0:07 and 0:08 looked wrong. Frame by frame, the cause was two pieces of timing animating the same move: the hero window started growing early, snapped back for a quarter of a second, then grew again. The fix was to let only one piece of code own that move.

A smoother alternative, a camera dolly through strips that part like doors, turned out less dynamic, so the final version keeps the original idea and sharpens it: the hero grows to full frame on the beat, holds for a breath, then punches back into depth with motion blur while the field of stills rushes in behind it.