Video bearbeiten mit KI: HyperFrames für die Videobearbeitung

TL;DR

KI-Agenten können Code schreiben, APIs aufrufen und mehrstufige Workflows ausführen. Bisher fehlte ihnen eine Fähigkeit: Videobearbeitung. Professionelle Tools wie After Effects und DaVinci Resolve verwenden geschichtete Zeitleisten und JSON-Szenengraphen, die nicht im Trainingsdatensatz von LLMs enthalten sind. HeyGens Open-Source-Projekt HyperFrames dreht den Ansatz um: Es ermöglicht KI-Agenten, Videos mit HTML, CSS und JavaScript zu erstellen und rendert das Ergebnis als MP4, MOV oder WebM. Die Installation als Claude Code Skill erfolgt mit einem einzigen Befehl – Ihr Agent wird zum Videoeditor.

Probiere Apidog noch heute aus

Einführung

Video ist das ansprechendste Kommunikationsformat im Web. Für alle anderen Medien, die ein KI-Agent produzieren kann (Text, Code, Bilder, Diagramme), gibt es eine klare Toolchain – für Video nicht.

Mit Modellen wie Sora, Veo oder Runway kann man zwar einen vollständigen Clip generieren, doch bleibt die Kontrolle gering: Es entsteht ein monolithisches Video aus einem Prompt. Das Zusammensetzen, Iterieren von Motion Graphics oder gezielte Markenanimationen sind so nicht möglich. Szenen-spezifische Anpassungen wie „Szene 3 mit langsamem Überblenden wiederholen“ sind kaum umsetzbar.

HeyGen hat HyperFrames am 17. April 2026 veröffentlicht, um diese Lücke zu schließen. Anstatt Agenten klassische Videosoftware beizubringen, setzt HyperFrames auf ein Format, das Agenten bereits beherrschen: HTML. In diesem Leitfaden erfährst du, wie HyperFrames funktioniert, warum der Ansatz sinnvoll ist und wie du deinen eigenen Agenten zur Videobearbeitung befähigst.

Wenn du API-gesteuerte Agenten-Workflows für Videos baust, solltest du auch die Orchestrierung testen. Wie Apidog dabei hilft, erfährst du am Ende.

Warum KI-Agenten Videos bisher nicht bearbeiten konnten

Traditionelle Videobearbeitungstools sind für Menschen gemacht, nicht für Agenten. Hauptprobleme:

• Zeitleisten-basierte UIs lassen sich nicht auf Code abbilden. After Effects, Premiere und DaVinci Resolve speichern Projekte als Binärformat oder verschachtelte JSON-Szenengraphen. Für Agenten sind Trainingsdaten und Semantik dieser Formate kaum zugänglich.
• Motion Graphics erfordern visuelles Denken. Keyframes, Easing, Layering – all das erfordert normalerweise ein Vorschaufenster. Agenten brauchen eine textbasierte Abstraktion.
• Menschlicher Operator als Voraussetzung. Render-Pipelines, Plugins und Codec-Auswahl stecken hinter Menüs. Skripting ist meist eingeschränkt und fragil.

Ergebnis: Agenten können ffmpeg-Skripte schreiben, Clips zusammenfügen und Text overlays erzeugen, aber komplexe Videobearbeitung bleibt Menschen vorbehalten.

Die Erkenntnis: HTML für Video

HeyGens Ansatz: LLMs sind bestens mit HTML, CSS und JavaScript vertraut. Sie wurden auf Millionen von Webprojekten, Animationen und Canvas-Experimenten trainiert.

Fordert man ein Modell auf, eine Animation zu bauen, produziert es HTML und CSS – inklusive:

• Positionierung mit CSS
• Animationen via GSAP oder CSS-Keyframes
• SVG-Rendering
• Layering mit z-index und opacity
• Übergänge zwischen Zuständen

Alle visuellen Basiselemente existieren bereits im Browser. Was fehlte: Eine Möglichkeit, HTML-Szenen als Zeitleiste in ein Videoformat zu rendern. Genau das macht HyperFrames: HTML wird zu Videoframes.

Wie HyperFrames funktioniert

HyperFrames erweitert Standard-HTML um wenige data- Attribute, die die Videozeitleiste definieren. Alles andere bleibt regulärer Web-Code.

Attribut	Zweck
data-composition-id	Eindeutige ID für die Videokomposition
data-width / data-height	Ausgabeauflösung in Pixeln
data-start	Startzeit der Szene (Sekunden)
data-duration	Dauer der Szene (Sekunden)
data-track-index	Reihenfolge der Ebenen bei Überlappungen

Ein Agent generiert eine HTML-Datei wie gewohnt. HyperFrames liest die Attribute, rendert die Seite in einem Headless-Browser, nimmt Frames mit der Ziel-Framerate auf und kodiert das Video mit FFmpeg.

Keine neue DSL, kein Keyframe-Editor, keine komplexen Szenengraphen – Animationen entstehen mit GSAP- oder CSS-Code, den LLMs bereits schreiben.

Ein minimales Beispiel

Hier ein HTML-Beispiel für eine 5-sekündige Komposition mit zwei Szenen: Titelkarte und Abschlussbildschirm mit Blur-Überblendung.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }
    .s1 { display:flex; flex-direction:column; justify-content:center; padding:120px 160px; gap:20px; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 160px; gap:32px; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>

    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });

    // Szene 1: Titel-Animation
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur-Überblendung
    const T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

Bemerkenswert:

1. Animationslogik ist reines GSAP – jedes Modell, das GSAP-Tutorials kennt, kann solche Timelines erzeugen.
2. HyperFrames-spezifischer Overhead: nur wenige data- Attribute am Wurzelelement.

Render diese Datei, und du erhältst ein 1920x1080 MP4. Text, Farben, Schriftarten oder Logos lassen sich direkt im HTML anpassen.

Was der Agent tatsächlich verwenden kann

Da die Render-Pipeline ein echter Browser ist, funktionieren nahezu alle Web-Technologien:

• CSS-Animationen/Transitions für einfache Bewegungen
• GSAP-Timelines für komplexe Abläufe
• SVG für Logos, Formen, Pfadanimationen
• Canvas für Partikel- und generative Grafiken
• Three.js für 3D-Szenen
• D3.js für Datenvisualisierung
• Lottie für After Effects-Animationen
• Webfonts (Google Fonts, eigene Quellen)
• Videos/Bilder per <video> oder <img>

Kein Wrapper, keine Plugins, keine neue Framework-Syntax. Der Agent nutzt vorhandenes Web-Know-how.

So gibst du deinem Agenten Videobearbeitung mit einem Befehl

HyperFrames ist als Claude Code Skill verfügbar. Die Installation erfolgt mit einem Befehl:

npx skills add heygen-com/hyperframes

Das holt den Skill aus dem offiziellen Repository, installiert die Toolchain und registriert die Videofunktion bei Claude Code.

Prompt-Beispiel für deinen Agenten:

Erstelle ein 10-sekündiges Produkt-Explainer-Video für eine neue API.
Starte mit dunklem Hintergrund, animiere den Produktnamen von unten nach oben mit Fade,
wechsle zu drei Bullet Points mit Icons, und schließe mit einer Call-to-Action-Karte ab.

Der Agent erstellt das HTML, zeigt eine lokale Vorschau und rendert das finale MP4. Kein API-Key, keine Drittanbieter-Dienste – läuft komplett lokal.

Einrichtung ohne Claude Code

HyperFrames ist Framework-agnostisch. Jeder Agent, der Shell-Kommandos ausführen und Dateien lesen kann, kann HyperFrames nutzen.

Repository klonen:

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
npm install

Komposition rendern:

npx hyperframes render my-video.html --output my-video.mp4

Lokale Vorschau:

npx hyperframes preview my-video.html

Mit preview öffnet sich ein Browser, in dem du die Zeitleiste prüfen und Frame-Genauigkeit kontrollieren kannst, bevor du einen vollständigen Render-Job startest.

Was dies für Entwickler erschließt

Automatisiertes Produktmarketing: Release Notes werden automatisch in HTML-Szenen umgewandelt, gerendert und als Video veröffentlicht – keine manuelle Zeitleiste nötig.

Personalisierte Videoantworten: Webhooks triggern den Agenten, der pro Nutzerereignis einen individuellen Clip erstellt – z.B. Willkommensvideos oder Quittungen.

Daten-Storytelling: Metriken werden in D3-Visualisierungen verpackt und als kommentierte Videoführung exportiert – automatisierte, regelmäßig aktualisierte Dashboards.

Dynamisches B-Roll für Podcasts oder Longform: Der Agent liest Transkripte, generiert Motion Graphics zu jedem wichtigen Punkt und legt sie unter das Audio.

API-Dokumentationsvideos: OpenAPI-Spezifikation wird geparst, animierte Endpoint-Walkthroughs als Videos exportiert.

Testen der Agenten-Orchestrierung mit Apidog

HyperFrames rendert das Video. Aber die vorgelagerte Orchestrierung – Agenten-Loop, Tool-Calls, LLM-API-Requests und Logik – entscheidet, ob und was gerendert wird.

Hier scheitern viele Workflows: Falsch formatierte Tool-Payloads, abgelaufene API-Requests, inkorrekte tool_use_id-Referenzen oder fehlerhafte Nachrichten-Schemas stoppen die Pipeline vor dem ersten Frame.

Apidog bietet eine Testumgebung für diese Orchestrierung:

• LLM-Endpunkte simulieren: Erstelle Dummy-Claude- oder OpenAI-Endpunkte mit exakt dem erwarteten Schema. Teste, wie deine Pipeline auf Fehler oder Verzögerungen reagiert – ohne echte API-Kosten.
• Tool-Use-Payloads validieren: Richte externe APIs (Asset-Abrufe, Stock-Footage, Brand-Kits) in Apidog ein und kombiniere sie zu Testfällen. So prüfst du, ob die Tool-Call-Struktur des Agenten zu deiner API passt.
• Token-Verbrauch verfolgen: Claude Opus 4.7 nutzt einen neuen Tokenizer und produziert bis zu 35 % mehr Tokens als Opus 4.6. Apidogs Tracking hilft dir, Prompts und Kosten im Blick zu behalten.
• Multi-Turn-Agenten-Flows debuggen: Ein vollständiges Video-Rendering benötigt meist 5–10 LLM-Runden (Planen, Szenen entwerfen, Timing, Animationen, Finalisieren). Mit Apidog kannst du die Konversation exakt rekonstruieren und Fehlerquellen identifizieren.

Das philosophische Argument

HeyGen geht weiter als „HTML ist ein praktisches Format für KI-generierte Videos“ – sie sehen HTML als richtiges Format für die Zukunft des Videos.

Argumente:

• Standard-Videodateien sind proprietär, von wenigen Anbietern kontrolliert. HTML ist offen, versionierbar, mit jedem Textwerkzeug bearbeitbar.
• Videos werden:
  • Git-vergleichbar: Änderungen zwischen Revisionen sind sichtbar.
  • Komponentisierbar: Titelkarten als React-Komponenten, Motion Graphics als Module.
  • Responsiv: Ein Kompositions-HTML für 1080p, 4K oder 9:16 ohne Neuaufbau.
  • Zugänglich: Screenreader und Alternativtexte direkt im Source.
  • Durchsuchbar: Text bleibt Text, kein OCR nötig.

All das funktioniert bereits im Browser. HyperFrames überführt Browser-Content direkt ins Videoformat.

Einschränkungen, die man kennen sollte

HyperFrames ist Version 1. Die wichtigsten Limits:

• Rendergeschwindigkeit: Komplexe Szenen (Three.js, Canvas-Shader) brauchen mehr Zeit als einfache Textanimationen.
• Live-Videoeingabe: <video>-Tags gehen, aber Echtzeit-Feeds/Streams benötigen Extra-Code.
• Audio-Unterstützung: Grundlegende Audiotracks möglich, komplexes Mixing weiterhin FFmpeg.
• Agenten-Kreativität: Ergebnisqualität hängt vom verwendeten LLM ab (aktuell: Opus 4.7 am besten).

Berücksichtige diese Punkte bei der Planung von Produktionspipelines.

Checkliste für den Einstieg

• [ ] Claude Code installieren (oder eigenen Agenten nutzen)
• [ ] npx skills add heygen-com/hyperframes ausführen
• [ ] Agenten ein einfaches 5-Sekunden-Video erstellen lassen
• [ ] MP4-Output rendern und prüfen
• [ ] Styling, Timing, Szenen iterieren
• [ ] Für API-Workflows LLM- und Tool-Endpunkte in Apidog einrichten
• [ ] Echtes Video (Produkt-Teaser, Datenstory, Release Notes) bauen
• [ ] GitHub-Repo unter github.com/heygen-com/hyperframes mit ⭐ bewerten

Fazit

KI-Agenten schreiben seit Jahren Code – Videobearbeitung war jedoch der letzte große kreative Bereich, der einen Menschen erforderte. HyperFrames hebt diese Hürde auf, indem es Agenten dort abholt, wo sie schon fit sind: HTML, CSS und JavaScript.

Der Ansatz ist einfach, aber leistungsfähig genug für Broadcast-Qualität. Wenn du irgendeine Art von Video-Output automatisieren willst (Marketing, personalisierte Inhalte, Datenvisualisierung, agentengesteuerte Doku), gehört HyperFrames in deinen Stack.

Für die API- und Orchestrierungsschicht: Teste Konversationen, Tool-Calls und LLM-Requests deines Agenten mit Apidog, bevor du skalierst. Fehlgeschlagene API-Anfragen werden nicht zu MP4 gerendert.