27 October 2026 · 7 min read
Making video ads with Claude, one frame at a time
How I made short video ads with Claude: research, storyboards, a seekable Canvas timeline, and the revisions that made the words and scenes work.
On 9 October, I asked Claude to make a 20-second ad for Utopia 61. My brief was fairly unreasonable: treat it like a motion designer's showreel and go all out. We had the gym's website, its own footage and a logo. I wanted to see how far we could get with those materials and code.
The useful part came after the first render. I asked for a brighter "READY?" and for the outdoor bar, 61 Car Park, to join the story. My instruction was: "Don't just paste the restaurants into the ad, it should make sense and flow."
That revision explains the work better than a polished final frame does. Claude could build the animation. I still had to decide what belonged in it, whether the words were readable, and why one scene should follow another.
Across a series of briefs over several days, the source folder grew to 25 finished MP4s across 11 brand folders, counted on 27 October. Those include format variants and revised cuts. They were separate briefs with review between them.
Start with the business
Before the storyboard, I wanted research: read the site, understand the product, then consider how to advertise it. Otherwise, the animation could be beautifully wrong.
For Utopia 61, the useful discovery was the business's own language about training, recovery and unwinding in one location. That gave us a structure. TRAIN could show the gym; RECOVER could move into the spa; UNWIND could finish at the bar.
The opening used "ARE YOU" and "READY?", with real gym footage masked inside the letters. The camera then moved through the type into the footage. A hexagon lighting effect borrowed from the studio's neon ceiling. Those details gave the transitions something specific to refer to.
We used source footage and photos for the actual place. Generated abstract ice and steam supplied mood textures for recovery scenes. I wanted that distinction to stay clear: an atmospheric texture should not become invented evidence of what a facility looks like.
A revision that changed the story
Adding 61 Car Park needed more time. The revised landscape and vertical versions became 22 seconds, with the bar taking the UNWIND section and both businesses sharing the close.
Brightening READY mattered just as much. Footage inside large letters can look impressive on a monitor while leaving the word too dark on a phone. The fix raised its brightness and added a thin neon outline. The hook had to survive being seen small.
What to watch: This is the original 20-second Utopia 61 ad, before the 22-second revision described above. "ARE YOU / READY?" opens the gym story. TRAIN moves into RECOVER and UNWIND before "JOIN THE CLUB". The creative is archival; any business details on screen belong to that version.
Changing the visual language for Squiffy Tails
The Squiffy Tails brief on 18 October needed a different pace. This was a 25-second mocktail piece with bright coloured type and real product packshots. The opening problem was "ACCRA IS HOT." Ice, lime and mint around a pouch supplied the cold answer.
The logo became a sticker with a cream outline, which helped it remain visible when the background shared its blue. A "NON ALCOHOLIC" badge made the chosen product range explicit. The pouch's zip suggested a zipper transition; juice suggested a rising liquid wipe. I like transitions more when they come from the thing being sold.
What to watch: The hot-weather opening gives way to "MOCKTAILS TO GO" and the non-alcoholic label. Pouches lead into FRESH JUICE and COLD PRESSED messaging, then other products and an event-bar section. The ending reads "Cheers to convenience" and "ORDER ON BOLT FOOD". These are descriptions of the on-screen sequence; ordering details belong to the archived creative.
Explaining software in 20 seconds
Obali needed the viewer to follow a workflow. The 20-second piece starts with offline checkout, moves through a QR menu and kitchen board, then reaches the dashboard.
That order matters. A dashboard means more once you have seen the work that feeds it. The closing line, "One counter platform. Built for how Africa sells", has a concrete sequence behind it.
What to watch: Checkout continues through an offline moment. The QR menu, kitchen board and dashboard show how the counter connects to the rest of the restaurant, before the getobali call to action. These app flows illustrate the product story. They are not customer activity or measured business results.
The TableKare case study covers the engineering behind that restaurant workflow. The ad has a narrower job: help someone understand the idea quickly.
Making the browser draw a timeline
The common technical pattern was a composition in HTML and JavaScript, often drawn on Canvas. Its centre was a pure time function: render(t).
For a given time, the function sets the whole frame. At 6.5 seconds, the same text position and image selection should appear whether the previous capture was at 6.4 seconds or 18 seconds. That makes debugging much easier than chasing an animation that depends on how long a browser has been running.
The capture interface exposed window.seek(t). A separate window.ready promise waited for fonts and decoded images. The capture process could wait for readiness, seek to a timestamp, and save a frame without guessing at a delay.
Moving clips were extracted into image sequences at 30 frames per second. The composition selected the frame for the requested time; deterministic browser captures then became an image sequence for FFmpeg to encode. A chosen poster was also baked into the first frame so the exported file had a useful opening thumbnail.
That first-frame replacement is an editorial choice. It needs checking too, because playback briefly shows it before the opening begins.
Vertical needs its own composition
The 1080 × 1920 versions had their own layout decisions. Words needed different line breaks. Contact details had to stack. Subjects and logos needed safe padding.
End cards were particularly awkward. A landscape row of information becomes a tall pile on a phone, and elements can overlap as they arrive. I would check the settled card and the transition into it. A frame can look fine at the end while being unreadable half a second earlier.
The font work had its own small failure. The attempted font string 900 125% 100px Archivo was invalid. Changing it to 900 extra-expanded 100px Archivo fixed that load request. Even with valid syntax, capture must wait for fonts: a fallback changes letter widths, masks and line breaks.
The build recipe I would repeat
- Read the business's source material and choose one story. Write down which assets are real and where generated material can fit.
- Plan the scene timings and the closing action before building transitions.
- Implement a seekable timeline, with a readiness promise for fonts and images.
- Compose landscape and portrait separately. Capture representative frames, including transition midpoints and the closing card.
- Fix readability, then capture the full frame sequence and encode it with the score. Check the resulting file as well as the composition.
The session also produced original music and effects through Python DSP: synthesized kicks, plucks and clinks timed to visual beats. Reported loudness measurements sat around -14 LUFS for several cuts. That describes an audio file, not an audience response, and a loudness measurement cannot tell me whether a mix feels right.
Still frames help me catch a bad crop, unreadable type or an awkward overlap. Playing the finished cut answers different questions: whether a transition drags, whether the beat lands, and whether the closing action stays on screen long enough to read.
I came away wanting to do more of this. A conversation could turn a fairly loose brief into a storyboard, executable motion and finished files. But the most useful instruction I gave was still the one about the bar: make it make sense and flow. That decision needed a person watching the story.