HyperFrames: Das Open-Source-Framework, das HTML in Produktionsvideos umwandelt

<div id="stage"
     data-composition-id="mein-video"
     Datenstart="0"
     data-width="1920"
     Datenhöhe="1080">

  <Video
    id="clip-1"
    Datenstart="0"
    Datendauer="5"
    data-track-index="0"
    src="intro.mp4"
    gedämpft
    spieltinline
  ></video>

  <img
    id="overlay"
    class="clip"
    data-start="2"
    Datendauer="3"
    data-track-index="1"
    src="logo.png"
  />

  <Audio
    id="bg-music"
    Datenstart="0"
    Datendauer="9"
    data-track-index="2"
    Datenvolumen="0,5"
    src="music.wav"
  ></audio>
</div>
„

Die **Dreierregel** regelt gültige Kompositionen:
- **Root-Element** benötigt „data-composition-id“, „data-width“, „data-height“.
- **Zeitgesteuerte Elemente** benötigen `class="clip"`, `data-start`, `data-duration`, `data-track-index`
- **Animationen** müssen „{ paused: true }“ auf GSAP-Timelines verwenden und sich auf „window.__timelines“ registrieren

Das ist eine Zeremonie nahe Null. Jeder Webentwickler, der „div“-Elemente schreiben kann, kann eine Videokomposition schreiben.

---

### AI-First Design

HyperFrames ist nicht nur KI-kompatibel – es wurde für KI-Codierungsagenten entwickelt.

Die CLI ist standardmäßig nicht interaktiv, was bedeutet, dass sie von Natur aus skriptfähig ist. Fehlermeldungen sind maschinenlesbar. Die Ausgabe erfolgt im Klartext. Es gibt keine TTY-Eingabeaufforderungen, die einen Headless-Agenten blockieren.

Noch wichtiger ist, dass das Framework mit einem **Kompetenzpaket** geliefert wird, das KI-Agenten die richtigen Muster beibringt:

„Bash
npx sKills fügen heygen-com/hyperframes hinzu
„

Nach der Installation stehen in Claude Code die folgenden Slash-Befehle zur Verfügung:
- „/hyperframes“ – Kompositionen erstellen und bearbeiten
- „/hyperframes-cli“ – init, lint, Vorschau, rendern
- „/hyperframes-media“ – TTS, Transkription, Hintergrundentfernung
- „/gsap“, „/lottie“, „/ three“, „/animejs“, „/css-animations“, „/waapi“ – adapterspezifische Animationsfähigkeiten

Eine Kaltstartaufforderung wie „Erstellen Sie eine 10-sekündige Produkteinführung mit einem Einblendtitel und Hintergrundmusik“* erzeugt eine funktionierende Komposition. Ebenso gut funktionieren Warmstart-Eingabeaufforderungen, die vorhandenes HTML/PDF/CSV in Videos umwandeln. Iteration ist nur natürliche Sprache: * „Machen Sie den Titel 2x größer und fügen Sie am Ende eine Ausblendung hinzu.“*

Dies ist eine qualitativ andere Erfahrung als der Versuch, Premiere über eine API zu steuern oder JSX in Remotion manuell zu codieren.

---

### Über 50 gebrauchsfertige Blöcke

HyperFrames liefert eine erweiterbare Blockregistrierung. Installieren Sie allgemeine Komponenten mit einem einzigen CLI-Befehl:

„Bash
Npx-Hyperframes fügen einen Flash-Through-White # Shader-Übergang hinzu
Npx-Hyperframes fügen ein Instagram-Follow #-Social-Overlay hinzu
Npx-Hyperframes fügen Datendiagramm # animiertes Diagramm hinzu
„

Zu den Vorlagen für Videostile gehören „swiss-grid“, „nyt-graph“, „play-mode“ und „vignelli“ – für Corporate Clean, redaktionelles Storytelling, aktive soziale Medien und 9:16-Porträtformate.

---

### Das Rahmenadaptermuster

HyperFrames führt eine „Frame Adapter“-Abstraktion ein, die die Timing-Logik sauber von der Animationslaufzeit trennt. Bringen Sie Ihre eigene durchsuchbare Animationsbibliothek mit – GSAP, Lottie, CSS-Keyframes, Three.js oder Web Animations API – und HyperFrames übernimmt die Suche und Zusammenstellung der Frames.

Das bedeutet, dass Sie Ihr vorhandenes Animationswissen nicht neu schreiben müssen. Wenn Ihr Team bereits GSAP-Zeitleisten für Webanimationen verwendet, funktionieren dieselben Zeitleisten auch in HyperFrames-Videokompositionen.

---

### Deterministische Rendering-Engine

Die Rendering-Pipeline ist konstruktionsbedingt Frame-genau:

„
HTML-Quelle → Headless Chrome lädt Komposition → Chrome sucht nach Frame = Boden (Zeit × FPS) → Bildschirmaufnahme → FFmpeg-Kodierung → MP4
„

Die „beginFrame“-API von Chrome sorgt für Subframe-Präzision. Keine Wiedergabe von der Wanduhr. Keine Wettlaufbedingungen zwischen Wiedergabekopf und Aufnahme. Immer das gleiche HTML, die gleichen Eingaben, die gleiche Videodatei.

Dieser Determinismus macht KI-Agent-gesteuerte Arbeitsabläufe realisierbar. Ein LLM kann eine Komposition sicher iterativ ändern, neu rendern und visuelle Unterschiede vornehmen – etwas, das mit Tools, deren Ausgabe sich je nach Maschinenlast, Taktabweichung oder Tageszeit ändert, unmöglich ist.

---

### Vollständig Open Source (Apache 2.0)

HeyGen liefert HyperFrames unter Apache 2.0 – einer freizügigen, vollständig vom OSI genehmigten Lizenz. Keine bezahlte Stufe über einem Schwellenwert für kleine Teams (wie bei Remotion verwendet). Keine Quellenlizenzierung verfügbar. Volle Rechte zum Forken, Modifizieren, kommerziellen Versenden oder Aufbauen eines Produkts darauf.

---

## Erste Schritte

### Voraussetzungen

„Bash
node -v # braucht >= 22 (mit NVM prüfen)
ffmpeg -version # wird für die Kodierung benötigt
„

### Schnelle Einrichtung

„Bash
# Option 1: interaktive Projektinitialisierung
Npx-Hyperframes initieren mein Video
CD mein Video
Npx-Hyperframes-Vorschau # öffnet den Browser mit Live-Neuladen
npx-Hyperframes rendern # gibt MP4 aus

## Option 2: KI-Agent (empfohlen)
Npx-Fähigkeiten fügen heygen-com/hyperframes hinzu
## Dann verwenden Sie /hyperframes in Claude Code, Cursor usw.
„

### Erste Komposition

Erstellen Sie „index.html“ in Ihrem Projektstammverzeichnis:

```html
<div id="root"
     data-composition-id="Hallo"
     data-width="1920"
     Datenhöhe="1080">

  <h1 id="title" class="clip"
      Datenstart="0"
      Datendauer="5"
      data-track-index="0"
      style="Schriftgröße: 96px; Farbe: Weiß; Schriftfamilie: serifenlos;">
    HyperFrames
  </h1>
</div>
„

„Bash
Npx-Hyperframes-Vorschau # Sehen Sie sich das Ergebnis live an
Npx-Hyperframes rendern # als Ausgabe.mp4 speichern
„

Das ist es. Kein Bundler. Keine „npm-Installation“ des Framework-Kerns. Eine einzelne HTML-Datei ist eine vollständige Videokomposition.

---

## Erweiterte Nutzung

### GSAP-Timeline-Animationen

GSAP-Animationen funktionieren in HyperFrames mit einer wichtigen Regel: Halten Sie sie an, damit HyperFrames die Wiedergabe steuert:

„Javascript
// timeline.js – wird über <script> in Ihre Komposition geladen
const tl = gsap.timeline({ paused: true });
tl.to('#title', { x: 200, Deckkraft: 1, Dauer: 2, Leichtigkeit: 'power2.out' })
  .to('#subtitle', { y: 0, Deckkraft: 1, Dauer: 1 }, '-=0.5');

// Registrieren, damit HyperFrames danach suchen kann
window.__timelines = { main: tl };
„

HyperFrames sucht nach „window.__timelines.main“, um die Frame-Position genau zu bestimmenns während des Renderns. Sie können jederzeit in der Browservorschau durch die Zeitleiste scrollen und eine exakte, bildgenaue Vorschau sehen.

### Mehrspurige Kompositionen

Spurindizes steuern die Schichtung im Compositor. Ein höherer „Data-Track-Index“ wird oben gerendert:

```html
<!-- Track 0: Basisvideo -->
<video data-track-index="0" ... />

<!-- Track 1: Overlay-Grafiken -->
<svg data-track-index="1" ... />

<!-- Spur 2: Untertitel (oben im Stapel) -->
<div class="clip" data-track-index="2" ... />
„

Bis zu allen verfügbaren Browser-Compositor-Ebenen pro Frame; Kein festes Limit pro Projekt.

### Website-zu-Video-Pipeline

HyperFrames beinhaltet eine „Website-zu-Hyperframes“-Fähigkeit, die eine Live-URL erfasst und in eine Videokomposition umwandelt. Dies ermöglicht vollständig automatisierte Arbeitsabläufe wie:

- „Rendern Sie die Homepage unter „aratech.ae“ als 30-sekündiges Scroll-Screencast-Video.“
- „Nehmen Sie das Notion-Dokument und verwandeln Sie jeden Abschnitt in eine zeitgesteuerte Folie.“
- „Generieren Sie eine Produktdemo aus der Live-Staging-URL“

Dies ist die CI-freundliche Videogenerierungsschleife, die die meisten Marketingteams immer noch von Hand durchführen.

### Lottie und Three.js

„Javascript
// Lottie-Spieler, der von der HyperFrames-Laufzeit registriert wird
window.__hfLottie.play('animation.json');

// Three.js-Szene – HyperFrames fügt die aktuelle Frame-Zeit ein
window.__hfThreeTime = 0; // Sekunden, jeden Frame durch die Engine festlegen
„

Adapterfähigkeiten („/lottie“, „/drei“) initialisieren automatisch das richtige globale und legen das Frame-Timing offen, sodass Sie selbst keine Installationen einrichten müssen.

---

## Vergleich: HyperFrames vs. Remotion

HyperFrames ist direkt von Remotion inspiriert – dem React-basierten programmatischen Video-Framework, das bei HeyGen in der Produktion verwendet wird. Beide fahren Headless Chrome. Beide erzeugen eine deterministische, bildgenaue Ausgabe. Beide Fähigkeiten als Schiffsagent. Die architektonische Spaltung beruht auf einer Kernentscheidung: **Was schreibt der Hauptautor?**

| | HyperFrames | Remotion |
|---|---|---|
| **Primäres Authoring-Format** | HTML + CSS + JS | TSX reagieren |
| **Build-Schritt** | Keine – „index.html“ wird unverändert abgespielt | Erforderlicher Bundler |
| **Bibliotheksanimationen (GSAP, Lottie)** | Suchbar, bildgenau über Adapter | Spielt während des Renderns auf der Uhr |
| **Vorhandenes HTML/CSS** | Einfügen und animieren | Muss als JSX | umgeschrieben werden
| **Verteiltes Rendering** | Einzelmaschine heute | Lambda, serienreif |
| **Lizenz** | **Apache 2.0 (vollständig Open Source)** | Quelle verfügbar, oben bezahlt kleines Team |

Für Teams, die bereits HTML/CSS schreiben oder vorhandene Web-Assets in Videos einbetten müssen: **HyperFrames ist die offensichtliche Wahl**. Für Teams, die bereits stark in eine React-Komponentenbibliothek mit CI/CD investiert haben: Remotion bietet einige Vorteile auf der verteilten Front.

Hervorzuheben ist die Lizenzlücke. Das „quellenverfügbare“ Modell von Remotion bedeutet, dass Ihre Unternehmensgröße, Ihr Umsatz oder Ihre Bereitstellungstopologie möglicherweise eine kostenpflichtige Lizenz auslösen. Für HyperFrames gibt es unter Apache 2.0 keine solche Einschränkung.

---

## Warum das jetzt wichtig ist

Zwei konvergierende Veränderungen machen HyperFrames in diesem Jahr relevant und nicht in einer zukünftigen Pipeline:

**1. Das Video zum KI-Agenten finden Sie hier.** Claude Code, Cursor und Codex können programmieren. Jetzt können sie mit HyperFrames *Videos* codieren. Natürliche Sprache → HTML-Komposition → gerendertes MP4 ist ein End-to-End-Workflow, der heute ausgeführt wird. Sie müssen nicht warten, bis ein KI-Videomodell gut genug ist; Sie benötigen HTML und einen Renderer, um gut genug zu sein – und das sind sie auch.

**2. Programmatisches Video ist ein Wettbewerbsvorteil.** Teams, die aus strukturierten Daten (CSV → Balkendiagramm-Rennen, PDF → Pitch-Videos, Website → Demo-Reels) Videos in großem Maßstab generieren, haben einen unmenschlichen Vorsprung bei der Geschwindigkeit der Content-Produktion. Die Tools, die zuerst die meisten Entwickler und Agenten anlocken, werden die Infrastruktur für die nächste Welle automatisierter Inhalte definieren.

HyperFrames ist noch am Anfang, entwickelt sich aber schnell weiter – 145 Veröffentlichungen, ein spezielles Kompetenz-Ökosystem und Integration mit allen wichtigen KI-Programmierungsagenten. Es ist der richtige Zeitpunkt, mit dem Aufbau zu beginnen.

---

## Fazit und nächste Schritte

HyperFrames ist nicht nur ein weiteres Videotool. Es ist das erste Rendering-Framework, das die Videokomposition als erstklassiges Artefakt im Arbeitsablauf eines Entwicklers behandelt – in Git versioniert, in PRs überprüft, von Agenten iteriert und bei jedem Commit deterministisch gerendert.

Wenn Sie jemals Folgendes benötigen:
- Generieren Sie 100 personalisierte Einführungsvideos aus CRM-Daten
- Verwandeln Sie eine Reihe von Landingpages in ein Demo-Reel
- Automatisieren Sie die Erstellung sozialer Clips aus Podcast-Transkripten
- Betten Sie die von der KI generierte Videoausgabe in eine CI/CD-Pipeline ein

…HyperFrames ist das Tool, das den Kreis schließt.

[Bereit, loszulegen?](https://github.com/heygen-com/hyPerframes)