heygen-com/hyperframesGit

HyperFrames HTML to video

Render HTML and CSS compositions as MP4 videos.

Before you start

Inputs: Video or script, target duration and style

  1. Check the original documentation for supported AI tools, models and runtime dependencies.
  2. Open the repository and follow the author’s installation instructions. Model APIs or external services may require separate accounts.
  3. Try your own material, then review the facts, layout and output files.
Read the original installation guide ↗

License: Apache-2.0

Source snapshot: 2026-09-15. README ↗

Original license & copyright
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to the Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by the Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding any notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   Copyright 2026 HeyGen, Inc.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

Try a task like this

Use HyperFrames HTML to video with my own source material. Confirm the required inputs and available tools, then produce an editable result.

Write HTML. Render video. Built for agents.

Quickstart | Showcase | Playground | Catalog | Docs | Discord

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

Quick Start

With an AI coding agent

Install the HyperFrames skills, then describe the video you want:

npx skills add heygen-com/hyperframes

The picker opens with nothing pre-selected — the Core Skills group is all you need: the /hyperframes router installs each creation workflow on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add --all installs all 20 published skills. The six repo-internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills.

skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main, so reach for it when you need the newest copy of a skill.

Try a prompt like:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.

Skills

HyperFrames ships 20 skills agents load on demand. Read /hyperframes first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below.

Default to the core set — the router installs each creation workflow on demand. npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without --skill installs all 20. Use npx skills add heygen-com/hyperframes --all to install all 20 deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> for just one (bare name, no leading /).

Installs stay lean after that: npx hyperframes init keeps the core set fresh (the router, the hyperframes-* domain skills, and media-use — plus whatever is already installed; /figma stays on demand) and never expands a partial install; the creation workflows install on demand — the router runs npx hyperframes skills update <workflow> before entering one. Nothing re-pulls the full set behind your back.

Upload to Codex

Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:

bun run package:codex-plugin

This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.

Router

SkillUse when
/hyperframesRead first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below.

Creation workflows

SkillUse when
/product-launch-videoAny website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s).
/faceless-explainerExplaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz).
/pr-to-videoA GitHub pull request (PR URL, owner/repo#N ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the gh CLI.
/embedded-captionsAdding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.
/talking-head-recutPackaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.
/motion-graphicsA short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay.
/music-to-videoA music track (audio file, video to pull audio from, or one generated from a mood brief) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing.
/slideshowA presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
/general-videoAnything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox).
/remotion-to-hyperframesPorting an existing Remotion (React) composition's source to HyperFrames HTML. One-way migration, not creation.

Domain skills (loaded on demand)

Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.

SkillCovers
/hyperframes-coreThe composition contract — data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, determinism rules.
/hyperframes-animationAll animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
/hyperframes-keyframesSeek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus hyperframes keyframes diagnostics for rendered motion.
/hyperframes-creativeNon-animation creative direction — frame.md / design.md, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
/media-useThe media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking.
/hyperframes-cliCLI dev loop — init, lint, check, snapshot, preview, render, publish, doctor, plus HeyGen-hosted cloud rendering (cloud render) and AWS Lambda rendering (lambda deploy / render / progress).
/hyperframes-audioMix the audio already placed in a composition — voiceover carve (dip a music bed only in the bands the voice occupies, static or dynamic, level match included), the effect chain (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes on volume or any effect parameter, and submix buses (<hf-audio-group>) carrying one chain, fader and automation clock for several tracks at once. Sourcing the audio is /media-use.
/hyperframes-registrySearch, install and wire registry blocks and components into compositions via hyperframes catalog / hyperframes add. Load before hand-building any named look, effect, treatment or transition. Authoring a new block or component to contribute upstream.
/figmaImport Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.

For visual design handoff workflows, see the Claude Design guide and Open Design guide.

Manually with the CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Requirements: Node.js 22+, FFmpeg

What You Can Build

Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.

  • Product launch videos and feature announcements
  • PR walkthroughs with animated code diffs, narration, and captions
  • Data visualizations, chart races, and map animations
  • Social videos with kinetic captions, overlays, and music
  • Docs-to-video, PDF-to-video, and site-tour explainers
  • Reusable motion graphics for automated content pipelines

Frame.md

frame.md — your design system, ready for video.

Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.

The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.

Browse and remix them all at hyperframes.dev/design.

How It Works

Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    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;
  </script>
</div>

Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.

HyperFrames Stack

HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.

PieceStatusWhat it does
CLIAvailableScaffold, preview, lint, inspect, and render local video projects
Core / Engine / ProducerAvailableParse compositions, drive headless Chrome, encode video, and mix audio
CatalogAvailableReusable blocks and components for transitions, overlays, captions, charts, maps, and effects
Agent skillsAvailableTeach coding agents the video-production patterns that generic web docs miss
StudioAvailable, evolvingBrowser surface for previewing and editing compositions
AWS Lambda renderingAvailableDeploy a distributed render stack and drive renders from your laptop or CI
hyperframes.devAvailableCommunity playground for previewing, iterating, sharing, and rendering HTML-native video projects
frame.mdAvailableInvert your design system for the camera — a DESIGN.md superset an agent can compose video from

Catalog

Install ready-to-use blocks and components:

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

Browse the catalog at hyperframes.heygen.com/catalog.

Why HyperFrames?

  • HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
  • Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
  • Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
  • No build step: an index.html composition plays as-is and can be previewed directly in the browser.
  • Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
  • Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.

HyperFrames vs Remotion

HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.

HyperFramesRemotion
AuthoringHTML + CSS + seekable animationReact components
Build stepNone; index.html plays as-isBundler required
Agent handoffPlain HTML filesJSX / React project
Library-clock animationsSeekable, frame-accurate via adaptersWall-clock animation patterns need care
Distributed renderingLocal and AWS Lambda render pathsRemotion Lambda, mature cloud renderer
LicenseApache 2.0Source-available Remotion License

Read the full comparison in the HyperFrames vs Remotion guide.

Documentation

Full documentation: hyperframes.heygen.com/introduction

Packages

PackageDescription
hyperframesCLI for creating, previewing, linting, and rendering compositions
@hyperframes/coreTypes, parsers, generators, linter, runtime, and frame adapters
@hyperframes/engineSeekable page-to-video capture engine using Puppeteer and FFmpeg
@hyperframes/producerFull rendering pipeline for capture, encode, and audio mix
@hyperframes/studioBrowser-based composition editor UI
@hyperframes/playerEmbeddable <hyperframes-player> web component
@hyperframes/shader-transitionsWebGL shader transitions for compositions
@hyperframes/aws-lambdaAWS Lambda SDK and deployment surface for distributed renders

Community

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.

Development Note

The repo uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (about 240 MB of .mp4 files). If you're cloning the full repo for development, install Git LFS first:

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Then, once per machine
git lfs install

If you only need source files, you can skip LFS content:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

License

Apache 2.0