Tested by AI Setups That Work. Ran with Claude Code, Nov 1, 2026: a 45-second vertical reel drawn in HTML, 1,350 frames rendered and joined with FFmpeg, set to an ElevenLabs track picked from 4 takes and retimed to its sung words. Nothing was posted.
What it does
Turn one job your product does into a 45-second vertical reel: a hook, the problem piling up, the fix, a short demo and your link, with an original music track and captions.
Who it is for
Small business owners and builders who can run a command in a terminal, or who have someone who can. You need a coding AI that can write and run files, such as Claude Code. A chat-only AI can write the files for you to run yourself.
Tools
Claude Code, or another AI that can write and run code
Node.js with Playwright and its Chromium browser, to screenshot frames
FFmpeg, to join frames and audio into an MP4
ElevenLabs Music for an original track, or any music you have the rights to
Steps
Write the story in six beats: hook, the problem piling up, the turn (one word), your product's name, a short demo, and the call to action. Keep it to 45 seconds.
Give your coding AI the prompt below. It builds one HTML file at 1080 by 1920 where a function draws any moment of the video from the time alone, so every frame is exact and repeatable.
Ask it to render about 10 still frames, one per scene, and look at them together before rendering the whole video. Fix overlaps and cut-off text here; it is far cheaper than re-rendering.
Make the music. In ElevenLabs Music, describe the genre, tempo and where the drops land, and add short lyrics if you want vocals. ElevenLabs says songs can run from 3 seconds to 10 minutes. Make a few takes.
Pick the take whose drops land closest to your cuts. If it has vocals, transcribe it and retime the scenes so each line lands on its words. Move the video to the music, not the music to the video.
Add captions for the lyrics or voiceover. Many people scroll with the sound off, and without captions the reel says nothing.
Render all frames, join them with the track in FFmpeg, and watch the whole MP4 with sound before you post. Pick a cover frame that shows the problem, like the biggest number.
The prompt
Build a 45-second vertical promo reel as code. Do not post anything.
Product: [WHAT YOU SELL, ONE LINE]
The job it does: [ONE JOB, E.G. CHASES LATE INVOICES]
Hook (what the customer types or says): [ONE SENTENCE]
The pile-up: [WHAT GROWS, E.G. INVOICES UNPAID] counting up to [NUMBER]
The result: [E.G. 12 OF 12 REMINDED]
Call to action and link: [TEXT AND URL]
Brand colors: [2 OR 3 HEX CODES]
Build it like this:
1. One HTML file, 1080x1920, with window.renderAt(t) that draws the frame for any time t in seconds from scratch. No timers, no animation that depends on real time.
2. Keep every scene start time in one object so I can retime the whole video in one place.
3. Scenes: hook typed in (0-6.7s), a black screen with the problem (6.7s), the count-up, one big word for the turn, the product name, a demo of the job with a draft I approve, then the end card.
4. Use only made-up names, numbers and companies in the demo.
5. Write a Node script that opens the page in Playwright, renders 30 frames per second as images, and joins them with an audio file using FFmpeg into an MP4 (H.264, AAC). Add a --frames option to render just a few still frames.
6. Render stills at 2.5, 7.5, 14, 17.5, 26 and 42 seconds and show me them before the full render. Check that no text overlaps or runs off the frame.
7. Add a captions layer driven by a list of [start, end, text] lines.
Tips
Build one reel well, then make spinoffs by changing the hook, the pile-up and the demo text. The timing and scenes carry over.
Time scenes to the music's drops and the sung words. Music made separately rarely lands on your cuts by itself.
Render a handful of still frames first. Most problems, like captions covering a card, show up in stills.
Keep captions above the bottom of the frame, where Reels and TikTok put their own buttons and text.