I asked an agent to make a product video. It wrote HTML and rendered an MP4 - Dota Companion

The author utilized the open-source HyperFrames framework to create two product videos for a Chrome extension. The videos were authored as HTML, narrated with a local TTS model, and rendered locally. The author aimed to avoid the need for a video editor, so they chose HyperFrames due to its simple HTML and CSS composition, GSAP for motion, and headless Chrome for frame-by-frame timeline rendering and FFmpeg for MP4 encoding.

The author faced three main challenges during the video creation process. The first challenge was the CDN script failing silently. The init scaffold used a CDN to pull GSAP, but the render container only proxied the shell without the browser. This resulted in GSAP never loading, leading to a static video output with no motion. The author overcame this issue by fetching the CDN script in advance and including it in the vendor bundle.

The second challenge was timing the cuts before generating the audio. The author initially wrote a storyboard, assigned frame durations, and attempted to generate narration to fit. However, this approach didn't account for the natural variation in speech timing, causing drift in the final video. The author corrected this by generating audio first, one file per sentence, and calculating the real duration of each.

The audio was then used to derive every cut point cumulatively, ensuring accurate synchronization and eliminating drift.

The third challenge was generating real screenshots when the browser had no network. The framework required real captures, not mockups, for screenshot slots. The author's initial approach was to mock the interface, but the author found a better solution by fetching the real payload out-of-band and seeding it through the app's cache path.

This ensured that real data was used in the rendering process, producing accurate and reliable results. The author also emphasized the importance of inspecting offline captures, as incorrect or fabricated screenshots can give an impression of a broken product.