I film one take on my phone and Claude Code turns it into a finished vertical reel, with captions on every word, real screen recordings, music and sound effects. Here are the tools, the five steps and the template rules.
The tools (all free except Claude Code)
Claude Code, the one in your terminal: https://claude.com/claude-code
HyperFrames, open source from HeyGen. It turns an HTML page with animation into a video: https://github.com/heygen-com/hyperframes
The HyperFrames student kit is the easiest way to start. It includes a short-form editing skill for Claude Code: https://github.com/nateherkai/hyperframes-student-kit
Whisper for the transcript. On a Mac, mlx-whisper is fast: https://github.com/ml-explore/mlx-examples/tree/main/whisper
ffmpeg for cutting, cropping and mixing: https://ffmpeg.org
Playwright for recording real websites: https://playwright.dev
How I film
Landscape, on an iPhone, face in the middle of the frame. One landscape take gives you both vertical crops.
One take. Don't worry about pauses; they get cut.
Say the keyword in the first sentence. That's the line people search.
Step 1: Hear every word
Ask Claude Code:
Transcribe this video with word-level timestamps using mlx-whisper. Save it as transcript.json. Then list any words that look misheard.
Check the list. Names and product words are where it slips.
Step 2: Cut the pauses and crop
Ask Claude Code:
Using transcript.json, cut every gap between words longer than 0.45 seconds. Make two vertical crops from the landscape take: a full-face 1080x1920 for the opening, and a tight 1080x960 crop for the bottom half of a split screen. Do not change the colour or brightness.
Leave the colour alone. My first template graded the footage and made me look darker. The original looked better.
Step 3: Record the real screens
Ask Claude Code:
For each tool I mention, open its real website with Playwright in dark mode, remove the cookie banner, and record a few seconds at 1080x960, scrolling slowly. Start GitHub repos at the #readme section.
The recordings fill the top half of the split screen.
Step 4: Build the video as a web page
Ask Claude Code:
Build a HyperFrames composition at 1080x1920. Face full screen for the hook, then split screen: screen recording on top, face below. Captions in short groups, each word lighting up at its timestamp from transcript.json. Pop a small tag on screen the moment I say each tool's name. End on a card with my call to action. Lint it, then render.
To change anything later, edit a word in the page and render again.
Step 5: Mix the sound
These are my real settings:
Voice: normalized to -16 LUFS, the level phones expect.
Music: a low bed at -14 dB that dips every time I talk (sidechain compression, ratio 6).
Sound effects: one per graphic, landing on the frame it appears.
I tried the music louder. Low won.
The template rules
Save these in a STYLE.md so every reel looks the same:
Hook full screen with the keyword said in the first sentence.
Split screen for the body: real screen on top, face below.
One idea on screen at a time. Tags pop on the spoken word.
Captions: short groups, the current word highlighted.
End card with one ask.
No colour grade.
Check before you post
Re-transcribe the finished reel and read it. If a word is missing, a cut was too tight.
Render one at a time. Two at once quietly produced nothing for me.
Watch it on your phone with the sound off. It should still make sense.