HyperFrames einrichten: vom Satz zum Video

Was ist HyperFrames, und wofür brauche ich es?

Video-Schnitt ist Handarbeit. Du ziehst Clips auf eine Zeitleiste, setzt Text, verschiebst ihn um zwei Bilder, exportierst, siehst den Fehler und fängst von vorn an. Für ein einzelnes Video geht das. Für drei Stück jede Woche geht es nicht.

HyperFrames dreht die Sache um. Das Projekt beschreibt sich auf GitHub in drei Sätzen: „Write HTML. Render video. Built for agents.“ (heygen-com/hyperframes auf GitHub). Es steht unter der Apache-2.0-Lizenz und hatte am 26.09.2026 genau 53.185 Sterne. Ändern heißt damit: einen Satz im Text ändern und neu rendern, nicht eine Spur suchen und Regler schieben.

Technisch spult HyperFrames jedes Einzelbild in einem unsichtbaren Chrome-Browser an und lässt am Ende FFmpeg daraus die Videodatei rechnen. Die deutsche Wikipedia beschreibt FFmpeg als „ein freies Multimedia-Softwareprojekt“, dessen Programme Video- und Audiomaterial unter anderem konvertieren und in Containerformate verpacken. Weil jedes Bild einzeln angefahren wird, ist ein Bild an Sekunde 3,2 morgen dasselbe Bild an Sekunde 3,2.

Wir arbeiten selbst damit. Die Zahlen und Checklisten, die in unseren Reels als Einblendung laufen, sind so gebaut.

Was kann HyperFrames nicht?

Drei Grenzen, damit du nicht das falsche Werkzeug einrichtest:

• ·Es erfindet keine Bilder. HyperFrames ist kein Video-Modell wie Kling oder Seedance. Wer eine gefilmte Szene oder einen sprechenden Avatar braucht, nimmt ein Bild- oder Video-Modell, so wie in KI-Avatar in 10 Minuten. HyperFrames setzt zusammen, was du hast, und animiert es.
• ·Es ersetzt kein Schnittprogramm für lange Formate. Ein Interview über zwanzig Minuten schneidest du weiter in deinem Programm. Stark ist HyperFrames bei kurzen Stücken mit Text, Zahlen, Listen, Logos, Einblendungen und Übergängen.
• ·Es denkt sich deinen Inhalt nicht aus. Du sagst, was drinsteht. Wer nur „mach was Schönes“ sagt, bekommt etwas Beliebiges.

Was muss vorher auf meinem Rechner installiert sein?

Drei Dinge, jedes mit einem Befehl im Terminal geprüft:

1. 1.Node.js ab Version 22. Befehl: node --version. Die Kommandozeile von HyperFrames verlangt diese Version ausdrücklich, die Projektseite nennt als Voraussetzung „Node.js 22+, FFmpeg“.
2. 2.FFmpeg. Befehl: ffmpeg -version. Das ist das Programm, das die Einzelbilder zur MP4-Datei zusammenrechnet. Auf dem Mac installierst du es über Homebrew.
3. 3.Ein KI-Editor, der Skills lesen kann. Die Projektseite nennt unter anderem Claude Code, Codex, Cursor und Gemini CLI. Wir arbeiten in Claude Code. Welcher Editor zu deiner Arbeitsweise passt, steht in Codex oder Claude Code.

Wie richte ich HyperFrames in drei Schritten ein?

Schritt 1 · Die Anleitungen holen. Der Befehl npx skills add heygen-com/hyperframes lädt die Skills, also die Anleitungen, die dein Editor liest, bevor er anfängt. Im Auswahlfenster ist nichts vorausgewählt. Nimm die Gruppe „Core Skills“, der Rest kommt bei Bedarf dazu. Veröffentlicht sind 21 Stück. Dass so viele Anleitungen deinen Editor nicht verstopfen, liegt an der Bauart von Skills. Laut der deutschen Claude-Code-Dokumentation wird „der Text eines Skills nur geladen, wenn er verwendet wird, sodass umfangreiches Referenzmaterial fast nichts kostet, bis Sie es benötigen“ (Claude Code Docs, Skills).

Schritt 2 · Ein Projekt anlegen. npx hyperframes init mein-projekt legt einen Ordner mit einer leeren Komposition an. Das Projekt merkt sich seine Version, damit ein Render in vier Wochen genauso aussieht wie heute.

Schritt 3 · Den ersten Clip beschreiben. Sag deinem Editor in normalen Worten, was du willst. Zum Beispiel: „Mit HyperFrames eine fünf Sekunden lange Karte bauen, dunkler Grund, eine Zahl zählt von null auf 292 hoch, daneben das Wort Skills, unten ein dünner goldener Strich.“ Der Editor schreibt die Seite, prüft sie und zeigt dir das Ergebnis. Du liest den Text, nicht den Code.

Welche vier Befehle bringen mich zum ersten Clip?

Immer in dieser Reihenfolge:

npx hyperframes lint      # Form prüfen, dauert Sekunden
npx hyperframes check     # Layout, Kontrast, Bewegung im Browser prüfen
npx hyperframes preview   # ansehen, bevor gerendert wird
npx hyperframes render --quality draft --output test.mp4

draft ist zum Ausprobieren. Sitzt der Clip, nimmst du looks für den ersten echten Export. Das ist zugleich die Stufe, die HyperFrames nimmt, wenn du gar nichts angibst. Bei uns hat eine elf Sekunden lange Grafik in der Stufe draft 6,1 Sekunden zum Rendern gebraucht.

Das ist der Punkt, an dem sich die Arbeitsweise ändert. Kostet ein Versuch sechs Sekunden, probierst du drei Fassungen aus. Kostet er zehn Minuten, nimmst du die erste.

Welche fünf Fallen kosten beim Bauen am meisten Zeit?

1. 1.Was bei Sekunde null beginnt, fehlt im Cover. Jedes Element blendet über eine Fünftelsekunde von unsichtbar nach sichtbar. Startet es bei null, ist es im allerersten Bild noch durchsichtig, und genau dieses Bild nimmt Instagram als Vorschau. Elemente, die ab Bild null stehen sollen, blenden nicht ein, sondern nur aus.
2. 2.Text läuft über den Rand. Ein langes Wort passt nicht in die Zeile und wird an beiden Rändern abgeschnitten. check meldet es als canvas_overflow. Nimm die Meldung ernst, auch wenn sie nur als Hinweis kommt.
3. 3.Zeiten werden geraten statt gemessen. Wer eine Einblendung auf „ungefähr Sekunde vier“ setzt, liegt eine halbe Sekunde daneben, und das sieht jeder. Wir ziehen die Zeiten aus dem Transkript der fertigen Tonspur.
4. 4.Zufall im Code. Keine Uhr, kein Zufallsgenerator ohne festen Startwert, keine Endlosschleife. Sonst sieht der zweite Render anders aus als der erste.
5. 5.Eine Schrift, die nur auf deinem Rechner liegt. Wer eine Schrift beim Namen nennt, ohne die Datei mitzuliefern, bekommt beim Rendern still eine Ersatzschrift. Das Layout verrutscht, und niemand sagt etwas. Die Schriftdatei gehört ins Projekt und ins CSS.

Wie kommt die Grafik in mein Reel?

Ein gerenderter Clip ist eine gewöhnliche MP4-Datei. Damit hast du drei Wege:

• ·Als Vollbild dazwischen. Der einfachste Weg. Die Grafik läuft ein paar Sekunden allein, danach geht es mit deinem Gesicht weiter. Nachteil: Du bist in dieser Zeit nicht zu sehen.
• ·Als geteiltes Bild. Deine Aufnahme oben, die Grafik unten. So machen wir es, weil das Gesicht sichtbar bleibt, solange gesprochen wird. Dafür renderst du nicht in 9:16, sondern in der Größe der unteren Hälfte, bei uns 1080 auf 960 Pixel.
• ·Als Ecke. Klein oben rechts, für ein Logo oder eine kurze Zahl. Stört wenig, trägt wenig.

In allen drei Fällen braucht die Grafik eine eigene Fläche mit eigenem dunklem Grund. Eine bewegte Karte als halbdurchsichtige Auflage über dem Gesicht liest sich schlecht, weil Bewegung auf Bewegung trifft.

Brauche ich HTML-Kenntnisse für HyperFrames?

Nein. Du schreibst denselben Satz, den du einem Cutter sagen würdest. Lernen musst du etwas anderes: sagen, was du willst, und das Ergebnis beurteilen. Das ist dieselbe Fähigkeit, die du bei einem Dienstleister brauchst, nur dauert die Runde hier sechs Sekunden statt zwei Tage. Wie weit du mit einem KI-Editor ohne Programmierkenntnisse kommst, zeigt Website mit Claude Code erstellen an einer kompletten Landingpage.

Der zweite Einwand lautet: „Dann sieht alles gleich aus.“ Das Gegenteil stimmt. Weil eine Fassung so billig ist, baust du drei und behältst die beste. Teuer wird Gleichförmigkeit immer dort, wo ein Versuch weh tut.

Im PDF liegt dieselbe Anleitung als Blatt zum Abarbeiten: die drei Prüfungen vorab, die Einrichtung in drei Schritten, die vier Befehle, die fünf Fallen und die drei Wege ins Video, dazu der HyperFrames-Zettel zum Ausfüllen. Darauf stehen Felder für Node-Version, FFmpeg und Editor, für Name, Inhalt, Länge und Format deines ersten Projekts, die vier Befehle zum Abhaken und deine Auswertung nach dem ersten Render bis hin zur Zeit vom Satz bis zur fertigen Datei. Sechs Seiten, gebrandet und druckfertig, unten über das Formular.