HyperFrames

Skill

Schreib HTML. Rendere Video. Für KI-Agents gebaut. Puppeteer-Capture, FFmpeg-Encoding, GSAP-Timelines, TTS und Transitions — alles aus einem Composition-File.

Open-Source-Toolkit von HeyGen, das HTML-basierte Kompositionen mit Puppeteer und FFmpeg in Video rendert. Ships als Monorepo mit CLI (`hyperframes`), Core-Library (Parser, Linter, Runtime, Frame-Adapter), Engine (seekable Page-to-Video-Capture), Producer (komplette Render-Pipeline mit Audio-Mix), Browser-Studio, einbettbarem `<hyperframes-player>` Web-Component und WebGL-Shader-Transitions. Für KI-Agents liefert HyperFrames gleich mehrere Agent-Skills mit: `hyperframes` (Komposition, Captions, TTS, audio-reaktive Animationen, Transitions), `hyperframes-cli` (init · lint · preview · render · transcribe · tts · doctor), `hyperframes-registry` (Block- und Component-Installation), `website-to-hyperframes` (komplette URL-zu-Video-Pipeline) und `gsap` (Animations-API, Timelines, ScrollTrigger, React/Vue/Svelte). Installation per `npx skills add heygen-com/hyperframes` — in Claude Code registrieren sich die Skills direkt als Slash-Commands.

GitHub ↗Doku ↗Homepage ↗

Kompatibel mit

Läuft mit diesen Hosts

HyperFrames ist mit 1 App und 0 IDEs kompatibel — dort erscheint es automatisch auf jeder Constellation, die diesen Host als Komponente führt.

Apps · 1

Claude Code
Installation via `npx skills add heygen-com/hyperframes` — registriert fünf Slash-Commands in Claude Code (`/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry`, `/website-to-hyperframes`, `/gsap`).

Einrichtung

Node ≥ 22, ffmpeg lokal, optional Chromium. Einzelner Befehl: `npx skills add heygen-com/hyperframes` installiert die Agent-Skills — die CLI kommt bei Bedarf über `npm i -g hyperframes`.

Voraussetzungen

Node.js ≥ 22 (nodejs.org)
ffmpeg — z.B. brew install ffmpeg
Chromium/Chrome — Puppeteer lädt bei Bedarf selbst eine kompatible Version herunter

Installation — Agent-Skills (empfohlen)

Für Claude Code, Cursor, Gemini CLI oder Codex genügt ein einziger Befehl:

npx skills add heygen-com/hyperframes

In Claude Code erscheinen anschließend die Slash-Commands:

Command	Zweck
`/hyperframes`	HTML-Komposition, Captions, TTS, audio-reaktive Animationen, Transitions
`/hyperframes-cli`	CLI-Kommandos: `init`, `lint`, `preview`, `render`, `transcribe`, `tts`, `doctor`
`/hyperframes-registry`	Block- und Component-Installation via `hyperframes add`
`/website-to-hyperframes`	URL aufnehmen und in ein Video verwandeln (ganze Pipeline)
`/gsap`	GSAP-Animations-API, Timelines, ScrollTrigger, Plugin-Referenz

Installation — CLI zusätzlich

Wenn Du HyperFrames auch außerhalb eines Agenten nutzen willst:

npm i -g hyperframes

hyperframes init meine-komposition
cd meine-komposition
hyperframes preview     # lokaler Preview-Server
hyperframes render      # produziert das finale mp4

Smoke-Test

hyperframes doctor

Prüft Node, ffmpeg, Chromium und die Package-Versionen und meldet fehlende Abhängigkeiten.

Packages im Monorepo (für Integrationen)

Package	Zweck
`hyperframes`	CLI
`@hyperframes/core`	Types, Parser, Generator, Linter, Runtime, Frame-Adapter
`@hyperframes/engine`	Seekable Page-to-Video-Capture (Puppeteer + FFmpeg)
`@hyperframes/producer`	Komplette Render-Pipeline (Capture + Encode + Audio-Mix)
`@hyperframes/studio`	Browser-basierter Composition-Editor
`@hyperframes/player`	Einbettbarer `<hyperframes-player>` Web-Component
`@hyperframes/shader-transitions`	WebGL-Shader-Transitions für Kompositionen

Wann HyperFrames passt

Redaktionelle Kurz-Videos aus strukturiertem Content (Landing-Trailer, Constellation-Erklärungen, Magazin-Teaser)
Daten-getriebene Videos (Dashboards, Charts, Reports als animierter Clip)
Agent-getriebene Video-Produktion ohne manuelle Schnitt-Software

Wann HyperFrames nicht passt

Klassischer Video-Schnitt mit echtem Kameramaterial (dafür DaVinci/Premiere)
Photorealistische Avatar-Videos (dafür HeyGen selbst oder Synthesia)

Im Einsatz

Diese Constellations nutzen HyperFrames

Automatisch aus der Host-Kompatibilität abgeleitet — überall dort, wo einer der kompatiblen Hosts als Komponente geführt wird, erscheint HyperFrames auch.