Agent-authored video
Agent-authored video treats a video as code: the agent writes a composition in HTML or React, headless Chrome renders it frame by frame, and FFmpeg encodes the result. The source diffs and reviews like code, but only watching the render tells you whether the video is good.
Written by
-
Benedikt Stemmildt Founder & Co-CEO
Updated:
Agentic Engineering 5
How can a coding agent produce a video?
HyperFrames treats a video as a web page with a timeline. A composition is an HTML file whose elements carry data attributes for start time, duration, and track. Animations come from GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter. The renderer seeks each frame in headless Chrome and hands the frames to FFmpeg, which encodes the MP4 and mixes the audio (heygen-com - HyperFrames (opens in a new tab), as of October 2026). The project is Apache 2.0, ships as a CLI plus agent skills, and was still on 0.8.x releases in October 2026, so expect its interfaces to move.
Because the source is a text file, the video takes part in the same workflow as code: an agent edits it, a reviewer diffs it, and CI renders it. The output side has the shape of a deterministic gate. By the vendor’s own account, the frame time is computed from the frame number with integer math and never from a clock, every animation is paused and seeked to that time, and so the same composition yields the same frames on every run (HeyGen - HyperFrames: Deterministic Rendering (opens in a new tab)). The guarantee holds only if the composition obeys a short contract: no wall-clock reads, no unseeded randomness, no network fetch during the render, fps and frame size fixed before the first frame, and a finite length. Fonts and Chrome versions still differ between machines, which can shift a local render by a pixel. Rendering inside Docker pins Chromium, the font set, and the encoder, and removes the machine as a variable (HeyGen - HyperFrames: Deterministic Rendering (opens in a new tab)).
How does the agent learn the rendering rules?
A determinism contract an agent has to guess is one it breaks. HyperFrames ships its rules as agent skills instead of leaving them in reference docs: a router skill that maps a request such as a product launch clip, an explainer, or a pull-request walkthrough onto one creation workflow, plus domain skills for the composition contract, animation, audio, media sourcing, and the CLI. A standalone install pulls only the core set, and the router installs each creation workflow when a request first needs it (heygen-com - HyperFrames (opens in a new tab), as of October 2026). This is the progressive-disclosure pattern skills use elsewhere, applied to a rendering framework: the agent loads the video rules only on a video task.
The project’s own prompting guide is candid about the limit of its gates. Its lint and check commands verify that a composition is well-formed, including runtime errors, layout collisions, and contrast failures, but they say nothing about whether the video is any good. The guide reports that two earlier builds of its own showcase film passed every gate and still failed human review, one reading as sparse and the other as a dressed-up slideshow. Its conclusion is that the loop ends at watching the render, not at a green check (HeyGen - HyperFrames: Iterating (opens in a new tab)). For a video, the user’s view is the render. That is the general split between structural verification and acceptance, made visible in a medium where a human sees the failure in seconds.
How do you steer the result and iterate?
How much a prompt specifies decides how far the result drifts from what the author pictured, not whether it renders. Mood words hand the look to the agent. Style tokens such as exact colours and named textures buy precision cheaply. A full visual spec gives every element a shape, colour, position, and time. The guide singles out two choices to pin every time: real 3D through Three.js instead of CSS perspective, and sequencing written as explicit times, so a fade-out ends before the next element appears instead of overlapping it (HeyGen - HyperFrames: The specification dial (opens in a new tab)).
After the first render, the guide recommends small, targeted edits over re-prompting from scratch. Change one variable per render so each effect stays attributable. Build a complex scene one layer at a time. When a scene keeps misfiring, strip it back to the simplest working version and re-add layers until the breaking one shows. State targets as absolute values, such as a radius as a share of row spacing, because relative nudges overshoot in both directions. Name what must not change, since a rebuild otherwise drifts on settled axes (HeyGen - HyperFrames: Iterating (opens in a new tab)).
Should you author video in HTML or React?
Remotion is the established alternative and the model HyperFrames says it was inspired by. Both render through headless Chrome and FFmpeg. They differ in the authoring model. A Remotion composition is a React component that computes its state from the current frame number. A HyperFrames composition is plain HTML with a paused timeline the renderer seeks (HeyGen - HyperFrames or Remotion? (opens in a new tab)). The HyperFrames comparison concedes ground. It names Remotion as older, better documented, and backed by a mature Lambda renderer. It also calls Remotion’s pure-function model simpler to hold in your head, while HyperFrames’ timeline contract breaks quietly when a rule is missed. Its case for HTML is that existing web material drops in close to as-is, that no build step is needed, and that agents can write the format directly. Its claim that a migration skill ports roughly 80% of a typical Remotion composition mechanically is a vendor self-claim (HeyGen - HyperFrames or Remotion? (opens in a new tab)).
Licensing differs too. HyperFrames is Apache 2.0. Remotion is free for individuals and companies of up to three people, and a company license is required from four people up (Remotion - License (opens in a new tab), as of October 2026). For a team choosing between the two, that decides whether the tool needs a license review.
Related
- Modernization and interface design: steering generated visuals away from the generic default.
- Quality and Verification: where a deterministic gate ends and acceptance begins.
- Supervision and drift: the review capacity that grows with every agent-made artifact.
- Authoring skills: how rendering rules get packaged so the agent loads them on demand.
Resources
Video Rendering
- HyperFrames (opens in a new tab) - HeyGen’s Apache 2.0 framework and agent skills that render HTML, CSS, and seekable animations into deterministic MP4 videos; pre-1.0 as of October 2026.
- Remotion (opens in a new tab) - React framework that renders video from components via headless Chrome and FFmpeg; free up to three people, paid company license above.