Guide · AI Tools
How to Make an App Promo Video With Claude and a Web Page
September 2026
Video is the hardest part of promoting a small app. You either pay someone, or you fight with editing software. This year a growing number of creators have been documenting a third route: ask an AI model to write the animation as a web page, then capture that page as video.
It suits a solo developer well. This is the workflow I'm using for Offgrid Studio's app videos, with Claude (at the time of writing, the latest models are Opus 5.5 and Sonnet 5.5).
Why a web page instead of an AI video generator
- The browser draws the text, so lettering is sharp and spelled the way you wrote it
- Brand colours, fonts and layout come out exactly as specified
- Each change is a small edit ("hold scene 3 for two more seconds"), not a re-roll of the whole clip
Step by step
- Write the storyboard first. Five or six scenes, one message each, with the exact on-screen text and roughly how long each lasts. Fifteen to thirty seconds is plenty for social.
- Ask Claude for a single HTML file. Give it your brand colours, font, on-screen text, scene timings and the format: 9:16 for Reels, TikTok and Shorts, 16:9 for YouTube. Ask for JavaScript timing so it plays start to finish on its own.
- Preview in the browser and iterate. Change one thing at a time, and check it at phone size.
- Capture it. Play the page full screen and screen-record it on your phone.
- Finish in an editor. In CapCut, add real screen recordings of your app, music and any trims, then export.
A starting prompt
Make a 20-second vertical (9:16) promo animation for my iPhone app, as one self-contained HTML file. Six scenes, timed with JavaScript so it plays automatically. Dark background, accent colour [your hex code], clean sans-serif type, large text. Scene text: [your lines, one per scene].
Be specific about the look and each scene. A vague prompt gets a generic video.
Getting cleaner output
A screen recording captures whatever your screen manages to draw, so a stuttering animation gives a stuttering video. For a crisper result, developers render the page frame by frame in a headless browser and stitch the frames together with ffmpeg. There's a clear walkthrough in this DEV Community post.
Where it falls short
- Claude gives you a web page, not a video file, so the capture step is yours
- Complex scenes take more back and forth to get right
- It doesn't replace real footage: show your app with real screen recordings
Frequently asked questions
Can Claude make the video file directly?
On its own, Claude writes the animation as code: an HTML file that plays in a browser. Turning that page into a video file is a separate step, either a screen recording or a frame-by-frame render.
Is a phone screen recording good enough?
For short social clips, yes. A screen recording captures whatever your screen manages to draw, so a smooth animation gives a smooth video and a stuttering one gives a stuttering video. If you need it crisper, render the page frame by frame instead.
Do I need to know how to code?
No. You describe the scenes, text and timing, and Claude writes the code. You do need to preview the page and give clear feedback, one change at a time.
Why use a web page instead of an AI video generator?
The browser draws the text, so lettering is sharp and spelled correctly, brand colours match exactly, and each change is a small edit instead of regenerating the whole clip.
See what it's for
Four iOS apps that put on-device AI to work for you.
More from Offgrid Studio
Read the thinking behind this in I'm Not Afraid of AI. Twenty Years of Maintenance Taught Me Why.