I wanted a presentation video for my portfolio. Not a video-editor template, and not a stock track that a thousand other videos already use. I wanted something in the same visual language as my site: a technical blueprint grid, isometric drawings, orange on a dark background.
The result is 48 seconds at 60 frames per second, with an original soundtrack, in horizontal and vertical versions. No video editing software was opened. Everything, from the music to the last frame, came out of code written in conversation with Claude Opus 5.5, running in Claude Code.
The final film, 16:9. It has sound: the soundtrack was generated in code too.
This post explains how it was made, what went wrong along the way, and what stayed with me versus what the AI did.
The first version, and why it was thrown away
The first attempt was quick: an animated HTML page, recorded in real time from an automated browser. It worked, but it had three problems:
- No sound. Adding music afterwards would leave the cuts off the beat.
- Real-time recording stutters. If the computer hiccups for an instant, the video drops frames.
- Portuguese text everywhere. The video only worked for people who read Portuguese.
Instead of patching it, we rewrote the script from scratch with three rules.
The three rules that shaped the film
1. No words to translate. Only the brand name, the site address, numbers, universal technical codes and logos may appear. "One person, three languages, zero mandatory meetings" became a person icon, three hand-drawn flags and a crossed-out calendar. The film works in any country.
2. One score, two outputs. A single file defines the tempo (120 beats per minute), the 24 bars, where each instrument plays, the chords, the impacts and the silence before the climax. The audio synthesizer and the visual engine both read that same file. That is what guarantees every cut lands exactly on the beat.
3. Frame-by-frame rendering. Instead of recording the screen, the page exposes a function that takes a moment in time, say 12.35 seconds, and draws exactly that frame. A script calls it 2,880 times, once per frame, and hands the images to FFmpeg together with the soundtrack. Stuttering is impossible: every frame is computed, not captured.
The soundtrack: music composed in code
The track is in A minor, with the progression A minor, F, C and G, one chord per bar. It uses no audio library: every instrument is math applied to a list of numbers.
- Kick: a sine wave whose frequency drops in a few milliseconds, lightly saturated.
- Hi-hat: white noise filtered down to the highs, with a very short decay.
- Bass and pad: simple waves and slightly detuned sawtooth waves, filtered to soften them. The volume "breathes" after each kick, a technique called sidechain.
- Arpeggio: chord notes in sixteenths, with an echo that bounces between left and right.
- Riser and impacts: noise with a filter rising into the climax, and a deep low end with a long tail.
- Reverb: a classic Schroeder reverb, the technique described in 1962 that still sits under many effects today.
An important honesty point: the AI cannot hear. To check the music, we rendered the waveform and the spectrogram and verified that the structure matched the score: intro pulses, riser, the impact at 8 seconds, the breakdown, the gap of silence and the final tail. Levels were measured in decibels. The one who actually listened was me.
Waveform (top) and spectrogram of the soundtrack: you can see the intro, the impact, the breakdown and the silence before the climax.
The image: layers, like a real film
Every frame is the sum of five layers, and each one responds to the music:
- Background: a two-level grid with parallax depth, a "scanner" line that sweeps the screen every four bars, and specks of light dust pushed by the impacts.
- Scene: the main drawing, in isometric projection, the same one used at the top of my site.
- Logos: the tools and AIs that appear on screen.
- Finish: film grain, vignette and a single-frame orange flash on every cut.
- HUD: rulers along the edges that act as a visual metronome, changing coordinates and a timecode that ends in
DEPLOY ✓.
The grid folds into isometric perspective and the layers drop, one per beat.
The six services became six isometric icons, and all of them follow the same three-beat choreography. First the stroke draws itself, with an orange "pen" at its tip. Then the faces get technical hatching. Finally, each icon performs its own action: the server LEDs blink with the hi-hat, the neural network pulses follow the arpeggio notes, the automation gears turn in mesh. Around them, technical dimension lines open and close like an engineering drawing.
The systems icon: hatching, LEDs lit in time with the music, and dimension lines.
For motion curves we used Motion, a web animation library. Since each frame is computed from time, Motion only provides the easing and interpolation functions, not self-running animations.
The six services connected into a single map.
Rendering and delivery
Each format has 2,880 frames and took about six minutes to render, with both versions running in parallel. The file came out at almost 400 MB, because animated grain is hard to compress, and was brought down to 86 MB with no visible loss, small enough for Instagram.
The vertical version uses the same code with a different framing: nothing important at the top and bottom, where Instagram's buttons sit, and the numbers stacked instead of side by side.
The vertical version, for Reels.
What went wrong
Not everything worked the first time, and the mistakes are the most useful part for anyone trying something similar:
- An animation that "didn't happen". The library applied opacity as an attribute of the drawing, and a style rule took precedence over it. The labels existed but stayed invisible.
- A drawing that left the frame. Rotating an element erased the instruction that centered it.
- The wrong font in the headlines. A generic style rule overrode the font set on each text.
- One character that broke the code. A snippet containing
$$became$in a text replacement, and the selectors stopped working.
All of them were caught the same way: rendering proof frames at key points of the film, looking carefully and fixing in one batch before the final render.
The final signature: the orange dot that opens the film becomes the dot in the logo.
What stayed with me and what the AI did
The AI wrote practically all of the code: the synthesizer, the visual engine, the renderer. It also proposed the script and the layers of detail. My role was the director's:
- saying what I wanted to feel in the video;
- rejecting the first version and asking for more;
- approving the script and the language choices;
- listening to the soundtrack, which the AI cannot hear.
The difference between a generic result and a good one came from the back-and-forth. After the first answer, the film already existed, but it was what anyone would have received.
Want one of these?
The full prompt I used is available at the motion film prompt (in Portuguese): fill in the fields with your brand and copy it.
The same process works for presenting a product, a company or a launch, in the visual identity of whoever commissions it. If that makes sense for you, reach me through the contact page.
References
- Claude Code — where the code was written and run.
- Motion documentation — the animation library used for motion curves.
- Playwright: screenshots — the tool that captured each frame.
- FFmpeg documentation — assembling video and audio.
- Schroeder, M. R. "Natural Sounding Artificial Reverberation". Journal of the Audio Engineering Society, vol. 10, no. 3, 1962 — the paper describing the reverb used in the soundtrack.