# HyperFrames: A Deterministic Video Rendering Framework for AI Coding Agents, Built with HTML and Seekable Animation When an AI coding agent needs to produce video, the difficult part is usually not calling a generation model. The difficult part is combining timing, assets, animation, audio, and output validation into an engineering workflow that can be rerun, inspected, and placed in CI. HeyGen's open-source [HyperFrames](https://github.com/heygen-com/hyperframes) takes a direct approach: describe the scene with familiar HTML, CSS, and JavaScript, let headless Chrome seek and capture each frame, and hand the result to FFmpeg for MP4 encoding. The important idea is not to hide video editing inside another opaque timeline format. HyperFrames makes web composition the video composition. For an AI coding agent, HTML is an interface that is easy to generate, inspect, and hand over. For an engineering team, fixed frame seeking means preview and production rendering can share the same timing model. > This article is based on the repository HEAD verified on September 15, 2026, `edf6e4b373528501f4f80284d3ce2d0e1e09fbe4`, the `@hyperframes/cli` `0.8.41` package metadata, and the official README. CLI behavior and features may change in later versions. ## The short version: HyperFrames is about programmable, reproducible video HyperFrames is not merely a video editor, nor is it only a collection of animation components. It separates video production into layers that can be described by code: 1. Use HTML elements to define the scene and media. 2. Use attributes such as `data-start`, `data-duration`, and `data-track-index` to describe timing and tracks. 3. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom adapter for seekable animation. 4. Use the CLI for initialization, linting, checking, previewing, and rendering. 5. Let headless Chrome seek to each frame, then let FFmpeg encode the MP4. The central promise is that the same input can produce the same frames and output, rather than depending on wall-clock playback. That matters in automated content pipelines. When an agent creates a video, we need to know which HTML, assets, and timing settings produced a frame instead of simply replaying the scene and hoping the result is the same. ## Why HTML instead of another timeline DSL? Traditional video tools often hide the timeline inside a dedicated editor, a JSON schema, or a complex React abstraction. Those approaches can be useful, but they add handoff cost for an agent: before changing a title position or inserting a video, the agent must first learn the framework's component API. HyperFrames treats the browser as a composition engine. A minimal composition can be an ordinary `index.html` file: ```html ``` This markup has three useful properties. First, it is a document the browser understands without requiring a React bundler. Second, the timing information sits on the element itself, so a reader can tell when it appears. Third, HTML, CSS, and media files can be handled by ordinary lint, diff, review, and version-control tools. That does not mean HyperFrames is limited to static HTML. The official example uses a GSAP timeline and exposes it through `window.__timelines`, so the renderer can move the animation to the correct state for a requested frame: ```js const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.__timelines = window.__timelines || {}; window.__timelines.launch = tl; ``` The key words are `paused` and seekable. If an animation only follows real elapsed time, different machines or loads can produce different frames. If the renderer can seek a timeline to a requested time, preview and final output have a better chance of staying consistent. ## From motion to output: the CLI production loop The published CLI package is `@hyperframes/cli`, with a binary named `hyperframes`. The official README positions it as a tool for creating, previewing, linting, checking, and rendering HTML video compositions. Its non-interactive workflow is a natural fit after an agent has generated files. The minimal flow is: ```bash npx hyperframes init my-video cd my-video npx hyperframes preview npx hyperframes render ``` In practice, treat this as four checkpoints. ### 1. Init: create an executable composition Let the CLI create the basic structure, then have the agent modify the HTML, CSS, media references, and animation. This is safer than asking an agent to guess every filename from an empty directory because the generated structure provides a known entry point and execution model. ### 2. Lint and check: catch structural problems early Before an expensive render, check the HTML composition, timing attributes, media references, and framework contract. In an automated workflow, linting is not cosmetic. It turns “the render failed halfway through” into a fast failure that can be fixed immediately. ### 3. Preview: inspect the visual result in a browser Preview lets a developer check layout, animation, and media before exporting a full-quality video. Because the composition is HTML, basic layout inspection does not require a low-resolution export first. ### 4. Render: produce the final file frame by frame During rendering, HyperFrames seeks headless Chrome to each frame and then uses FFmpeg for encoding. The browser is responsible for producing the visual frame, while a mature media tool handles packaging and encoding. The same composition can therefore be used locally, in Docker, or through a distributed render path. ## Agent skills are more than prompt examples HyperFrames also ships skills for AI coding agents. The README describes `/hyperframes` as a router and capability map, and lists workflows for product launch videos, faceless explainers, PR-to-video, embedded captions, motion graphics, music-to-video, slideshows, and general video. The value is not merely another prompt. A useful agent skill turns domain knowledge into an operating sequence, such as: - confirm the creative brief and output type; - select the appropriate composition workflow; - read the core contract for timing, tracks, and media rules; - write the HTML and animation; - run lint, preview, snapshot, or render; - keep external media sources and local files traceable. This router-plus-domain-skill structure means an agent does not need to load every document for every request. It also reduces the risk of mixing a presentation workflow with an MP4 rendering workflow. For a team, skills can become a shared code-review vocabulary: reviewers can inspect not only whether the video looks good, but also whether the composition followed the intended production loop. ## Catalog and reusable visual components Beyond hand-written HTML, HyperFrames provides a catalog. The official documentation demonstrates adding a shader transition, an Instagram overlay, or an animated chart through the CLI: ```bash npx hyperframes add flash-through-white npx hyperframes add instagram-follow npx hyperframes add data-chart ``` This changes the job from inventing every effect from scratch to selecting a visual building block with a known contract. If a block has documentation and examples, the agent only needs to decide when to use it instead of designing the effect, handling timing, and debugging browser behavior at the same time. For a content platform, a reusable catalog also makes brand governance easier. A team can approve a set of transitions, title cards, charts, and caption components, then let an agent compose new videos inside that controlled set. ## What is it suitable for? HyperFrames is a strong fit for: - turning product pages, feature descriptions, or release notes into short videos; - converting a GitHub pull request into a changelog or feature walkthrough; - creating data visualizations, chart races, maps, and flowchart videos; - producing social videos with kinetic typography, captions, overlays, and music; - turning documents, PDFs, or websites into explainers; - connecting reusable motion graphics to a CI or publishing pipeline. The common property is that the output is described by files, code, and an asset list instead of being a one-off manual edit. If the requirement is hands-on timeline trimming of live footage, a professional NLE is still a better tool. If the requirement is for an agent to produce many reviewable, rerunnable programmatic videos, HyperFrames is a compelling model. ## The Remotion comparison: different bets, not a replacement story The official documentation says HyperFrames was inspired by Remotion, and both systems use headless Chrome and FFmpeg. The main difference is the authoring model: Remotion centers on React components, while HyperFrames bets on plain HTML, CSS, and seekable animation. That difference affects team selection: | Area | HyperFrames | Remotion | |---|---|---| | Authoring | HTML, CSS, and seekable animation | React components | | Build step | `index.html` can be previewed directly | Usually requires a bundler | | Agent handoff | Ordinary HTML files | JSX / React project | | Animation model | Adapters align animation with frames | Implemented through React and time-control patterns | A team with an established React video stack may still find Remotion more natural. A team that wants agents, frontend engineers, and designers to edit compositions in a web-like format may benefit from HyperFrames' HTML-native path. ## Dependencies and deployment reality The verified `@hyperframes/cli` package requires Node.js `>=22` and depends on Puppeteer, Sharp, Hono, and related rendering capabilities. The README also lists Node.js 22+ and FFmpeg as local requirements. This is not a tool where installing an npm package eliminates environment management; browser and encoder availability still need to be handled. Put environment checks at the start of the pipeline: ```bash node --version ffmpeg -version npx hyperframes doctor ``` For CI, pin the Node.js major version, lock the package lockfile, and validate output frames or video metadata. For server-side rendering, evaluate the headless Chrome sandbox, fonts, GPU or CPU resources, and temporary storage. If a composition uses remote fonts or media, download and pin them before rendering so a changing network response cannot change the output. The README also lists Docker, AWS Lambda, and GCP Cloud Run directions. Those paths can move rendering from a developer laptop to a queue or CI, but they do not eliminate capacity planning. Duration, resolution, frame rate, font loading, and media decoding all affect cost and runtime. ## A practical agent pipeline To connect HyperFrames to an AI content system, start with this workflow: 1. The agent reads the brief and creates `storyboard.md` plus an asset list. 2. It creates `index.html` from fixed design tokens. 3. It copies images, video, audio, and fonts into a versioned assets directory. 4. It uses timing data attributes for entrances, exits, tracks, and composition size. 5. It implements seekable animation with one controlled adapter instead of mixing uncontrolled wall-clock effects. 6. It runs `lint`, `check`, and `preview`, fixing structural errors first. 7. It creates a snapshot or low-cost preview for human visual approval. 8. Only after approval does it run the final `render`, saving the commit, asset hashes, CLI version, and output metadata. 9. It sends the MP4, thumbnail, and manifest to the storage or publishing system. This keeps agent freedom in the content and composition layer while placing reliability in contracts, checks, and reproducible output. The two goals do not conflict; they should be handled at different layers. ## Common problems and a useful debugging order ### Preview works, but the final output is missing media First confirm that media references point to files the renderer can read, rather than URLs that only exist in a local development server. Keep images, video, audio, and fonts in the composition's assets directory, and check that files exist before rendering. If media comes from the network, download it to a fixed directory, record its source and version in a manifest, and do not make production rendering depend on a mutable remote file. ### Animation is smooth in preview but jumps during frame output This usually indicates a seek problem. Check whether the animation uses `window.__timelines` or the appropriate adapter, and verify that the timeline is paused and can move to a requested time instead of updating only through `requestAnimationFrame` or elapsed wall-clock time. Avoid putting random values, the current time, or unfixed network data directly into the scene. If randomness is necessary, use a fixed seed or write the result into the composition first. ### The browser or FFmpeg cannot be found The renderer needs headless Chrome and the encoder needs FFmpeg. Run `node --version`, `ffmpeg -version`, and `npx hyperframes doctor` to check the Node.js major version, browser location, FFmpeg PATH, temporary-directory permissions, and available disk space. CI containers need special attention around fonts and Linux sandbox settings because a working laptop does not imply that a minimal container has the same system packages. ### Fonts, audio, or captions differ between CI and local runs Do not depend only on operating-system fonts; version the required fonts and caption inputs. Check sample rate, channels, and volume handling for audio on every runner. For remote assets, download and verify a checksum at the beginning of the pipeline. Use snapshots, frame sampling, video metadata, and audio-track checks as a minimal regression suite instead of checking only whether a file was created. ### Rendering is slow or runs out of memory Start by lowering preview resolution or duration. Check for unbounded DOM growth, oversized images, and media resources that are not released before upgrading the runner. In production, put renders behind a queue, limit concurrency, and save duration, frame count, resolution, and failure reason for every job. With AWS Lambda or GCP Cloud Run, also measure cold starts, temporary storage, package size, and timeout risk for long videos. ## Final assessment HyperFrames is worth watching not only because it uses HTML for video, but because it addresses three problems that AI video tools often separate: how an agent creates content, how a composition expresses time, and how output is rerun and validated. HTML-native authoring lowers the handoff barrier; frame seeking and the FFmpeg pipeline provide engineering determinism; the CLI, skills, and catalog move a one-off demo toward a reusable workflow. It still requires Node.js, FFmpeg, a headless browser, and disciplined asset management, and it does not replace the human editing judgment required by professional post-production. But for the problem of having coding agents produce large volumes of reviewable, regression-testable programmatic video, HyperFrames offers a clear open-source answer. ## Sources verified - [HyperFrames GitHub repository](https://github.com/heygen-com/hyperframes) - [HyperFrames README](https://github.com/heygen-com/hyperframes/blob/main/README.md) - [`@hyperframes/cli` package metadata](https://github.com/heygen-com/hyperframes/blob/main/packages/cli/package.json) - [HyperFrames documentation](https://hyperframes.heygen.com/introduction) - [HyperFrames catalog](https://hyperframes.heygen.com/catalog)