Ein Video schneiden, indem man eine Webseite schreibt: HyperFrames und der Videoschnitt im Zeitalter der KI-Agenten

Ein Video schneiden heisst normalerweise: ein Programm oeffnen, Aufnahmen auf eine Zeitleiste ziehen, Titel von Hand setzen und exportieren. HyperFrames geht einen anderen Weg: Das Video ist eine Webseite. Man beschreibt, was man moechte, ein KI-Agent schreibt die Seite, und das Werkzeug macht daraus Bild fuer Bild eine MP4-Datei.

Das ist nicht einfach ein weiteres Gadget. Es ist ein Methodenwechsel, der alle betrifft, die regelmaessig kurze Videos produzieren: Tutorials, Praesentationen, Trailer, Clips fuer soziale Netzwerke.

Was ist HyperFrames?

HyperFrames ist ein Open-Source-Werkzeug von HeyGen, einem Unternehmen fuer KI-generierte Videos. Es erschien im Fruehjahr 2026 unter der Apache-2.0-Lizenz: frei nutzbar, auch kommerziell, ohne Konto, ohne API-Schluessel und ohne Pflicht, einen Onlinedienst zu verwenden.

Das Prinzip passt in einen Satz: HTML ist die Quelle des Videos. Alles, was ein Browser anzeigen kann (Text, Bilder, Videos, Diagramme, Animationen), kann zu einer gefilmten Sequenz werden.

Punkt	Kurz gesagt
Herausgeber	HeyGen, Community-Projekt auf GitHub
Lizenz	Apache 2.0 (frei, kommerzielle Nutzung erlaubt)
Voraussetzungen	Node.js 22 oder neuer, FFmpeg
Ausgabe	MP4 oder WebM mit transparentem Hintergrund
Reife	Version 0.x: jung, sehr haeufige Updates

Wie aus einer Webseite ein Video wird

Ein HyperFrames-Video ist ein Projektordner mit einer Datei index.html im Mittelpunkt, der Komposition. Jedes Element auf dem Bildschirm traegt drei Angaben:

• wann es beginnt (data-start, in Sekunden);
• wie lange es dauert (data-duration);
• auf welcher Spur es liegt (data-track-index), wie die Spuren eines Schnittprogramms.

Bewegungen (ein gleitender Titel, eine wachsende Zahl, eine Ueberblendung) werden mit einer Web-Animationsbibliothek geschrieben, meist GSAP. Lottie, Three.js und CSS-Animationen werden ebenfalls unterstuetzt.

<h1 id="titel" data-start="0" data-duration="4" data-track-index="1">
  Willkommen in der Musikschule
</h1>
<audio id="stimme" data-start="0" data-track-index="2" src="sprecher.wav"></audio>

Entscheidend ist das Rendern. HyperFrames filmt die Seite nicht, waehrend sie laeuft. Es oeffnet einen unsichtbaren Chrome-Browser, springt zu Bild 1, fotografiert es, springt zu Bild 2 und so weiter. FFmpeg, das Standardwerkzeug fuer Video, setzt danach Bilder und Ton zusammen.

Das Ergebnis ist deterministisch. Ein langsamer Computer braucht laenger, ueberspringt aber kein einziges Bild. Zwei Renderings desselben Projekts ergeben dasselbe Video.

Das HyperFrames-Studio mit einem echten Projekt: links die Datei index.html der Komposition, in der Mitte die Videovorschau bei 00:24.

Der Ablauf in fuenf Befehlen

Alles wird ueber die Kommandozeile gesteuert, mit npx hyperframes:

Schritt	Befehl	Was er tut
Anlegen	init mein-projekt	Bereitet den Ordner vor, kopiert die Medien, installiert Anweisungen fuer den KI-Agenten
Pruefen	lint	Findet Strukturfehler: ueberlappende Spuren, nicht angemeldete Animationen
Kontrollieren	inspect	Geht das Video durch und meldet Text, der aus einem Rahmen oder vom Bildschirm laeuft
Vorschau	preview	Oeffnet ein Studio im Browser, das bei jeder Aenderung neu laedt
Erzeugen	render	Baut das fertige MP4, als Entwurf oder in hoher Qualitaet

inspect verdient einen genaueren Blick. Der Befehl tut, was ein Cutter mit dem Auge tut: pruefen, dass kein Titel den Rahmen verlaesst und keine Beschriftung abgeschnitten wird. Hier geschieht das automatisch und mit Zeitstempel, und der KI-Agent kann den Bericht lesen und selbst korrigieren.

Im Studio finden sich die Orientierungspunkte eines Schnittprogramms: die Vorschau, die Einstellungen des ausgewaehlten Elements (hier Foto P07) und unten die Zeitleiste mit einer Spur pro Zeile.

Sprecherstimme, Untertitel und Freistellen eingebaut

HyperFrames bringt drei Werkzeuge mit, die das Hin und Her zwischen Programmen ersparen, und alle laufen auf dem eigenen Computer:

• Sprecherstimme (tts): Sprachsynthese mit dem Modell Kokoro, ohne Abonnement. Die Stimmenauswahl ist auf Englisch gross, auf Franzoesisch sehr begrenzt, und eine deutsche Stimme bietet Kokoro derzeit nicht. Fuer eine natuerliche deutsche oder franzoesische Stimme bleibt ein Dienst wie ElevenLabs die bessere Wahl; dessen Audiodatei laesst sich problemlos einbinden.
• Untertitel (transcribe): Transkription mit Whisper, Wort fuer Wort und mit Zeitstempel. Untertitel erscheinen genau dann, wenn die Woerter gesprochen werden, auch im Karaoke-Stil.
• Freistellen (remove-background): entfernt den Hintergrund eines Videos oder Fotos, damit eine Person ueber einer Kulisse schweben kann.

Dazu kommt ein Katalog fertiger Bausteine: Uebergaenge, Titelbalken, animierte Diagramme, Karten und Einblendungen fuer soziale Netzwerke.

Warum es fuer KI-Agenten gemacht ist

Ein Schnittprogramm bedient man mit der Maus. Eine HTML-Seite schreibt man. Und HTML schreiben ist genau das, was Programmierassistenten am besten koennen.

HyperFrames setzt darauf: Es liefert fertig installierbare Anweisungen fuer Claude Code, Codex, Cursor und Gemini CLI. Der Agent lernt die Regeln der Komposition (Spuren, Dauern, Animationen, Pflicht-Uebergaenge zwischen Szenen) und erledigt dann selbststaendig Schreiben, Pruefen, Korrigieren und Rendern.

Die Arbeitsteilung aendert sich:

Der KI-Agent	Sie
Schreibt Komposition und Animationen	Sagen, was das Video erzaehlen soll und fuer wen
Stimmt den Text auf die Sprecherstimme ab	Liefern das Erscheinungsbild: Farben, Schriften, Logo
Prueft Ueberlaeufe und Kontraste	Schauen die Vorschau an und bitten um Aenderungen
Erstellt Fassungen in 16:9, 9:16 oder quadratisch	Geben die Endfassung frei

Und weil das Projekt ein Ordner mit Textdateien bleibt, ist eine Aenderung einfach: “den Titel eine Sekunde laenger zeigen”, “den Balken blau machen”. Der Agent aendert zwei Zeilen, das Rendern laeuft erneut.

Ein echtes Beispiel: drei Minuten Gletscher

Fuer diesen Artikel haben wir einen mit HyperFrames erstellten Film aus den Fotos und Videos einer Gletscherwanderung verwendet. Keine Zeitleiste wurde mit der Maus bearbeitet. Die Regeln wurden dem KI-Agenten in einem Satz gegeben:

Jedes Foto bleibt 4 Sekunden, jedes Video hoechstens 10 Sekunden ab der zweiten Sekunde, jeder Wechsel ist eine einsekuendige Ueberblendung, Fotos und Videos wechseln sich ab, und der Film endet mit der Musik.

Der Agent schrieb ein kleines Skript, das die Fotos vorbereitet und die Komposition erzeugt. Das Ergebnis:

Element	Anzahl
Dauer	3 Min. 27 s
Fotos, jeweils mit einer sanften Kamerabewegung	36
Videoausschnitte	15
Musikspur, mit Abblende am Ende	1

Hochformatfotos liegen auf einem unscharfen Hintergrund aus demselben Bild, damit keine schwarzen Balken entstehen. Eine Regel zu aendern, etwa 5 Sekunden pro Foto, heisst eine Zeile im Skript anzupassen und neu zu rendern.

Ein Bild aus dem fertigen MP4, mitten in einer Ueberblendung: Die beiden Gletscheransichten liegen eine Sekunde lang uebereinander.

HyperFrames, Remotion oder ein Schnittprogramm?

HyperFrames ist nicht das erste Werkzeug, das Video mit Code erzeugt. Remotion tut das seit einigen Jahren mit React-Komponenten.

	HyperFrames	Remotion	Schnittprogramm
Erstellung	HTML, CSS, JavaScript	React-Komponenten	Maus, Zeitleiste
Build-Schritt	Keiner	Ja (Bundler)	Entfaellt
Lizenz	Apache 2.0, frei	Kostenlos bis 3 Personen, fuer groessere Unternehmen kostenpflichtig	Unterschiedlich
Steuerung durch eine KI	Dafuer gebaut	Moeglich	Schwierig
Lange Aufnahmen, feine Farbkorrektur	Wenig geeignet	Wenig geeignet	Dafuer gemacht

Beide Code-Werkzeuge nutzen denselben Motor (Chrome und FFmpeg). Der Unterschied liegt in der Einfachheit: Eine HTML-Datei laesst sich ohne React-Werkzeuge lesen und aendern. Fuer eine kleine Organisation zaehlt auch die Lizenz.

Was es gut kann und was es nicht ersetzt

Wo HyperFrames glaenzt:

• Serien mit festem Erscheinungsbild: die Module eines Kurses, ein woechentlicher Termin, eine Kolumne;
• Erklaervideos: animierte Schemata, Zahlen, Schritte, kommentierte Bildschirmfotos;
• datenbasierte Videos: ein Saisonrueckblick, Ergebnisse, eine Karte;
• Varianten: dasselbe Video fuer YouTube, fuer Instagram im Hochformat und fuer die Startseite einer Website;
• Einblendungen: Titel, Untertitel und Balken ueber vorhandenem Material.

Wo es keinen Cutter ersetzt:

• der Schnitt langer gefilmter Aufnahmen, bei dem die besten Takes mit dem Auge ausgewaehlt werden;
• feine Farbkorrektur und Tonarbeit im Studio;
• Dokumentarfilme oder Musikvideos, deren Rhythmus beim Anschauen entsteht, nicht beim Beschreiben.

Worauf man achten sollte

• Ein junges Werkzeug. Die Version 0.x aendert sich fast taeglich. Das zeugt von Lebendigkeit, doch ein Projekt sollte seine Version festschreiben, um Ueberraschungen zu vermeiden.
• Aufwendiges Rendern. Jedes Rendering startet einen oder mehrere Chrome-Browser. Einige Minuten Video in hoher Qualitaet beschaeftigen einen aktuellen Computer eine ganze Weile.
• Schriften mitliefern. Eine Markenschrift, die nicht eingebaut ist, muss dem Projekt hinzugefuegt werden, sonst ersetzt das Werkzeug sie.
• Der menschliche Blick bleibt unverzichtbar. Automatische Pruefungen finden Ueberlaeufe und Kontrastprobleme. Sie sagen nicht, ob das Video klar, korrekt und angenehm anzusehen ist.

Unser Fazit

Fuer die Videos unseres Claude-Code-Kurses sind die Skripte bereits Sequenz fuer Sequenz geschrieben, mit der Sprecherstimme auf der einen und dem Bildschirminhalt auf der anderen Seite. Genau dieses Material erwartet HyperFrames. Ein Schulungsvideo wird so zu einer Datei, die man wie einen Text korrigiert, statt eines Schnittprojekts, das man fuer jeden Tippfehler neu oeffnen muss.

Fuer einen Verein oder ein kleines Unternehmen ist der Nutzen aehnlich: ein Trailer fuer eine Auffuehrung, ein Vorstellungsvideo oder ein Saisonrueckblick, erstellt aus vorhandenen Fotos und Texten, in mehreren Formaten ausgeliefert und mit einem Satz geaendert. Der Videoschnitt ist nicht tot, aber viele Alltagsvideos lassen sich heute schreiben.

Quellen: GitHub-Repository von HyperFrames, offizielle Dokumentation, npm-Paket.