[opensourcedex]

hyperframes is a free, open source design & prototyping project written in TypeScript and released under Apache-2.0. It has 51,348 GitHub stars, 4,675 forks and 200 open issues, and was last pushed 2 hours ago. On this registry it ranks #5 of 23 tracked projects in Design & Prototyping, with 5 head-to-head comparisons available.

What is hyperframes?

HyperFrames is an Apache-2.0 TypeScript framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 video, built for developers and AI coding agents that need repeatable video output from code.

What it is

HyperFrames is an open-source rendering framework written in TypeScript and published under the Apache-2.0 licence. It converts HTML, CSS, media, and seekable animations into deterministic MP4 files. Three entry points are documented: a local CLI, skills loaded by AI coding agents, and use as the rendering core behind hosted authoring workflows. The registry entry lists 51,348 stars, 4,675 forks, 200 open issues, and a last push on 2026-09-18. Topic tags place it in the JavaScript rendering ecosystem alongside ffmpeg, Puppeteer, and GSAP, which matches the render path the README describes.

The concrete problem is the gap between an HTML composition and a video file. Teams that author motion in HTML/CSS normally have to preview in a browser and assemble video by hand, and platforms that need video output end up maintaining an in-house render pipeline. HyperFrames replaces both with a single deterministic render step, and for agent workflows it replaces ad-hoc shell scripting around a video toolchain with a documented production loop. The loop the skills teach is explicit: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render.

Key capabilities

  • Renders HTML, CSS, media, and seekable animations to deterministic MP4 output rather than a nondeterministic screen capture.
  • Ships 20 published skills that agents load on demand, with /hyperframes as the router and capability map to read first.
  • Includes the /product-launch-video creation workflow for marketing or launch video from a product URL, a brief, or a script.
  • Installs a lean core set through npx hyperframes skills update, covering the router, the hyperframes-* domain skills, and media-use; /figma stays on demand.
  • Offers the interactive picker npx skills add heygen-com/hyperframes with a Core Skills group, plus --all for all 20 skills and --skill for one.
  • Keeps npx hyperframes init refreshing the installed core set without expanding a partial install or re-pulling the full set.
  • Packages a Codex plugin with bun run package:codex-plugin, writing dist/hyperframes-plugin.zip with a hyperframes/ root folder and failing if the archive exceeds Codex's 100 MB upload limit.

Who uses it and how

  • Coding agents such as Claude Code, Cursor, Gemini CLI, and Codex, which load the skills and follow the plan-to-render loop.
  • Developers running the CLI locally to render compositions without an agent in the loop.
  • Product and marketing teams producing launch videos through /product-launch-video from an existing site URL.
  • Platform teams embedding it as the rendering core behind a hosted authoring workflow.
  • Agent and non-interactive runs, which must use npx hyperframes skills update because the picker is interactive-only and a run without --skill installs all 20.

Getting started

Install the skills with npx skills add heygen-com/hyperframes, or use npx hyperframes skills update for the exact core set from current main, then describe the video you want to an agent. A documented example prompt asks for a 10-second product intro with a fade-in title, background video, and subtle background music.

How it compares

The facts name no paid products this project replaces, and no directly comparable rendering tool either. On the evidence here, HyperFrames stands alone in this registry; the closest named items are the coding agents that consume its skills, not alternatives to it.

When to use it — and when not to

Expect to operate a Node toolchain plus the ffmpeg and headless-browser render path that the topic list implies, so a self-hoster takes on that runtime rather than a hosted service. The README also warns that skills add resolves the skills.sh registry blob, which can lag main by hours, and that the interactive picker pre-selects nothing, so scripted installs behave differently from human ones. With 200 open issues and a README excerpt that is only partly shown here, teams needing a frozen, fully documented rendering contract should audit the repository before committing.

project readme (upstream, from github) — read inline

npm version npm downloads License Node.js Discord

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 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 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

Skill Use when
/hyperframes Read 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

Skill Use when
/product-launch-video Any 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-explainer Explaining 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-video A GitHub pull request (PR URL, owner/repo#N ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the gh CLI.
/embedded-captions Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.
/talking-head-recut Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.
/motion-graphics A 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-video A 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.
/slideshow A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
/general-video Anything 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-hyperframes Porting 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.

| Skill | Covers

readme truncated — read the full docs on github

Frequently asked questions

Is hyperframes free to use?

hyperframes is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does hyperframes do?

Write HTML. Render video. Built for agents.

What is hyperframes written in?

hyperframes is primarily written in TypeScript. Its source is publicly available at https://github.com/heygen-com/hyperframes, and it has 51,348 GitHub stars.