I build AI Applyd, a tool that applies to jobs for you on the company's own hiring system. Before our Product Hunt launch on 6 October I needed a demo video, and I made it without a video editor. The whole thing is HTML, rendered to video with HyperFrames.
Why HTML instead of a screen recording
Recording a real web app is messier than it looks. Pages load in stages, spinners show up, the test data is never quite right, and every small UI change means recording again. I wanted the demo to look exactly like the product without fighting any of that.
HyperFrames takes an HTML page per scene and renders it to frames. That meant the demo could use the same fonts, colors and layout tokens as our site, because they were literally the site's files.
How the project was set up
- One HTML file per scene. 12 scenes, about 90 seconds in total.
- Real screens, seeded data. I captured the screens from our app running locally on a test account, so every card and label is something the product actually renders.
- Brand tokens copied by hand. The generator guessed our colors from the light theme, but the live site is dark, so I repainted the palette myself: a near-black ground, off-white text and one orange accent.
- Captions typed as HTML. Geist for the main line and Geist Pixel for the accent word, which is why the captions look like the site and not like a video template.
What was easy
Timing. A scene's length is a number in the file, so tightening the pacing is a one-line change and a re-render. Reordering scenes is moving a block. Nothing needs a timeline scrubber.
What was slow
The audio. Cutting scene changes to the beat of a music track means lining up timestamps by ear, and it took several rounds before the cuts stopped feeling mechanical. The voiceover was the other hard part. The first voices I tried read the script like an audiobook narrator, which flattened a product demo that needed some energy.
Would I do it again
Yes, for anything where the product UI is the star. If a scene is mostly your own interface, building it in the same HTML and CSS as the product is faster than recording it and cleaning it up. For live action or anything with people in it, a normal editor is still the right tool.
If you want to see what the product does, it's at aiapplyd.com. And if you have made a launch video in code, I'd like to know how you handled the music.
Top comments (0)