Shipping the project is the easy part. The launch video is the grind. I always found very painful to create demo videos on products I had built. I found a way to use Claude Code to build the demo as a self-contained HTML animation and render it to a sharp 1080p/60fps MP4. The HTML is the master, so I can change any scene in plain English and re-render. Note: you need Playwright MCP Here’s the prompt: —- Step 1: Storyboard from your repo.
Read the README and the main UI components. Storyboard a 25-30s launch video as 5 beats: title, the problem, the core action, the payoff, and a CTA card with my URL. One sentence per beat. Show me the timeline before you build anything. Step 2: Build one self-contained HTML file. Build promo.html: a single file, inline CSS, vanilla JS timeline engine. A fixed 1920x1080 stage scaled to the viewport. An ordered list of at(ms, fn) calls fires off one clock to play the beats. Reveals use ease-out-expo (cubic-bezier(0.16,1,0.3,1)), transform and opacity only, no bounce. Match my brand colors and fonts. No build step. Step 3: Capture it in slow motion (this is the whole game). If you just screenshot the animation frame by frame, a heavy page renders around 2fps, so the encoder duplicates each frame ~6x to fake 60fps and the motion looks like 10fps. The fix: play the timeline at ~0.15x, scale every CSS duration to match, grab frames over CDP as JPEG (not PNG), and let ffmpeg resample to a constant 60fps. The rule that guarantees real 60fps: distinct frames per second = real-capture-fps / SPEED, kept at or above 60. Write a Playwright + CDP render script. Load promo.html with ?record=1 and ?speed=0.15, set the CSS slow multiplier to 1/SPEED, capture frames as CDP JPEG q95 optimizeForSpeed, stamp each with the animation clock, then pipe to ffmpeg: H.264, crf 16, constant 60fps, 1920x1080. Also cut a short loop GIF from the best 3s beat. Step 4: Render and verify it’s really 60fps. python3 -m http.server 8920 # fonts need http, not file:// node render.mjs # -> 60fps mp4 + loop gif
a 1.5s motion window should keep ~90 distinct frames
ffmpeg -ss 15.2 -t 1.5 -i promo.mp4 -vf mpdecimate -f null - 2>&1 | tail -1 If it looks choppy, the captured frame count should be more than 60 x runtime-in-seconds. If not, lower SPEED. Step 5: Iterate in plain English.
Make the render scene 1.5s longer and add a beat showing the MP4, GIF, 9:16 and 1:1 outputs with check badges. Re-render. Cut a 9:16 vertical version for Shorts: change the stage to 1080x1920 and reflow the cards. Keep the same timeline. What you end up with A 1920x1080 H.264 MP4 at true 60fps, a loop GIF for the top of your README, and vertical/square cuts for social, all from one text file you can edit forever. No screen recorder, no After Effects, no agency. —- Quick disclosure: I went down this rabbit hole enough times that I packaged the whole pipeline into a tool. It is https://getshipreel.com/ . You connect a GitHub repo, it reads the README + UI + brand tokens, storyboards the scenes, and renders the reel on a queue. Same frame-capture approach, just automated. It’s in private beta and the first reel is free if you’d rather skip the setup: https://getshipreel.com/#waitlist submitted by /u/InnerPhilosophy4897
Originally posted by u/InnerPhilosophy4897 on r/ClaudeCode
You must log in or # to comment.