James 89beb95a87 fix(cli): exit on Ctrl+C during hyperframes dev
The SIGINT handlers that were meant to do graceful cleanup (close server,
remove symlinks) override Node's default exit behavior. If the cleanup
hangs (e.g. server.close() blocked by open connections), the process is
stuck and Ctrl+C does nothing.

Fix: don't intercept SIGINT at all. Node's default behavior exits the
process immediately on Ctrl+C. The OS reclaims the port and file handles.
Use process.on("exit") for best-effort symlink cleanup instead.

Also fixes running the CLI via `tsx` in dev mode — __CLI_VERSION__ is a
tsup build-time define that crashes at runtime without a fallback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 06:35:41 +00:00
2026-03-21 22:43:56 -07:00
2026-03-21 22:43:56 -07:00

Hyperframes

Node.js

Write HTML. Render video. Built for agents.

Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents via MCP.

Why Hyperframes?

  • HTML-native — AI agents already speak HTML. No React required.
  • Frame Adapter pattern — bring your own animation runtime (GSAP, Lottie, CSS, Three.js).
  • Deterministic rendering — same input = identical output. Built for automated pipelines.
  • AI-first design — not a bolted-on afterthought.

Quick Start

npx hyperframes init my-video
cd my-video
npx hyperframes dev      # preview in browser
npx hyperframes render   # render to MP4

Requirements: Node.js >= 22, FFmpeg

How It Works

Define your video as HTML with data attributes:

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
  <video
    id="clip-1"
    data-start="0"
    data-duration="5"
    data-track="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>
  <img id="overlay" data-start="2" data-duration="3" data-track="1" src="logo.png" />
  <audio
    id="bg-music"
    data-start="0"
    data-duration="9"
    data-track="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>
</div>

Preview instantly in the browser. Render to MP4 locally. Let AI agents compose videos using tools they already understand.

Packages

Package Description
hyperframes CLI — create, preview, lint, and render compositions
@hyperframes/core Types, parsers, generators, linter, runtime, frame adapters
@hyperframes/engine Seekable page-to-video capture engine (Puppeteer + FFmpeg)
@hyperframes/producer Full rendering pipeline (capture + encode + audio mix)
@hyperframes/studio Browser-based composition editor UI

Documentation

Full docs at hyperframes.heygen.com — includes guides, concepts, API reference, and package documentation.

Contributing

See CONTRIBUTING.md for guidelines on how to contribute.

License

See LICENSE for details.

S
Description
hyperframes-cli: Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…; hyperframes: Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…; hyperframes-registry: Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visua…
Readme 622 MiB
Languages
TypeScript 86.3%
JavaScript 9.2%
CSS 4%
Shell 0.3%
Python 0.2%