Project overview
HyperFrames is an open-source framework that renders HTML, CSS, media, and seekable animations into MP4 videos. Its repository is heygen-com/hyperframes, its primary language is TypeScript, and its listed license is Apache-2.0.
The project provides a CLI, rendering engine, browser-based editor, and AI coding agent skills. Video compositions are described in HTML files and do not require React. The README describes both local CLI workflows and production assisted by AI coding agents.
Use cases
Use cases include product launch videos, feature introductions, development walkthroughs with animated code diffs, animated charts, map animations, and social videos with captions, overlays, and music.
It also supports document-to-video and PDF-to-video workflows, website tours, and reusable motion graphics for automated content pipelines. Consider it when you need to define visuals, timing, and media in code and render videos repeatedly.
What it does and problems it solves
HyperFrames uses HTML data attributes to describe media start times, durations, and tracks, organizing web content into a video timeline. Animations can use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or custom frame adapters, provided they support seeking to a specified time.
The rendering engine captures frames in headless Chrome, then uses FFmpeg for encoding and audio processing. The README describes consistent output from identical input as a design feature for repeatable rendering and automated workflows.
Its component catalog supplies editable transitions, titles, captions, charts, maps, and effects. Companion skills guide AI coding agents through planning, HTML authoring, animation setup, media placement, checking, previewing, and rendering.
How to use
1. After preparing the environment and initializing a project as described below, run `cd my-video` in a terminal to enter the video project directory.
2. Following the README's composition structure, define visuals in HTML, set start times, durations, and tracks with data attributes, and add media and seekable animations. Consult the original repository's quickstart and documentation for the detailed file structure and attribute rules.
3. For AI coding assistance, run `npx hyperframes skills update` from the video project directory to install the core skills, then describe your video to an agent that supports skills. For example, ask it to use `/hyperframes` to create a 10-second product introduction with a fading title, background video, and subtle background music.
4. To add a ready-made component, run `npx hyperframes add data-chart` for an animated chart. The README also provides `npx hyperframes add flash-through-white` for a transition and `npx hyperframes add instagram-follow` for a social overlay.
5. Run `npx hyperframes preview` to preview the video in a browser and adjust the content with live reload.
6. Once the content is ready, run `npx hyperframes render` to render the project into MP4. The supplied quickstart does not specify the output file location; consult the original repository documentation.
Installation
1. Prepare Node.js 22 or later and FFmpeg. These are the CLI requirements explicitly listed in the README. The supplied material does not include their complete installation and configuration procedures; consult the original repository and the relevant tool documentation.
2. Run `npx hyperframes init my-video` in a terminal to initialize a video project named `my-video`, then run `cd my-video` to enter its directory. The README launches the tool through npx and does not require a prior global HyperFrames installation.
3. To install standalone agent skills, run `npx hyperframes skills update` from the video project directory. An interactive alternative is `npx skills add heygen-com/hyperframes`; select the Core Skills group in the picker. The README warns against project-local skill installation targets inside a HyperFrames source checkout because they can overlap tracked skill sources and overwrite uncommitted edits.
4. If you choose the desktop application, obtain the appropriate download entry from the original repository below this page. The README lists downloads for macOS, Windows, and Linux as a .deb package, but the supplied material does not provide post-download installation instructions.
5. Only if you need to clone the full repository for development, install Git LFS first as described in the README: use `brew install git-lfs` on macOS, `sudo apt install git-lfs` on Ubuntu or Debian, or `winget install GitHub.GitLFS` on Windows, then run `git lfs install` once. Obtain the clone address from the original repository below this page. The supplied material does not include the full source dependency installation and build workflow; consult CONTRIBUTING.md.
Source and usage notes
- Original repository: https://github.com/heygen-com/hyperframes
- Source revision: af0d68d612ebd9c419f27d9ebc8068512667bae4
This listing links to the upstream repository. It does not provide a verified download package, and the complete workflow has not been independently validated.
This description was organized and translated with AI from public upstream material. Refer to the original repository for capabilities, setup requirements, costs, and license terms. 
