{
  "id": 325435,
  "title": "I asked an agent to make a product video. It wrote HTML and rendered an MP4 - Dota Companion",
  "url": "https://urgent.news/2026/08/08/i-asked-an-agent-to-make-a-product-video-it-wrote-html-and-rendered",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-08T22:24:54.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/dhseadev/i-asked-an-agent-to-make-a-product-video-it-wrote-html-and-rendered-an-mp4-dota-companion-1nia"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nThe 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.\n\nThe 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.",
  "summary": "I needed two videos for a Chrome extension I built: a promo and a walkthrough. I did not want to open a video editor. So I used HyperFrames — HeyGen's open-source (Apache 2.0) HTML-to-MP4 framework. Compositions are plain HTML and CSS. No JSX, no bundler, no build step. Timing lives in data attributes; motion comes from GSAP. A headless Chrome seeks the timeline frame by frame and FFmpeg encodes…",
  "key_points": [
    "Author used HyperFrames framework to create product videos for Chrome extension",
    "Overcame CDN script failure by fetching script in advance and including in bundle",
    "Generated accurate video cuts by first creating audio files and synchronizing cuts"
  ],
  "editors_take": "Using HyperFrames to create product videos as HTML that can be rendered locally marks a shift towards more developer-centric and flexible video creation tools, potentially reducing reliance on traditional video editing processes.",
  "illustration": "https://urgent.news/ill/325435.png",
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "Dev.to",
        "title": "HTML in, MP4 out: rendering a video with HyperFrames instead of an editor",
        "url": "https://urgent.news/2026/08/09/html-in-mp4-out-rendering-a-video-with-hyperframes-instead-of-an",
        "published": "2026-08-09T14:46:52.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}