How we make videos with Claude Code

The idea in one line

A video is a web page with a timeline. Claude Code writes the page (HTML, CSS and GSAP animation), a renderer screenshots it frame by frame into an MP4, and a local voice reads the script. Because it is code, every number on screen can be checked by a script before anything is rendered.

The stack (all of it)

• Claude Code in the terminal: the director. It plans, writes the scenes and runs every tool below. Cheaper sub-agents do the research and first drafts; the main session reviews and renders.
• HyperFrames (npx hyperframes): turns an HTML composition into an MP4. Lint, check (overlaps, contrast) and snapshot commands catch layout bugs before a full render.
• GSAP for animation, served from local files so renders never need the network.
• Kokoro TTS, a free local voice model (we use the am_michael voice), and Whisper for word timestamps so every animation lands on a spoken word.
• ffmpeg for mixing and mastering: voice, an original music bed and sound effects, normalised to -14 LUFS.
• Python glue: a scene kit, a QA script (black frames, loudness, safe zones, text size) and an upload tracker.
• Official APIs to publish: YouTube Data API, Facebook and Instagram Graph API. A free Cloudflare Worker schedules Instagram posts.

Runs on an ordinary desktop: 24 CPU cores, 15 GB RAM, no special GPU. Renders take a few minutes per minute of video.

The loop, step by step

1. Pick the idea from data. We read our own analytics first. Example: our best reel ever explained Quake III's 0x5f3759df trick, so we made more stories in that shape, while still covering many topics.
2. Research with sources. Every claim gets a URL you can open, and the real artefact (the actual source code, the report, the patch) is saved next to the script.
3. Write the script for the ear. 150 to 175 words for a 60-second reel. Numbers spelled out for the voice, real spelling on screen. The hook is the first line and the first frame.
4. Generate the voice locally, then get word timings with Whisper.
5. Build the scenes. Claude writes a build.py that generates one HTML scene per beat, and asserts the headline numbers (if the data says 357 bytes, the build fails on 358).
6. Check before rendering. Lint, contrast checks and snapshot sheets: look at three frames per scene, fix what is cramped or empty.
7. Render and QA. Render to MP4, then a QA pass for loudness, black frames, safe zones, captions and metadata. Nothing ships with a failing check.
8. Publish on a schedule. One command uploads to YouTube, Facebook and Instagram with the title, description and thumbnail from one file.

A starting prompt for Claude Code

Make a 60-second 9:16 explainer video as an HTML composition
(1080x1920, 30 fps) about: <your topic>.
1. Research it first and list every claim with a source URL.
2. Write a 160-word script; the first line is the hook.
3. Build one HTML scene per beat with GSAP animations on a
   single paused timeline; no network at render time.
4. Show the real artefact (code, number, document) on the
   first frame, big.
5. Render with `npx hyperframes render`, then show me 3 frames
   per scene before calling it done.

Start small: one scene, one sentence, render, look. Then grow it. Looking at frames yourself is what separates a good video from a correct one.

What it costs

• Voice, captions, rendering, mixing: free (local).
• Hosting this page and scheduling Instagram: free (Cloudflare free tier).
• Claude: the only real cost; most of the work runs on cheaper sub-agents and the main model reviews.