heygen-com/hyperframes

★ 17,889TypeScriptAudience · vibe coderComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((repo))
    How it works
      HTML plus CSS input
      Headless browser capture
      FFmpeg stitching
    Animation runtimes
      GSAP
      Three.js
      Anime.js
      Lottie
    AI agent support
      Claude Code
      Cursor
      Gemini CLI
    Output
      MP4 files
      Deterministic render
      No per-render fees

mindmap root((repo)) How it works HTML plus CSS input Headless browser capture FFmpeg stitching Animation runtimes GSAP Three.js Anime.js Lottie AI agent support Claude Code Cursor Gemini CLI Output MP4 files Deterministic render No per-render fees

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Generate animated product-intro videos programmatically by writing HTML and GSAP timelines instead of using a video editor.

USE CASE 2

Produce social-media short clips or animated charts from code in an AI agent pipeline, with the same input always producing the same output.

USE CASE 3

Convert web animations built with Three.js, Anime.js, or Lottie into downloadable MP4 files without learning a proprietary video tool.

Tech stack

TypeScriptNode.jsFFmpegGSAPTailwind CSSHeadless Chrome

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js 22 or newer and FFmpeg installed on the system before you can render any video.

Use, modify, and distribute freely for any purpose including commercial use, as long as you include the licence notice.

In plain English

HyperFrames is an open-source framework for turning HTML pages into video files. You write your video the same way you write a web page, with HTML, CSS, and animation libraries like GSAP, and HyperFrames runs that page in a headless browser, captures every frame, and stitches the frames together into an MP4 using FFmpeg, a widely used command-line tool for video processing. The framework is designed to be driven by AI coding agents like Claude Code, Cursor, Gemini CLI, and Codex. Running a single install command teaches your agent the project's conventions, how to author compositions, how to write GSAP timelines, how to use the optional Tailwind CSS browser runtime, and how to wire in different animation runtimes such as Anime.js, Lottie, Three.js, and the Web Animations API. You can also start a project by hand with hyperframes init, then run hyperframes preview to see it live and hyperframes render to produce the final MP4. Rendering is deterministic, meaning the same input always produces the same output, which suits automated pipelines. You would reach for HyperFrames if you want to generate videos programmatically, product intros, social-media hooks, animated charts, narrated summaries, and you would rather write web markup than learn a proprietary editor or a React-based video framework. The README compares the project to Remotion: both drive headless Chrome, but HyperFrames bets on plain HTML over React, requires no build step, and ships under the Apache 2.0 licence with no per-render fees, while Remotion is source-available. The project is written in TypeScript and requires Node.js 22 or newer plus FFmpeg. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

Using HyperFrames, write an HTML composition with a GSAP timeline that animates a product logo on a dark background and renders it as an MP4.

Prompt 2

I want a 15-second animated bar chart as an MP4 using HyperFrames. Write the HTML, CSS, and GSAP animation for me and show me the render command.

Prompt 3

Set up a HyperFrames project with Three.js as the animation runtime and render a rotating 3D cube to an MP4 file.

Prompt 4

I'm using Claude Code as my agent. Show me how to install HyperFrames so the agent learns the project conventions, then have it generate a social-media hook video.

Open on GitHub → Explain another repo

← heygen-com on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.