Blog

Video bearbeiten mit KI: HyperFrames für die Videobearbeitung

Ashley Innocent

Ashley Innocent

17 April 2026

Video bearbeiten mit KI: HyperFrames für die Videobearbeitung

Apidog für Unternehmen

On-Premises-Bereitstellung

SSO & RBAC

SOC 2 konform

Apidog Enterprise entdecken

TL;DR

KI-Agenten können Code schreiben, APIs aufrufen und mehrstufige Workflows ausführen. Bisher entzog sich ihnen eine Fähigkeit: die Videobearbeitung. Professionelle Tools wie After Effects und DaVinci Resolve verwenden geschichtete Zeitleisten und JSON-Szenengraphen, auf denen LLMs nicht trainiert wurden. HeyGens neues Open-Source-Projekt, HyperFrames, kehrt den Ansatz um. Es ermöglicht KI-Agenten, Videos mit HTML, CSS und JavaScript zu erstellen, und rendert das Ergebnis dann in MP4, MOV oder WebM. Sie installieren es als Claude Code Skill mit einem einzigen Befehl, und Ihr Agent wird zum Videoeditor.

Einführung

Video ist das ansprechendste Kommunikationsformat im Web. Jedes andere Medium, das ein KI-Agent produzieren kann (Text, Code, Bilder, Diagramme), verfügt über eine klare Toolchain. Video nicht.

Man könnte ein Modell anweisen, einen vollständigen Clip mit Sora, Veo oder Runway zu generieren, aber dieser Ansatz hat Grenzen. Man erhält ein einziges monolithisches Video aus einem Prompt. Man kann es nicht zusammensetzen. Man kann keine Bewegungsgrafiken iterieren oder spezifische Markenanimationen überlagern. Man kann dem Agenten nicht sagen: „Szene 3 mit einem langsameren Überblenden wiederholen.“

HeyGen hat HyperFrames am 17. April 2026 veröffentlicht, um diese Lücke zu schließen. Anstatt Agenten traditionelle Videosoftware beizubringen, gaben sie Agenten ein Format, das sie bereits kennen: HTML. Dieser Leitfaden erklärt, wie es funktioniert, warum der Ansatz sinnvoll ist und wie Sie es einrichten können, damit Ihr eigener Agent Videos bearbeiten kann.

Wenn Sie API-gesteuerte Agenten-Workflows erstellen, die Videos produzieren, sollten Sie auch die Orchestrierungsschicht testen. Wie Apidog dabei hilft, behandeln wir am Ende.

button

Warum KI-Agenten Videos bisher nicht bearbeiten konnten

Traditionelle Videobearbeitungstools wurden nicht für Agenten entwickelt. Sie wurden für Menschen gemacht, die auf Zeitleisten klicken.

Drei spezifische Hindernisse:

Zeitleisten-basierte Benutzeroberflächen lassen sich nicht auf Code abbilden. After Effects, Premiere und DaVinci Resolve speichern Projekte als proprietäre Binärformate oder tief verschachtelte JSON-Szenengraphen. Selbst wenn ein Agent diese Dateien lesen könnte, ist der semantische Raum eng. Für Modellgewichte dieser Formate gibt es kaum Trainingsdaten.

Bewegungsgrafiken erfordern visuelles Denken. Keyframe-Animationen, Easing-Kurven und Ebenen-Compositing werden normalerweise nach Gefühl vorgenommen. Agenten sehen kein Vorschaufenster. Sie benötigen eine textbasierte Abstraktion, um über Bewegung nachzudenken.

Die Tools setzen einen menschlichen Bediener voraus. Render-Pipelines, Plugin-Ökosysteme und Codec-Auswahlmöglichkeiten befinden sich alle hinter UI-Menüs. Die Automatisierung durch Skripte funktioniert in begrenzten Fällen (z. B. ExtendScript in After Effects), aber die APIs sind eng und fragil.

Ergebnis: Agenten konnten ein Skript schreiben, um ffmpeg aufzurufen, Clips zusammenzufügen und Text mit grundlegenden Filtern zu überlagern. Alles darüber hinaus erforderte einen Menschen.

Die Erkenntnis: HTML für Video

HeyGens Team machte eine andere Beobachtung. LLMs wurden auf Milliarden von HTML-, CSS- und JavaScript-Seiten trainiert. Sie haben Hunderttausende von GSAP-Animationen, SVG-Kompositionen, Canvas-Experimenten und Lottie-Dateien gesehen. Das Web ist das größte kreative Medium in ihren Trainingsdaten.

Wenn man ein führendes Modell bittet, eine visuell reichhaltige Animation zu erstellen, schreibt es fließend HTML. Es weiß, wie man:

Alle visuellen Primitiven, die ein Editor benötigt, existieren bereits im Browser. Das fehlende Puzzleteil war, eine Zeitleiste von HTML-Szenen in eine gerenderte Videodatei umzuwandeln.

Das ist es, was HyperFrames tut. Der Name sagt es: HTML wird zu Videobildern (Frames). HyperFrames.

Wie HyperFrames funktioniert

HyperFrames fügt einem Standard-HTML einen kleinen Satz von data--Attributen hinzu. Diese Attribute definieren die Videozeitleiste. Alles andere ist einfacher Web-Code.

Die Kernattribute:

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

Der Agent schreibt eine normale HTML-Datei. HyperFrames liest die Datenattribute, führt die Seite in einem Headless-Browser aus, erfasst Frames mit der Zielframe-Rate und kodiert die Ausgabe mit FFmpeg.

Das ist alles. Keine neue DSL. Kein Szenengraph. Kein Keyframe-Editor. Die Animation lebt in GSAP-Timelines oder CSS-Animationen, genau dem Code, den das Modell bereits produziert.

Ein minimales Beispiel

Hier ist eine 5-sekündige Videokomposition in weniger als 70 Zeilen HTML. Zwei Szenen: eine Titelkarte, die einblendet, und dann mit einem Weichzeichner-Überblendeffekt in einen Abschlussbildschirm übergeht.

<!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 });

    // Scene 1: title entrance
    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 crossfade transition
    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>

Zwei Dinge sind bemerkenswert:

  1. Die Animationslogik ist reines GSAP. Jedes Modell, das GSAP-Tutorials gesehen hat, kann solche Timelines schreiben.
  2. Der HyperFrames-Overhead ist minimal. Ein paar data--Attribute am Wurzelelement. Nichts weiter.

Rendern Sie diese Datei, und Sie erhalten ein 1920x1080 MP4 der Animation. Ändern Sie den Text, ändern Sie die Farben, tauschen Sie die Schriftarten aus, fügen Sie ein Logo hinzu: Die gesamte Datei ist einfaches HTML.

Was der Agent tatsächlich verwenden kann

Da die Render-Pipeline ein echter Browser ist, funktioniert jede Web-Technologie:

Keine Wrapper, keine Plugin-Architektur, kein zu erlernendes Framework. Der Agent nutzt, was er bereits weiß.

So geben Sie Ihrem Agenten die Videobearbeitung mit einem Befehl

HyperFrames wird als Claude Code Skill ausgeliefert. Wenn Sie Claude Code verwenden, ist die Installation ein einziger npm-Befehl.

npx skills add heygen-com/hyperframes

Dies ruft den Skill aus HeyGens GitHub-Repository ab, installiert die Toolchain und registriert die Videobearbeitungsfunktion bei Claude Code.

Nach der Installation fordern Sie Ihren Agenten auf natürliche Weise auf:

Build me a 10-second product explainer video for a new API.
Start with a dark gradient background, animate the product name
sliding up from the bottom with a fade, then cut to three
bullet points with icons, end on a call-to-action card.

Der Agent schreibt das HTML, führt eine lokale Vorschau aus und rendert die endgültige MP4-Datei. Keine API-Schlüssel. Keine externen Dienste. Alles läuft auf Ihrem Rechner.

Einrichtung ohne Claude Code

HyperFrames ist Framework-agnostisch. Sie können es von jedem Agenten aufrufen, der Shell-Befehle ausführen und Dateien lesen kann.

Klonen Sie das Repo:

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

Eine Kompositionsdatei rendern:

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

Lokal vorschauen:

npx hyperframes preview my-video.html

Der Vorschau-Befehl öffnet ein Browserfenster, in dem Sie die Zeitleiste durchgehen und die Frame-für-Frame-Genauigkeit überprüfen können, bevor Sie einen vollständigen Renderauftrag starten.

Was dies für Entwickler erschließt

Einige Anwendungsfälle ergeben sich sofort.

Automatisiertes Produktmarketing. Ihr Agent kann Release Notes abrufen, Szene für Szene HTML generieren und ein Render-Ergebnis an Ihr CDN senden. Jede Veröffentlichung erhält ein Video, ohne dass ein Mensch eine Zeitleiste anfassen muss.

Personalisierte Videoantworten. API-Webhooks lösen einen Agenten aus, der einen personalisierten Clip pro Benutzerereignis rendert. Willkommensvideos, Quittungen, Meilenstein-Feiern – alles bei Bedarf generiert.

Daten-Storytelling. Speisen Sie Metriken in einen Agenten ein. Er schreibt D3-Visualisierungen, verpackt in HyperFrames-Szenen. Das Ergebnis ist eine kommentierte Führung durch Ihr Dashboard, die vierteljährlich automatisch aktualisiert wird.

Dynamisches B-Roll für Podcasts oder Langform-Inhalte. Ein Agent liest ein Transkript, generiert Bewegungsgrafiken, die jeden wichtigen Punkt illustrieren, und legt sie über das Audio.

API-Dokumentationsvideos. Parsen Sie Ihre OpenAPI-Spezifikation, generieren Sie Endpoint-Walkthroughs mit animierten Request/Response-Diagrammen, exportieren Sie sie als teilbare Clips.

Testen der Agenten-Orchestrierung mit Apidog

HyperFrames übernimmt den Rendervorgang. Alles vorgelagert ist Orchestrierung: die Agenten-Schleife, Tool-Aufrufe, LLM-API-Anfragen und die Logik, die entscheidet, welches Video aus welchem Input produziert werden soll.

Hier brechen Dinge in der Produktion zusammen. Falsch formatierte Tool-Payloads, abgelaufene API-Anfragen, inkorrekte tool_use_id-Referenzen oder nicht übereinstimmende Nachrichten-Schemas stoppen die Video-Pipeline, bevor ein einziger Frame gerendert wird.

Apidog bietet Ihnen eine Testumgebung für die Teile, die HyperFrames nicht abdeckt:

LLM-Endpunkte simulieren. Erstellen Sie in Apidog einen Dummy-Claude- oder OpenAI-Endpunkt mit dem genauen Schema, das Ihr Agent erwartet. Testen Sie, wie Ihre Pipeline auf falsch formatierte oder verzögerte Antworten reagiert, bevor echte API-Kosten anfallen.

Tool-Use-Payloads validieren. Wenn Ihr Agent externe APIs aufruft (für Asset-Abrufe, Stock-Footage-Suchen oder Brand-Kit-Abrufe), richten Sie diese Endpunkte in Apidog ein und verketten Sie sie in Testszenarien. Bestätigen Sie, dass die Tool-Call-Struktur des Agenten mit Ihrer API übereinstimmt, bevor Sie sie End-to-End ausführen.

Token-Verbrauch verfolgen. Claude Opus 4.7 verwendet einen neuen Tokenizer, der bis zu 35 % mehr Tokens produziert als Opus 4.6. Eine Videokomposition mit umfangreichem CSS und 200 Zeilen JavaScript ist nicht klein. Apidogs Nutzungsverfolgung hilft Ihnen, Ihre Prompts richtig zu dimensionieren, bevor die Kosten Sie überraschen.

Multi-Turn-Agenten-Flows debuggen. Ein vollständiges Video-Rendering erfordert oft 5-10 LLM-Runden (Video planen, Szenen entwerfen, Timing überarbeiten, Animationen korrigieren, finalisieren). Apidog ermöglicht es Ihnen, die genaue Konversation wiederzugeben, um herauszufinden, wo der Agent vom Kurs abgekommen ist.

button

Das philosophische Argument

HeyGens Team vertritt eine stärkere Behauptung als „HTML ist ein praktisches Format für von Agenten generierte Videos.“ Sie glauben, dass HTML das richtige Format für die Zukunft des Videos ist, Punkt.

Die Argumentation hält stand. Traditionelle Videos sind in proprietären Formaten gefangen, die von Adobe, Blackmagic und einer Handvoll Codec-Anbietern kontrolliert werden. HTML ist offen, standardisiert, versionierbar, durchsuchbar und mit jedem Textwerkzeug der Welt bearbeitbar.

Wenn HTML-basiertes Video zum Austauschformat wird, werden Videos:

Nichts davon ist theoretisch. Jede dieser Eigenschaften funktioniert bereits im Browser. HyperFrames ist die Brücke, die browser-native Inhalte zu einer brauchbaren Videoquelle macht.

Einschränkungen, die man kennen sollte

HyperFrames ist Version 1. Ein paar echte Einschränkungen:

Keine davon sind Ausschlusskriterien, aber planen Sie sie ein, wenn Sie eine Produktionspipeline aufbauen.

Checkliste für den Einstieg

Wenn Sie HyperFrames jetzt ausprobieren möchten:

Fazit

KI-Agenten können seit Jahren Code schreiben. Bisher war die Videobearbeitung der letzte große kreative Bereich, in dem sie einen Menschen in der Schleife benötigten. HyperFrames beseitigt diese Abhängigkeit, indem es Agenten dort begegnet, wo sie bereits arbeiten: HTML, CSS und JavaScript.

Der Ansatz ist einfach genug, um ihn in einem Satz zu beschreiben, und flexibel genug, um Bewegungsgrafiken in Broadcast-Qualität zu produzieren. Wenn Sie etwas entwickeln, das Videos als Ausgabe benötigt (Marketing-Automatisierung, personalisierte Inhalte, Daten-Storytelling, agentengesteuerte Dokumentation), gehört HyperFrames in Ihren Stack.

Für die API- und Orchestrierungsschicht, die darum herumliegt, testen Sie die Konversationen, Tool-Aufrufe und LLM-Anfragen Ihres Agenten mit Apidog, bevor Sie skalieren. Fehlgeschlagene API-Anfragen werden nicht zu MP4 gerendert.

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload