HyperFrames im Praxistest: Videos mit Code statt Zeitleiste

Ein 44 Sekunden langes, auf den Musiktakt geschnittenes Pitch-Video hat mich mit HeyGen HyperFrames rund sieben Minuten Rechenzeit und keinen einzigen Credit gekostet – gerendert wurde lokal, ohne Konto, ohne Abo. HyperFrames ist ein quelloffenes Framework, das HTML in Video verwandelt. Ich habe damit ein komplettes Video gebaut, alle Fehler mitgenommen, die man mitnehmen kann, und schreibe hier auf, was funktioniert hat und was nicht.

Update Oktober 2026: Was seit meinem Test neu ist

Seit meinem Praxistest mit Version 0.8.29 vom 5. September 2026 sind bis zum 7. Oktober 2026 110 weitere Versionen erschienen – aktuell ist 0.8.140. Das kurze Video fasst die wichtigsten Neuerungen zusammen. Gebaut wurde es selbst mit HyperFrames, gesteuert über einen KI-Agenten, lokal gerendert und ohne HeyGen-Credits.

• Desktop-App mit dem Assistenten Framey (v0.8.123/0.8.124, 4. Oktober 2026): Sie beschreiben eine Änderung im Chat, zeichnen aufs Bild oder setzen einen Kommentar – Framey baut das Video um. Gestartet wird ein Projekt mit npx hyperframes open, die App gibt es für Mac und Linux.
• Studio wird zum Editor: Clips ziehen, trimmen und teilen, Lautstärke und Fades direkt in der Timeline. Jede Änderung landet in einer Projekt-History, die sich rückgängig machen und wiederherstellen lässt (ab v0.8.74).
• Echter Motion Blur: Bewegungsunschärfe nach dem Vorbild von After Effects (v0.8.45), seit v0.8.140 auch über Video.
• Ton und Sprache: Transkription direkt in der Desktop-App (v0.8.139), Whisper erkennt die Sprache automatisch (v0.8.137), HeyGen-Stimmen lassen sich klonen (v0.8.124).
• Außerdem: Speed-Ramps (v0.8.51), GPU-Shader-Effekte (v0.8.64) und Voice-Ducking, das Musik unter Sprache automatisch absenkt (v0.8.108).

Was HyperFrames ist – und was daran anders ist

Die Kurzbeschreibung im GitHub-Repository besteht aus fünf Wörtern: „Write HTML. Render video. Built for agents." Genau das ist es. Eine HyperFrames-Komposition ist eine gewöhnliche HTML-Datei. Layout kommt aus CSS, Bewegung aus JavaScript, und das Timing steht in data-Attributen: Ein äußeres Element trägt data-composition-id, data-width und data-height, jedes zeitgesteuerte Element bekommt die Klasse clip plus data-start, data-duration und data-track-index. Wer schon einmal eine Landingpage gebaut hat, kann eine HyperFrames-Szene lesen.

Der zweite Unterschied zu einem Schnittprogramm ist wichtiger und weniger offensichtlich: Beim Rendern läuft nichts in Echtzeit. Die Dokumentation formuliert es so: Der Renderer fragt nach Bild 0, dann nach Bild 1, und jede Antwort ist ein einzelnes Standbild. Es gibt keine Bildschirmaufnahme, keinen Abspielkopf, keine Aussetzer, wenn der Rechner gerade beschäftigt ist. Gleiche Eingabe, identisches Ergebnis. Immer. Das klingt technisch, hat aber eine sehr praktische Folge: Ein Video wird zu einem Artefakt, das man wie Code behandeln kann.

• Versionierbar: Die Komposition liegt als Textdatei im Git. Ein Diff zeigt, dass die Kachel um 40 Pixel gewandert ist – nicht ein 800 MB großes Projektfile mit unbekanntem Inhalt.
• Wiederholbar: Derselbe Befehl erzeugt morgen dieselbe Datei. Eine Korrekturschleife heißt „Zeile ändern, neu rendern", nicht „Projekt öffnen, Ebene suchen, hoffentlich nichts verschoben".
• Variantenfähig: Über data-composition-variables und den Schalter --batch erzeugt eine Komposition eine Ausgabedatei pro Datenzeile. 500 Varianten sind ein Rechenlauf, keine 500 Arbeitsstunden.
• Prüfbar: Es gibt einen Linter, eine Browser-Prüfung inklusive WCAG-AA-Kontrastmessung und Snapshots einzelner Bilder als PNG. Ein Video lässt sich damit testen wie eine Website.
• Maschinenschreibbar: Ein Sprachmodell kann HTML. Damit kann es auch ein HyperFrames-Video. Das ist der eigentliche Zweck des Projekts.

Eine Abgrenzung vorweg, weil sie oft verwechselt wird: HyperFrames ist nicht das Avatar-Produkt von HeyGen. Es ist die Kompositionsschicht darunter. Avatare, Stimmen, Musik aus der HeyGen-Bibliothek und Cloud-Rendering lassen sich einbinden, sind aber optional und kostenpflichtig.

Die Faktenlage: Herkunft, Lizenz, Version, Kosten

HyperFrames stammt von HeyGen und wird laut Website gemeinsam mit der Community entwickelt. Das GitHub-Repository wurde am 10. März 2026 angelegt, die erste npm-Version 0.1.0 erschien am 23. März 2026. Zum Zeitpunkt meines Tests aktuell war Version 0.8.29 vom 5. September 2026 (zum Stand Oktober siehe das Update oben). Die Lizenz ist Apache-2.0 – also frei nutzbar, auch kommerziell, ohne Sitzplatzgrenze. Das Repository hat 44.069 Sterne und 4.217 Forks (Stand 5. September 2026).

Interessanter als die Sterne ist das Tempo: 382 Veröffentlichungen in 166 Tagen, im Schnitt gut zwei pro Tag. Ein 1.0-Release gibt es nicht. Das ist beides: ein gutes Zeichen für die Aktivität und ein schlechtes für die Planbarkeit. Wer HyperFrames produktiv einsetzt, sollte die Version pinnen – ich habe das in meinem Projekt getan und würde es wieder tun.

Zu den Kosten ist die Dokumentation ungewöhnlich klar. Wörtlich heißt es im Quickstart: „HyperFrames is free and open-source, and local rendering does not use HeyGen credits." Und an anderer Stelle: Man kann ohne Konto erstellen und rendern. Ein Konto braucht man erst für HeyGen-Stimmen und -Musik, für verwaltetes Cloud-Rendering, für den gehosteten MCP-Connector oder wenn man ein veröffentlichtes Projekt besitzen und später aktualisieren will.

Dazu kommen Fremdkosten, die nichts mit HeyGen zu tun haben: die Kosten des eingesetzten Coding-Agenten, optionale Anbieterschlüssel für Sprachsynthese oder Musik und, beim Eigenbetrieb in der Cloud, die eigene AWS- oder GCP-Rechnung.

Wie ein Projekt aufgebaut ist

Ein HyperFrames-Projekt ist ein Ordner mit gewöhnlichen Webdateien. Ganz oben liegt die index.html als Standard-Renderziel. Daneben steht hyperframes.json mit Registry und Pfaden, geschrieben vom Befehl init. In assets/ liegen Video, Musik und Bilder, in compositions/ verschachtelte Teilkompositionen und Katalogkomponenten. Der Befehl beats legt sein Raster unter beats/ ab, Prüfbilder landen in snapshots/, fertige Videos in renders/.

Vorausgesetzt werden Node.js ab Version 22, FFmpeg samt FFprobe und ein Chrome oder Chromium – entweder das System-Chrome oder ein gebündelter Download über npx hyperframes browser ensure. Docker ist optional und erhöht die Reproduzierbarkeit. Ob die Maschine bereit ist, sagt npx hyperframes doctor: Der Befehl prüft CLI-Version, Node, CPU, RAM, freien Platz, Frame-Cache, FFmpeg, FFprobe, Chrome und Docker. Unter 2 GB freiem Speicher für den Frame-Cache meldet er einen Fehler.

Der wichtigste dieser Befehle ist check. Er führt zuerst den Linter aus, überspringt den Browser bei Lint-Fehlern und läuft danach ein Raster von standardmäßig neun Abtastpunkten durch die Komposition. An jedem Punkt prüft er Konsolenfehler und fehlgeschlagene Netzwerkanfragen, Layoutdefekte wie Überlauf, Abschneiden, gehaltene Überlappungen und Verdeckung, optionale Motion-Assertions – und den WCAG-AA-Kontrast. Kontrastfehler sind harte Fehler und melden gemessenen Wert, Sollwert und einen konformen Ersatzfarbwert gleich mit. Absichtliche Layoutentscheidungen markiert man im HTML mit data-layout-allow-overflow, data-layout-allow-overlap, data-layout-allow-occlusion oder data-layout-ignore. Die älteren Befehle validate, inspect und layout sind abgekündigt, check ersetzt sie.

Beim Rendern lassen sich Format (MP4, WebM, MOV, GIF, PNG-Sequenz), Qualitätsstufe (draft, standard, high), Bildrate von 1 bis 240 und Auflösung bis 4K einstellen. Parallelisiert wird über --workers mit 1 bis 24 Prozessen, von denen jeder eine eigene Chrome-Instanz mit etwa 256 MB ist. Ab 8 GB RAM abwärts schaltet die CLI selbständig in einen Sparmodus.

Mein Praxisbericht: ein 44-Sekunden-Pitch-Video

Der Anlass war ein konkreter: ein Pitch-Video, mit dem sich eine Werbeagentur bei einem Wunschkunden vorstellt. Das Format habe ich zweimal gebaut, einmal für einen Optikhersteller und einmal für einen Getränkehersteller. Die Idee dahinter ist simpel und funktioniert erstaunlich gut: Man hält der Marke ihre eigenen Suchdaten vor – freundlich, mit einem Witz, nie mit Häme – und leitet daraus den Pitch ab. 44 Sekunden, 1080p, hart auf den Musiktakt geschnitten.

Schritt 1: erst die Musik, dann alles andere

Ich habe mit der Musik angefangen, nicht mit dem Bild. Das war die wichtigste Entscheidung des ganzen Projekts. Der Track wurde generiert – instrumental, rund 46 Sekunden, etwa 124 BPM, mit einer Vorgabe, die für den Schnitt entscheidend ist: durchgehende Energie von der ersten bis zur letzten Sekunde, ein harter Percussion-Einsatz ab Sekunde 0, ein Riser um Sekunde 14 in einen Drop, ein letzter Schub ab Sekunde 30 und ein sauberer Schlusshit bei Sekunde 44. Danach habe ich das Energieprofil des Tracks angesehen. Wenn irgendwo ein stilles Loch von mehr als anderthalb Beat-Abständen sitzt, ruiniert es den ganzen Beat-Schnitt – dann lieber einmal neu generieren als hinterher jede Szene einzeln verschieben.

Schritt 2: Beats erkennen lassen

Damit beats überhaupt etwas findet, braucht das Audio-Element in der Komposition id="music", data-timeline-role="music", die Klasse clip und Timing-Attribute. Eine rudimentäre index.html reicht dafür völlig. Der Befehl schreibt dann eine JSON-Datei mit einem Zeitpunkt und einer relativen Lautheit je Beat.

Die Falle steckt in der Interpretation: Der Detektor meldet bei schnellen Tracks gern Achtel, in meinem Fall rund 248 gemeldete Schläge pro Minute. Ein Viertel sind also zwei gemeldete Beats, ein Takt vier Viertel. Bei 124 BPM ergibt das eine Taktlänge von 1,93 Sekunden. Diese 1,93 Sekunden waren danach das Maßraster für alles.

Schritt 3: die Dramaturgie auf die Taktgrenzen legen

Jede Szene startet exakt auf einer Taktgrenze. Nicht ungefähr, sondern exakt – der Unterschied zwischen „ungefähr auf dem Beat" und „auf dem Beat" ist der Unterschied zwischen einem Video, das nach Baukasten aussieht, und einem, das sitzt. Die großen Schnitte habe ich auf die Energiesprünge des Tracks gelegt, die ich vorher im Profil verifiziert hatte: den Lift bei Sekunde 13 bis 15, den großen Push bei Sekunde 29 bis 31. Daraus wurde ein Dreiakter mit 17 Clips auf einer einzigen Spur.

Gestalterisch habe ich die Markenfarben des jeweiligen Kunden für die Slams verwendet, auf einer dunklen Basis mit genau einer Akzentfarbe und einem hellen Papierton. Typografie: eine einzige Schrift in Schnitt 900, riesig. Das Agenturlogo sitzt als dunkler Chip unten links – das ist nicht nur Gestaltung, sondern löst nebenbei sämtliche Kontrastprobleme, weil der Chip immer seinen eigenen dunklen Hintergrund mitbringt.

Schritt 4: prüfen, bevor gerendert wird

Dann npm run check, so lange, bis „Check passed" dasteht. Danach npx hyperframes snapshot auf die Mitten aller Szenen – und, das ist der Teil, den man gern überspringt: das entstandene Contact-Sheet wirklich ansehen. Nicht überfliegen, ansehen. In meinem Lauf sind dabei Dinge aufgefallen, die keine Prüfung meldet, weil sie technisch korrekt sind: ein Wort, das eine Zeile zu tief sitzt, ein Tippfehler in einem Slam, eine Farbkombination, die im Standbild schöner aussieht als in Bewegung. Ein Contact-Sheet mit 17 Standbildern kostet 30 Sekunden Betrachtung und spart einen kompletten zweiten Renderlauf.

Schritt 5: rendern und den Ton abrunden

Gerendert habe ich mit -f 30 -q high -w 4 --no-browser-gpu, also 30 Bilder pro Sekunde, hohe Qualität, vier Arbeitsprozesse. Das dauerte für 44 Sekunden Video rund sieben Minuten. Das ist mein Einzelwert auf meiner Maschine, keine Messreihe – offizielle Benchmarks veröffentlicht HeyGen nicht.

Positiv überrascht hat mich das Audio: Der Ton wird automatisch gemuxt. Es gibt keinen manuellen Schritt, in dem man Bild und Musik zusammenführt; die Render-Pipeline mischt das Audio und schreibt es in den Container, mit AAC bei MP4 und Opus bei WebM. Einzige Ausnahme ist GIF, das keinen Ton kennt. Was HyperFrames nicht macht, ist ein sauberer Ein- und Ausklang der Musik. Den habe ich hinterher mit einem einzigen ffmpeg-Aufruf ergänzt, der die Videospur nur kopiert und lediglich einen kurzen Fade-in von 0,15 Sekunden und einen Fade-out von 1,6 Sekunden auf die Tonspur legt. Das kostet zwei Sekunden Rechenzeit und macht den Unterschied zwischen „bricht ab" und „endet".

Das ist für mich der eigentliche Befund aus dem Projekt: Das Rendern ist nicht der Engpass. Sieben von rund 76 Minuten. Der Aufwand liegt im Schreiben und im Prüfen – und genau dieser Teil wird bei der zweiten Marke deutlich kürzer, weil die Komposition dann ein Template ist, in das andere Zahlen, Farben und Wörter wandern. Wer nur ein einziges Video braucht, hat mit HyperFrames nichts gewonnen. Wer das zwölfte baut, schon.

Sechs Fehler, die mich Stunden gekostet haben

Die folgenden sechs Punkte stehen in keiner Dokumentation. Sie stammen aus einer einzigen Produktionssitzung und haben mich zusammen mehrere Stunden gekostet. Wer sie vorher liest, spart sie sich.

1. GSAP vom CDN laden

Symptom: Die Prüfung mit check läuft nicht durch, sondern stirbt nach langer Wartezeit an einem Timeout. Keine hilfreiche Fehlermeldung, nur Stillstand.
Ursache: Die Animationsbibliothek GSAP wurde per Script-Tag von einem öffentlichen CDN geladen. In meiner abgeschotteten Umgebung war dieses CDN durch die Firewall geblockt. Der Headless-Chrome wartet dann auf eine Datei, die nie kommt – und die Prüfung wartet mit.
Lösung: GSAP lokal installieren und die Datei ins Projekt kopieren, dann per relativem Pfad einbinden. Damit hat das Projekt keine Netzwerkabhängigkeit mehr und rendert auch offline reproduzierbar. Das gilt für jede externe Ressource: Schriften, Icons, Bibliotheken. Alles, was aus dem Netz nachgeladen wird, ist eine potenzielle Fehlerquelle im Render.

2. flash() ohne immediateRender: false

Symptom: Über dem gesamten ersten Akt lag ein milchiger Grauschleier. Nicht als Blitz an einer Stelle, sondern dauerhaft, über gut 13 Sekunden.
Ursache: Der Helfer für den weißen Blitz war als from-Tween gebaut. GSAP rendert die Startwerte eines from-Tweens standardmäßig sofort beim Anlegen der Timeline – also nicht erst, wenn der Blitz an der Reihe ist, sondern ab Bild 0. Das weiße Overlay lag damit von Anfang an über der Szene.
Lösung: Solche Tweens brauchen immediateRender: false. Dann setzt GSAP die Startwerte erst, wenn der Abspielkopf den Tween erreicht. Das ist eine GSAP-Eigenheit, kein HyperFrames-Problem – aber sie fällt hier besonders auf, weil ein deterministischer Renderer den Fehler in jedes einzelne Bild schreibt.

3. Exit-Fades, die an einer Clip-Grenze enden

Symptom: Die Prüfung meldet einen Fehler mit dem Kürzel gsap_exit_missing_hard_kill.
Ursache: Ich hatte Szenen mit einem Ausblenden enden lassen, dessen Ende exakt auf der Clip-Grenze liegt. Der Renderer kann dann nicht sicher entscheiden, ob das Element im letzten Bild noch sichtbar sein soll oder nicht – und weigert sich, das zu raten.
Lösung: Ich habe die Exit-Fades ersatzlos gestrichen. Bei einem beat-geschnittenen Video ist der harte Schnitt ohnehin der bessere Look: Ein Fade auf einer Taktgrenze weicht genau den Moment auf, für den das ganze Timing gebaut wurde. Wo ein Übergang wirklich gebraucht wird, gehört er in die Mitte eines Clips, nicht an dessen Rand.

4. Ein Track-Index doppelt belegt

Symptom: Elemente verschwinden oder überlagern sich, obwohl die Zeiten stimmen. Besonders unangenehm, wenn es die Tonspur trifft.
Ursache: Ich hatte dem Audio-Element und dem Fortschrittsbalken am unteren Rand denselben data-track-index gegeben. Der Index ist aber keine Dekoration, sondern die Spur in der Zeitleiste – zwei Dinge auf derselben Spur im selben Zeitraum sind ein Konflikt.
Lösung: Jeder Track-Index darf pro Zeitraum nur einmal belegt sein. Ich habe von Anfang an eine feste Zuordnung notiert: Spur 0 für den Ton, Spur 1 für die Szenen, eine eigene Spur für dauerhafte Overlays wie Fortschrittsbalken und Wasserzeichen. Diese Liste zu führen kostet zwei Minuten und erspart eine halbe Stunde Suche.

5. Layoutfehler, die gar keine sind

Symptom:check meldet Overflow-Fehler für Elemente, die absichtlich über den Bildrand ragen – große Deko-Typografie, angeschnittene Formen, ein Balken, der aus dem Bild läuft.
Ursache: Der Layout-Audit kennt den gestalterischen Vorsatz nicht. Für ihn ist alles, was über den Rand hinausragt, erst einmal ein Defekt.
Lösung: Solche Elemente bekommen data-layout-allow-overflow. Für Überlappungen und Verdeckungen gibt es die passenden Gegenstücke. Wichtig ist die Disziplin dabei: Diese Attribute sind nur für bewusst getroffene Entscheidungen da. Wer sie großzügig verteilt, um Ruhe zu haben, schaltet genau die Prüfung ab, die einen sonst vor einem unlesbaren Video bewahrt.

6. Der Kontrast-Checker hat recht

Symptom: Der Render startet nicht, weil check WCAG-AA-Kontrastfehler als harte Fehler meldet – bei mir für orangefarbenen Text auf einem hellen Papierton und für das Wasserzeichen auf wechselnden Hintergründen.
Ursache: Markenfarben sind für Logos gemacht, nicht für Fließtext auf hellem Grund. Und ein Wasserzeichen, das über 17 Szenen läuft, hat zwangsläufig irgendwann einen Hintergrund, auf dem es untergeht.
Lösung: Zwei Eingriffe haben gereicht. Erstens ein dunklerer Akzentton für Text auf hellen Flächen – ein tiefes Orangebraun statt des hellen Markenorange. Die Fehlermeldung nennt den konformen Ersatzwert übrigens gleich mit, man muss ihn nur übernehmen. Zweitens das Wasserzeichen nicht als freistehender Text, sondern als dunkler Chip mit eigenem Hintergrund. Ich habe anfangs überlegt, die Prüfung zu übergehen. Im fertigen Video war jede der beiden Korrekturen sichtbar besser.

Wann sich das lohnt – und wann nicht

Nach dem Projekt bin ich in einem Punkt sicherer als vorher: Der Nutzen von HyperFrames beginnt beim zweiten Video, nicht beim ersten. Das erste kostet mehr Zeit als eine Runde im Schnittprogramm. Ab dem zweiten dreht sich das Verhältnis, und ab dem zehnten ist es nicht mehr vergleichbar.

Ein Punkt gehört zur Ehrlichkeit dazu: Das Projekt ist keine sechs Monate alt und hat bei 382 Veröffentlichungen noch kein 1.0-Release. Die Schnittstellen bewegen sich. Für ein Experiment ist das kein Problem, für eine Pipeline, die in zwei Jahren noch laufen soll, ist es ein Risiko, das man mit gepinnten Versionen und einem Docker-Image kleiner macht, aber nicht wegbekommt.

Und eine Ergänzung, die in der Praxis mehr ausmacht als jede Render-Option: Ein programmatisches Video ist nur so gut wie sein Material. Hintergründe, Texturen und Bildmotive erzeuge ich inzwischen fast durchgehend generativ – wie das zuverlässig funktioniert, habe ich im Beitrag zum Thema KI-Bilder erstellen beschrieben.

HyperFrames im Vergleich zu Remotion, After Effects, Canva und Motion Canvas

Der Markt zerfällt in zwei Lager, und der Preis ist dabei zweitrangig. Im programmatischen Lager (HyperFrames, Remotion, Motion Canvas) ist das Video eine Textdatei: Sie liegt im Git, ein Diff ist lesbar, ein Agent kann sie schreiben, und 500 Varianten kosten einen Rechenlauf. Der Preis dieser Freiheit ist, dass jemand oder etwas Code schreiben muss. Im grafischen Lager (After Effects, Canva, CapCut) ist das Video eine Projektdatei in einem Programm: Man sieht sofort, was man tut, und Varianten sind Handarbeit.

Die drei Nullwerte links sind der eigentliche Punkt dieser Grafik: Der programmatische Weg muss sich preislich nicht gegen das grafische Lager behaupten, er tritt gegen null an. Innerhalb des programmatischen Lagers hat HyperFrames drei spezifische Vorteile: die niedrigste Einstiegshürde für ein Sprachmodell, weil jeder Agent HTML kann; eine grafische Oberfläche auf denselben Dateien; und die freizügigste Lizenz. Dagegen steht die Reife. Dass HyperFrames eine eigene Dokumentationsseite für Remotion-Umsteiger führt, sagt einiges darüber, wo sich das Projekt selbst verortet.

Häufige Fragen

Was ist HeyGen HyperFrames?

HyperFrames ist ein quelloffenes Framework von HeyGen, das HTML in Video verwandelt. Man schreibt eine gewöhnliche Webseite mit CSS und JavaScript, gibt den Elementen Zeitangaben über data-Attribute, und ein Kommandozeilenwerkzeug rendert daraus Bild für Bild eine MP4-, WebM-, MOV-, GIF- oder PNG-Sequenz. Es steht unter der Apache-2.0-Lizenz, die erste Version erschien am 23. März 2026. Es ist nicht das Avatar-Produkt von HeyGen, sondern eine eigene Schicht darunter.

Was kostet HyperFrames?

Für lokale Arbeit nichts. Die offizielle Dokumentation formuliert es so: HyperFrames ist frei und quelloffen, und lokales Rendern verbraucht keine HeyGen-Credits. Installieren, bauen, prüfen und rendern funktioniert ohne Konto, auch in 4K und HDR. Credits kosten nur die gehosteten Zusatzdienste: Cloud-Rendering, HeyGen-Stimmen, die HeyGen-Musikbibliothek, Avatar-Clips und der gehostete MCP-Connector.

Wie viele Credits kostet ein Cloud-Render bei HyperFrames?

Das ist öffentlich nicht dokumentiert. Weder die HyperFrames-Dokumentation noch die Entwicklerdokumentation von HeyGen noch eine Preisseite nennt einen Satz pro Sekunde, Frame oder Auftrag. Die einzige veröffentlichte Relation lautet, dass 4K mit dem Faktor 1,5 abgerechnet wird. Den absoluten Satz sieht man nur im eingeloggten HeyGen-Konto. Wer Cloud-Rendering budgetieren will, muss dort nachsehen.

Was brauche ich, um HyperFrames zu benutzen?

Eine Kommandozeile, Node.js ab Version 22, FFmpeg samt FFprobe und Chrome oder Chromium. Docker ist optional und sorgt für besonders reproduzierbare Renderergebnisse. Der Befehl npx hyperframes doctor prüft die Maschine durch und meldet, was fehlt. Für lokale Sprachsynthese und Musikerzeugung kommen optionale Python-Pakete dazu.

Ist HyperFrames eine Alternative zu Remotion?

Ja, es ist der direkteste Wettbewerber. Drei Unterschiede zählen: Remotion wird in React geschrieben, HyperFrames in einfachem HTML mit data-Attributen. Remotion ist frei für Einzelpersonen und Firmen bis drei Personen und ab vier Personen kommerziell lizenzpflichtig, HyperFrames steht unter Apache-2.0 ohne Nutzungsbeschränkung. Remotion gibt es seit 2021 mit gewachsenem Ökosystem, HyperFrames seit März 2026 ohne 1.0-Release.

Wie lange dauert ein Rendering?

Offizielle Benchmarks gibt es nicht. In meinem Projekt hat ein 44 Sekunden langes Video in 1080p bei 30 Bildern pro Sekunde mit vier Arbeitsprozessen rund sieben Minuten gebraucht. Das ist ein Einzelwert und kein Messwert unter kontrollierten Bedingungen. Die Dauer hängt an Bildrate, Auflösung, Qualitätsstufe und daran, wie aufwendig die Komposition im Browser zu zeichnen ist.

Kann HyperFrames Videos auf den Musik-Beat schneiden?

Ja, das ist ein dokumentierter Bestandteil. Der Befehl npx hyperframes beats sucht das Musikelement in der Komposition, analysiert es in einem Headless-Chrome und schreibt ein Beat-Raster als JSON-Datei mit Zeitpunkt und relativer Lautheit je Beat. Auf diese Zeitpunkte legt man dann die Startzeiten der Szenen. Der Detektor meldet in schnellen Tracks häufig Achtel statt Viertel, das muss man beim Umrechnen auf Taktgrenzen berücksichtigen.