Vibeleaderboard
Index / tool
Visit github.com
Category
Developer Tools
Rank
Pricing
Open Source
Type
TOOL
Use case
Design & Media
Interfaces
CLI · Agent Skill / Plugin
Builder
heygen-com
Latest release
v0.8.91
Date

About

HyperFrames is an open-source framework that converts HTML, CSS, media, and seekable animations into deterministic MP4 videos, usable via CLI, AI coding agent skills, or as a rendering engine for hosted authoring tools. It ships 20 modular skills (installed via npx) covering workflows like product launch videos, faceless explainers, PR-to-video changelogs, captioned talking-heads, motion graphics, and Remotion migration, designed for agents like Claude Code, Cursor, and Codex.

What it does

A HyperFrames project is just a folder of plain HTML and CSS files, annotated with timing attributes that mark when each element enters, how long it stays, and which layer it sits on. An AI coding agent writes that HTML from a plain-language request. Instead of recording a live browser session, the tool steps through the timeline frame by frame, capturing each exact moment, then assembles those frames into a video file. Because rendering never depends on real-time playback, the same project produces an identical output run after run, even on a slow machine.

Why it's ranked here

HyperFrames backs its scope with real engineering: a permissively licensed (Apache 2.0), multi-package monorepo with dedicated build, lint, and test scripts, distributed as an npm package with a documented command-line interface and a defined project-file schema rather than a single throwaway script. The scripts also wire in Lambda and Cloud Run rendering paths, which is more infrastructure than most video-generation repos bother to ship. That combination, a real toolchain plus multiple deployment targets, is why it belongs above single-script alternatives.

What's good

The interface layers stay in sync: the coding agent, the visual editor, the command-line tool, and the embeddable library all read and write the same project folder, so there is no export step where changes get lost. Onboarding is scoped rather than all-or-nothing: the default install pulls in only a small core of routing skills, and a workflow-specific skill, like turning a pull request into a changelog video or adding captions to an existing talking-head clip, loads only when that specific task comes up. Cloud rendering on managed infrastructure, AWS Lambda, or Google Cloud Run is documented as a first-class path, not an afterthought.

Tradeoffs

The onboarding path has more branches than it needs: the interactive installer pulls in only a small core set by default, but a script or an unattended agent that skips the picker gets all twenty skills unless it passes a flag to avoid that. A second command exists specifically because the public registry used by the first can lag the main branch by hours. None of this is unreasonable engineering, but a newcomer reading the setup instructions once will have to make several install decisions correctly just to get the intended lean setup.

How to use it well

This suits a team that already works through a coding agent and wants that agent to produce short marketing clips, changelog explainers, captioned talking-head cuts, or slide decks without leaving the terminal. Reach for the update command rather than the default installer when scripting the setup, so an automated run does not silently pull in all twenty workflow skills. It is not a fit for someone who wants a drag-and-drop video editor with no coding agent and no HTML in the loop.

Technical notes+

The project schema is documented in docs/concepts/index.mdx: timed elements carry data-start, data-duration, and data-track-index attributes directly in HTML, and compositions can nest via data-composition-id/data-composition-src, with the constraint that render-time state must avoid the system clock, unseeded randomness, and network requests to stay reproducible. package.json shows an npm/bun workspaces monorepo (packages/*) with per-package build filters for core, engine, producer, player, studio, cli, and cloud packages (aws-lambda, gcp-cloud-run), plus lint (oxlint), format (oxfmt), dead-code (knip), and a large test:scripts battery mixing bun and vitest runners. docs/developers/cli.mdx documents the npx hyperframes CLI surface (init, preview, lint, check, snapshot, render, publish, doctor, transcribe, tts, capture, compare) and notes most commands accept --json for scripting. README.md documents the npx skills add heygen-com/hyperframes install flow, its --all and --skill flags, and the separate npx hyperframes skills update path used for agents and non-interactive runs. docs/introduction.mdx frames the output as a project folder rather than a flattened file, editable by the agent, Studio, or custom tooling after generation.

Observed

License
Apache 2.0 license (README.md badge).
Runtime requirement
Requires Node.js 22 or later (README.md badge).
Distribution
Distributed as the npm package hyperframes, with the CLI invoked via npx hyperframes <command> (README.md, docs/developers/cli.mdx).
Repository structure
Monorepo of workspace packages under packages/* including core, engine, producer, player, studio, cli, sdk, aws-lambda, and gcp-cloud-run (package.json).
Rendering targets
Rendering is documented to run locally, on AWS Lambda, or on Google Cloud Run (docs/developers/cli.mdx).
Installation
Skills are installed separately from the core package via npx skills add heygen-com/hyperframes, with --all and --skill <name> flags (README.md).
Timing model
Composition timing is expressed as HTML attributes (data-start, data-duration, data-track-index) rather than a separate timeline file format (docs/concepts/index.mdx).
Tooling
Lint and quality tooling includes oxlint, oxfmt, and knip, alongside a combined bun/vitest test suite defined in package.json.

Read from README.md, package.json, docs/developers/cli.mdx, docs/concepts/index.mdx, docs/introduction.mdx.

What it can do

  • Render HTML, CSS, media, and animations into MP4 video

    HTML/CSS/media/animations → MP4 video

  • Convert PR/changelog content into video

    PR/changelog content → Video

  • Migrate Remotion projects to HyperFrames

    Remotion project → HyperFrames project

  • Render video via command-line interface

    CLI commands → MP4 video

Tags

video-renderinghtml-to-videoai-agentsffmpegclaude-codecliopen-sourceanimation

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.