Repo2Video

I asked Claude Code for "a motion design video about this project, like it's your showreel for a résumé" and kept going until it worked on any repo. I made two videos with it for my app: a 16:9 reel of the website and a 9:16 walkthrough of the mobile app. How it works: • The video is one HTML file with a single paused GSAP timeline, rendered to MP4 by Hyperframes (headless Chrome + ffmpeg). Particles, confetti and the 3D phone carousel come from one clock tween's onUpdate, as a pure function of time. No Math.random, no Date. • The music is a no-dependency Node script that writes a WAV sample by sample: kick with sidechain ducking, pads, marimba, bass, risers, plus UI sounds (taps, swishes, typing ticks). The synth and the timeline share one constants block, so every tap sound lands on the frame where the finger touches the screen. • For the mobile app it used the real store screenshots. It measured button and card positions from a gridded copy of each screen, then animated on top: finger taps with ripples, screens sliding in like real app navigation, cards lifting out of the phone in 3D, and typing into the real text field. What broke (this is most of the prompt now): • An element revealed with tl.set(el, {visibility: "visible"}) looked fine in the browser and in snapshots, but stayed invisible in the MP4. The render workers seek frames out of order and skip bare sets. Fix: put autoAlpha in the tween's destination. • The FX canvas sat above the text, so the layout check flagged all text as covered. It works when the canvas goes underneath. • Screens parked off to the side of the phone (clipped, not visible) also got flagged as covered text. Hide them with autoAlpha when they're off-stage. • A template literal inside querySelector crashed the bundler's CSS parser. • $i:layout in a zsh ffmpeg command. zsh reads :l as a lowercase modifier, so write ${i}. • A negative number in Math.pow(x, 1.6) in the synth gave NaN, which made the whole WAV silent. The prompt now says to clamp every envelope input and throw on NaN. • The brand orange on a cream background failed contrast. It needed a darker shade for text. The prompt starts with a setup step (Node 22, ffmpeg, the Hyperframes CLI and skills, local GSAP and fonts), so it doesn't assume anything is installed. Then it picks web or mobile mode from the repo and runs checks and snapshots before rendering: https://gist.github.com/mirzemehdi/4a84c5cb487b4a5edceb259eac625469 I'm curious how it handles a CLI tool or a game.