AI-Videoerstellung mit Hyperframes und Claude Code

AI-Videoerstellung mit Hyperframes und Claude Code

Als der Putz fertig war, heizte der Kessel noch auf.

Ich hatte ungefähr zwei Absätze der Beschreibung in Claude Code eingegeben – ein filmisches Intro, ein dunkelblauer Hintergrund, mein Logo, das sich über einen langsamen Farbverlauf von Lila zu Cyan einfügt, ein Slogan, der in sanftem Leuchten eingeblendet wird, das Ganze in weniger als drei Sekunden. Ich drückte die Eingabetaste, ging in die Küche, füllte den Wasserkocher, klickte darauf, und als ich nach einer Tasse griff, hatte der Agent bereits die HTML-Komposition geschrieben, das Rendern in die Warteschlange gestellt und eine fertige MP4-Datei in meinen Projektordner gelegt. Keine Zeitleiste. Keine Keyframes. Keine After Effects. Nein Figma. Keine Premiere. Kein Final Cut.

Das ist keine Marketinglinie. Das ist tatsächlich an einem Dienstagabend Anfang Mai passiert, und das ist der Grund, warum ich mit dem Scrollen aufgehört und mit dem Schreiben dieses Beitrags begonnen habe.

Der Aufbau, der dies ermöglichte, besteht aus zwei Teilen. Hyperframes ist das Open-Source-Rendering-Framework, das HeyGen am 17. April 2026 veröffentlicht hat. Claude Code ist der Agent, der sich damit verbindet, Ihre Absicht liest und den Code schreibt. Zusammen fassen sie zusammen, was früher eine ganztägige Pipeline mit fünf Tools war, in einer einzigen Texteingabeaufforderung und einer Renderwarteschlange. Motion Graphics lernt man nicht. Sie beschreiben die gewünschten Bewegungsgrafiken.

Das ist die Schlagzeile. Was jeder vermisst – und was ich Ihnen hier zeigen möchte – ist der Teil darunter. Warum diese Kombination funktioniert, wenn andere „Prompt to Video“-Tools zwei Jahre lang stillschweigend enttäuschend waren. Was Sie tatsächlich installieren müssen. Die genauen Eingabeaufforderungsmuster, die einen brauchbaren ersten Entwurf erzeugen. Die Stellen, an denen der Arbeitsablauf immer noch unterbrochen wird, wenn Sie ihn zu sehr anstrengen. Und für die spezifischen Arten von Videoarbeiten ist dies jetzt wirklich das schnellste Tool der Welt.

Wenn Sie einen Ersteller-Workflow, einen Entwickler-Workflow oder eine Marketing-Pipeline haben oder ein Gründer sind, der die Veröffentlichung von Videos immer wieder aufschiebt, weil die Produktionskosten wie eine 40-Stunden-Wand in Ihrem Kopf hängen, ist dies der Beitrag, der Sie dazu bringen sollte, Ihren Plan für das Wochenende zu ändern.

Warum diese Kombination endlich funktioniert

Prompt-to-Video ist seit etwa 2023 der heilige Gral der AI-Tools, und die meiste Zeit dieser Zeit erzeugten die Tools entweder verrauschtes, traumhaftes Filmmaterial oder erforderten so viel manuelle Bereinigung, dass sie keine Zeit mehr sparten. Die überlebenden Tools – Remotion, Motion Canvas, einige proprietäre Cloud-Renderer – erforderten echte Programmierung. Die Tools, die „keinen Code“ versprachen, produzierten Ergebnisse, die Sie nicht an einen zahlenden Kunden versenden konnten.

Hyperframes ist das erste, das ich verwendet habe und das sich in keiner Hinsicht wie ein Kompromiss anfühlt. Der Grund ist struktureller Natur, und wenn man ihn einmal gesehen hat, kann man ihn nicht mehr übersehen.

LLMs sind außerordentlich gut im Schreiben von HTML, CSS und JavaScript. Das ist der vorherrschende Inhaltstyp, für den sie geschult wurden. Es gibt mehr Webcode im öffentlichen Internet als von jedem Video-Framework, jeder Motion-Graphics-Bibliothek und jeder Bearbeitungssoftware zusammen. Wenn Sie ein Modell bitten, „mir ein filmisches Intro mit einem dunklen Farbverlauf und einem leuchtenden Logo zu erstellen“, hat es in seinen Trainingsdaten zehn Millionen Versionen ähnlicher Layouts gesehen. Es kann in Sekundenschnelle eins erstellen. Der Flaschenhals war nie das Modell. Der Engpass war das Ausgabeziel – die Konvertierung dieser web-fluessigen Argumentation in etwas, das zu einer echten, deterministischen Videodatei wird.

Das ist es, was Hyperframes löst. In den eigenen Worten des Teams heißt es: „HTML schreiben. Video rendern. Für Agenten entwickelt.“ Sie schreiben – oder Ihr Agent schreibt – eine einfache HTML-Komposition mit den Attributen data-start und data-duration für jedes Element. Animationen stammen aus jeder suchbaren Laufzeit: GSAP, Lottie, CSS-Übergänge, Anime.js, die Webanimationen API, Three.js. Die Hyperframes-Engine verwendet Puppeteer, um einen Headless-Browser zu steuern, erfasst jeden Frame deterministisch und fügt sie mit FFmpeg in eine MP4-, MOV- oder WebM-Datei ein. Das Framework ist Open Source unter Apache 2.0 ohne Gebühren pro Rendering, ohne Sitzplatzbeschränkungen und ohne kommerzielle Einschränkungen.

Der Ausdruck „deterministische Frame-Erfassung“ wird von den meisten Menschen übersehen und ist das wichtigste Wort im gesamten Pitch. Das bedeutet, dass jedes Rendering derselben Komposition eine pixelidentische Datei erzeugt. Das ist der Unterschied zwischen einem cleveren Spielzeug und einem Werkzeug, mit dem Sie die Arbeit Ihrer Kunden erleichtern können. Generative Videomodelle halluzinieren. Hyperframes nicht. Die Zusammensetzung ist Code. Der Rendering ist reproduzierbar. Die Ausgabe gehört Ihnen.

Claude Code ist die zweite Hälfte, warum dies funktioniert. Ohne einen Agenten, der Ihre Absicht lesen und die Komposition für Sie schreiben kann, ist Hyperframes immer noch ein Entwicklertool. Mit Claude Code davor wird die Oberfläche zur natürlichen Sprache. Du beschreibst das Video. Der Agent schreibt den HTML-Code, das CSS, die GSAP-Timeline und das Timing. Sie sehen eine Vorschau, Sie optimieren, Sie rendern. Der Agent kümmert sich um die Teile, für die Sie drei Stunden in einem Code-Editor aufgewendet hätten.

Das ist die Architektur, die ich in den nächsten zehn Minuten auf Ihrem Rechner installieren möchte.

Was Sie tatsächlich installieren müssen

Zwei Teile der Systemsoftware, dann das Framework. Das ist die ganze Liste.

Node.js. Hyperframes ist ein Node-Projekt. Ab Mai 2026 befindet sich Knoten 24 im aktiven LTS (veröffentlicht am 06.05.2025, Codename „Krypton“) und wird im Oktober 2026 in den Wartungs-LTS verschoben. Knoten 22 („Jod“) befindet sich bis April 2027 im Wartungs-LTS. Beides ist für Hyperframes in Ordnung, und wenn Sie heute neu einrichten, würde ich mich für 24 entscheiden. Knoten 26 wurde erst am 5. Mai ausgeliefert. 2026, aber es ist die aktuelle Version, nicht LTS – überspringen Sie sie für Produktionsarbeiten bis Oktober, wenn sie beworben wird. Sie können Ihre Installation mit node --version überprüfen und über nvm aktualisieren, falls Sie es haben, oder direkt von nodejs.org herunterladen.

FFmpeg. Dies ist das Rendering-Rückgrat. Hyperframes verwendet es, um die aufgenommenen Bilder zu einer Videodatei zusammenzusetzen. Die aktuellste stabile Version vom 5. Mai 2026 ist 6.1.5 (der 6.1-LTS-Zweig) oder 5.1.9 (5.1-LTS-Zweig – unterstützt bis 2027). Unter macOS ist brew install ffmpeg der Weg des geringsten Widerstands. Unter Linux hat es Ihr Paketmanager. Unter Windows ist der offizielle Build von ffmpeg.org/download.html der sicherste Weg. Überprüfen Sie mit ffmpeg -version. Wenn der Befehl nichts zurückgibt, funktioniert der Rest dieser Anleitung nicht – beheben Sie das Problem zuerst.

Das ist die Systemsoftware. Jetzt der Rahmen.

Der intelligenteste Installationspfad, den ich jetzt auf jeder neuen Maschine verwende, besteht darin, Claude Code den GitHub-Repository-Link direkt zu übergeben und die Umgebung einrichten zu lassen. Öffnen Sie Claude Code in einem neuen Verzeichnis, fügen Sie https://github.com/heygen-com/Hyperframes ein und fragen Sie: * „Richten Sie Hyperframes in diesem Verzeichnis ein und registrieren Sie die relevanten Fähigkeiten in meiner Claude Code-Sitzung.“* Der Agent liest die README-Datei, führt npx Hyperframes init aus und registriert die Fähigkeiten automatisch. Dies ist der Installationspfad, den ich jedem empfehle, der Hyperframes noch nicht verwendet hat, da der Agent die neuesten Setup-Anweisungen aus dem Repo selbst liest, was bedeutet, dass er mit wichtigen Änderungen, die Sie sonst manuell nachverfolgen müssten, auf dem neuesten Stand bleibt.

Der manuelle Pfad besteht, wenn Sie ihn bevorzugen, aus einem Befehl:

npx skills add heygen-com/Hyperframes

Dadurch wird eine Reihe von Schrägstrichbefehlen in Ihrer Claude Code-Sitzung registriert: /Hyperframes zum Erstellen von Kompositionen, /Hyperframes-cli für die Dev-Loop-Befehle wie init, Hilfe. Je nachdem, für welche Adapter Sie sich entscheiden, werden möglicherweise auch /animejs, /css-animations, /lottie, /three, /waapi und /tailwind angezeigt. Bei jeder davon handelt es sich um eine Claude Code-Fähigkeit, die dem Agenten beibringt, wie er die richtigen Kompositionen für die jeweilige Animationslaufzeit schreibt.

Wenn Sie meine Aufschlüsselung von warum Claude Code-Kenntnisse der eigentliche Hebelpunkt sind gelesen haben, ist dies die produktionsqualitätsfähige Version dieses Arguments, angewendet auf Bewegungsgrafiken – die Fähigkeit ist Ihr komprimiertes Urteilsvermögen, kodiert als aufrufbarer Befehl.

Erstellen Sie einen eigenen Projektordner, bevor Sie beginnen. Hyperframes erzeugen eine kleine, aber echte Verzeichnisstruktur – compositions/, assets/, Renderausgaben, ein paar Konfigurationsdateien. Das Einmischen in ein bestehendes Projektverzeichnis ist technisch möglich und sorgt praktisch drei Wochen später für Verwirrung, wenn Sie sich nicht mehr erinnern können, welcher Ordner welches Video produziert hat. Ich behalte einen übergeordneten Ordner namens videos/ mit einem Unterordner pro Projekt. Langweilig, zuverlässig, leicht zu verstehen.

Sobald Node, FFmpeg und Hyperframes installiert sind, haben Sie alles. Der Rest sind Aufforderungen.

Das erste Rendering: ein filmisches Intro aus einer Eingabeaufforderung

Hier ist die Eingabeaufforderung, die ich in der Nacht verwendet habe, als die Geschichte mit dem Wasserkocher passierte. Ich gebe Ihnen den eigentlichen Text, keine polierte Version, weil es auf die Ecken und Kanten ankommt.

„Erstelle mir ein 3-sekündiges filmisches Intro für meine Marke mejba.me. Dunkelblauer Hintergrundverlauf (#0F172A bis #1E293B). Mein Logo (logo.svg in Über die gesamten 3 Sekunden wird der Slogan „Engineered with intent“ bei 1,5 Sekunden eingeblendet und bei 2,7 Sekunden ausgeblendet. Verwenden Sie GSAP für die Zeitleiste.

Acht Dinge in dieser Eingabeaufforderung leisten echte Arbeit, und es lohnt sich, sie hervorzuheben:

1. Dauer. Drei Sekunden. Der Agent benötigt eine Länge.
2. Markenfarben mit Hexadezimalcodes. Nicht nur „Dark Navy“ – das Hexadezimalpaar macht Rätselraten überflüssig.
3. Asset-Pfad. Ich zeige den Agenten auf logo.svg in /assets, den ich dort platziert habe, bevor ich Claude Code geöffnet habe.
4. Animationsdetails. Maßstabsbereich, Beschleunigungskurve, Dauer. Das Modell kann sinnvolle Standardwerte auswählen, wenn Sie diese überspringen, aber die Spezifität macht den ersten Entwurf nutzbar.
5. Hintergrundbewegung. Eine separate Animationsebene mit eigener Dauer und Richtung.
6. Textinhalt und Timing. Der Slogan erscheint zu einer bestimmten Sekunde, wird eingeblendet, gehalten, ausgeblendet.
7. Typografie. Eine benannte Schriftart. Ohne dies erhalten Sie die Standardeinstellungen des Modells.
8. Render-Flags. Auflösung, Format, Bildrate.

Claude Code hat die Komposition in etwa elf Sekunden geschrieben. Es wurde ein index.html im compositions/-Ordner des Projekts erstellt, wobei die GSAP-Zeitleiste mithilfe des { paused: true }-Musters, das Hyperframes für die deterministische Suche benötigt, korrekt registriert wurde. Es hat mein Logo in ein <img>-Tag mit dem richtigen Quellpfad gezogen. Das CSS hat meine Hex-Codes wörtlich verwendet. Das Textelement hatte die richtige Lockerung.

Ich habe mit npx Hyperframes preview eine Vorschau angezeigt, wodurch das Studio in meinem Browser unter localhost:3000 gestartet wurde. Die Vorschau ist eine Live-Laufzeitumgebung – derselbe Code, der während der Render-Läufe im Iframe erfasst wird. Ich habe also genau das bekommen, was ich gesehen habe. Die erste Iteration sah zu etwa 80 % richtig aus. Die Skalierung des Logos war etwas zu aggressiv (es fühlte sich federnd an, als ich Gravitas wollte) und der Farbverlauf bewegte sich zu schnell.

Zwei Eingabeaufforderungen später wurden beide behoben. * „Verlangsamen Sie die Skalierung des Logos auf 1,5 Sekunden und verwenden Sie eine Power2.out-Beschleunigung anstelle von Bounce.“* Behoben. * „Halbieren Sie die Geschwindigkeit des Hintergrundverlaufs-Sweeps und reduzieren Sie seine Deckkraft auf 0,6.“* Behoben. Dann lief ich:

npx Hyperframes render compositions/intro --format mp4 --quality high

Die MP4 landete vierzig Sekunden später im Ausgabeordner. Ich habe es mir noch einmal angeschaut. Es war das klare, hochwertige Intro, das ich mir vorgestellt hatte, als ich mit dem Tippen begann. Gesamtzeit vom leeren Verzeichnis bis zur fertigen MP4: unter zwölf Minuten, einschließlich der Eingabeaufforderungs-Iterationen.

Das zeigen Ihnen die Einführungsvideos. Der Grund dafür, dass es funktioniert, ist nicht, dass das Modell etwas Magisches tut. Es liegt daran, dass Hyperframes das Ausgabeziel in etwas verwandelt haben, an dem das Modell bereits seit einem Jahrzehnt trainiert wurde. Webcode rein. Video raus.

Bei der Iteration handelt es sich um Eingabeaufforderungen, nicht um Keyframes

Das, worauf ich bei diesem Workflow immer wieder zurückkomme – und der Grund, warum ich denke, dass er in den nächsten achtzehn Monaten einen bedeutenden Teil des Motion-Graphics-Marktes verschlingen wird – ist, wie sich Iteration anfühlt.

In einem herkömmlichen Editor erfolgt die Verfeinerung mechanisch. Sie wählen eine Ebene aus. Sie ziehen einen Keyframe. Du blinzelst auf den Abspielkopf. Sie exportieren erneut. Du schrubbst. Du fluchst. Du wiederholst. Ein fünfzehnminütiger Hin- und Rückweg pro Änderung ist selbst für erfahrene Redakteure normal. Für Leute, die dies in Teilzeit tun, sind es eher dreißig.

In Hyperframes bis Claude Code erfolgt die Verfeinerung im Dialog.

„Vergrößern Sie den Titel um 20 % und fügen Sie ihm einen sanften Cyan-Schimmer hinzu.“

„Der Logo-Eingang fühlt sich gehetzt an. Dehnen Sie ihn auf 1,8 Sekunden und fügen Sie am Ende eine Haltezeit von 200 ms hinzu, bevor der Slogan erscheint.“

„Ersetzen Sie den Hintergrundverlauf durch einen langsameren radialen Impuls aus der Mitte in denselben Farben.“

„Fügen Sie eine dünne animierte Linie hinzu, die beim Einblenden unter dem Slogan verläuft.“

Für jede dieser Änderungen benötigt der Agent weniger als 30 Sekunden. Die Vorschau wird im laufenden Betrieb neu geladen. Du siehst es. Entweder Sie behalten es oder Sie geben die nächste Anweisung. Es gibt keinen Zeitplan zum Schrubben. Kein Ebenenbedienfeld zum Navigieren. Keine Version von „Wo ist dieser Effekt geblieben?“ Da die Komposition aus HTML und CSS besteht, ist jede visuelle Entscheidung überprüfbar, bearbeitbar und erneut anregbar.

Woran das in der Praxis scheitert, ist der Teil der Motion-Graphics-Arbeit, der Unerfahrenheit bestraft. Was After Effects einschüchternd macht, ist nicht, dass die Vorgänge komplex sind – sondern dass Sie genau wissen müssen, welches Panel, welcher Parameter und welche Kombination von Bézier-Griffen das Aussehen in Ihrem Kopf erzeugt. Hyperframes über Claude Code ermöglichen es Ihnen, auf der Ebene zu bleiben, an die Sie tatsächlich denken: dem Look. Du beschreibst das Aussehen. Der Agent übersetzt es in die Parameter. Sie kritisieren das Ergebnis. Der Agent optimiert die Parameter. Die Übersetzungsebene ist keine Mauer mehr, die man erklimmen muss. Es ist ein Gespräch, das Sie führen.

Für jemanden, der zehn Jahre mit einem Timeline-Editor verbracht hat, wird sich das zunächst seltsam anfühlen und die Versuchung wird groß sein, den generierten HTML-Code weiterhin manuell zu bearbeiten. Widerstehen Sie dieser Versuchung bei den ersten fünf Projekten. Bleiben Sie in der Eingabeaufforderungsebene. Sie werden schneller vorankommen, als Sie es für möglich gehalten hätten, weil Sie nicht mehr die kognitiven Kosten bezahlen müssen, die durch den Wechsel zwischen was ich will und welchem ​​Knopf ich drehen muss entstehen.

Die Ausnahme – und da möchte ich ehrlich sein – ist, wenn Sie eine rahmengenaue Synchronisierung mit einem Voiceover benötigen. Das ist ein anderes Problem, eines, das ich ausführlich in meinem Testbeitrag zu Claude Design und Hyperframes behandelt habe. Die Kurzversion: Für diesen Anwendungsfall benötigen Sie Transkript-Zeitstempel auf Wortebene und müssen diese als JSON-Datei in die Eingabeaufforderung einspeisen. Hyperframes können einzelne Wörter im Frame treffen, aber nur, wenn Sie ihm die Timing-Daten geben. Für reine Bewegungsgrafiken ohne Voiceover-Synchronisierung – Intros, Outros, untere Drittel, animierte Erklärungen, Social-Media-Beiträge, Werbemotive – benötigen Sie nichts davon. Sie beschreiben einfach die Bewegung.

Rendering: das Studio versus die Eingabeaufforderung

Sie haben zwei Möglichkeiten, eine MP4 aus Hyperframes zu erstellen, und diese decken unterschiedliche Arbeitsabläufe ab.

Weg eins – Claude zum Rendern auffordern. Sie bleiben in Ihrem Terminal, sagen dem Agenten „Rendern Sie diese Komposition in 1080p MP4, hohe Qualität, speichern Sie sie unter outputs/intro-final.mp4“ und der Agent führt den Befehl CLI aus und schreibt die Datei. Das ist es, was ich für 90 % meiner Arbeit mache. Es hält mich in einem Fenster fest. Der Render läuft. Die Datei wird angezeigt. Erledigt.

Pfad zwei – verwenden Sie das Hyperframes-Studio. Führen Sie npx Hyperframes preview aus und das Studio wird in Ihrem Browser geöffnet. Das Studio ist ein echter Kompositionseditor – Vorschaufenster auf der einen Seite, Code auf der anderen, Hot-Reload dazwischen – und es verfügt über ein Exportfenster, in dem Sie Format (MP4, WebM, MOV), Qualitätsvoreinstellung und Auflösung auswählen können. Dies verwende ich, wenn ich zwei leicht unterschiedliche Versionen derselben Komposition erstellen möchte oder wenn ich genau sehen möchte, was die Laufzeit in einem bestimmten Frame tut. Der Vorschau-Iframe führt denselben Code aus, den der Renderer erfasst. Sie erhalten also genau das, was Sie sehen.

Bei den meisten Agenten-Workflows gewinnt der Prompt-Pfad an Geschwindigkeit. Für Optimierungs- und Inspektionsarbeiten hat das Studio seinen Platz verdient. Es gibt keinen Grund, das eine dauerhaft dem anderen vorzuziehen – sie existieren nebeneinander im selben Projektordner.

Ein Hinweis zu Ausgabeformaten. MP4 ist die Standardeinstellung und die richtige Antwort für fast alles, was Sie auf YouTube, LinkedIn, X, TikTok oder Instagram veröffentlichen. WebM ist kleiner und eignet sich hervorragend zum Einbetten in eine Website, auf der Sie den Player steuern. MOV ist das, was Sie brauchen, wenn Sie einen Clip an jemanden weitergeben, der ihn anschließend in DaVinci Resolve oder Premiere farblich korrigiert, da dadurch mehr visuelle Informationen auf Kosten der Dateigröße erhalten bleiben. Hyperframes exportieren alle drei. Das Render-Flag ist --format mp4 | webm | mov. Qualitätsvoreinstellungen sind low, medium, high und lossless. Für Social-First-Inhalte ist high ein Sweet Spot – optisch nicht von lossless für den durchschnittlichen Betrachter zu unterscheiden, bei einem Bruchteil der Dateigröße.

Die aktuelle Version hat eine Auflösungsgrenze von 1080p. Wenn Sie 4K benötigen, ist dies noch nicht Ihr Werkzeug. Für die Plattformen, auf denen die meisten YouTuber und Vermarkter tatsächlich veröffentlichen, ist 1080p immer noch das richtige Ziel – TikTok, Reels, Shorts, native LinkedIn-Videos und die meisten Anzeigenplatzierungen werden alle mit 1080p oder darunter geschaltet. Rundfunk- und Kinoarbeiten benötigen eine andere Pipeline.

Über eine einzige Eingabeaufforderung hinaus: Verwandeln Sie eine Webseite in ein Video

Der Cinematic-Intro-Test ist die einfache Demo. Was mich überrascht hat, war, was passiert, wenn man Hyperframes eine komplexere Eingabe zuführt.

Ich habe dies auf meiner eigenen Portfolio-Seite versucht. Ich öffnete Claude Code, gab ihr die URL https://www.mejba.me und fragte: * „Lesen Sie diese Webseite und verwandeln Sie sie in ein 60-sekündiges filmisches Erklärvideo. Behalten Sie die dunkle, erstklassige Ästhetik bei. Übernehmen Sie die Markenfarben und die Typografie von der Website selbst. Behandeln Sie das Hauptwertversprechen in drei Schritten – wer ich bin, was ich aufbaue und wie man mit mir zusammenarbeitet. Verwenden Sie klare Bewegungsgrafiken, kein Archivmaterial, keine Erzählung. Rendern Sie unter 1080p MP4.“*

Was acht Minuten später zurückkam, war ein 60-sekündiges Video, das wirklich aussah, als wäre es für die Marke gemacht worden. Der Agent hatte die dunkle Marinepalette und den violett-cyanfarbenen Akzent eingefangen. Es hatte ein paar Schlagzeilen von der Seite gezogen und sie in animierte Typografie-Beats umgewandelt. Zur Strukturierung des Mittelteils wurde meine aktuelle Projektliste verwendet. Die Übergänge waren sauber, das Tempo angemessen und die abschließende CTA-Karte stimmte mit der visuellen Sprache des Rests des Stücks überein.

Es war nicht perfekt. In der ersten Version waren die Haltepunkte der Abschnitte leicht versetzt – Schlag zwei lief etwas zu lang, Schlag drei fühlte sich gehetzt an. Zwei Aufforderungen zur Neuausrichtung des Timings haben das Problem behoben. Aber die Tatsache, dass ich in weniger als fünfzehn Minuten von einer öffentlichen URL zu einem auf die Marke abgestimmten 60-Sekunden-Erklärer wechseln konnte, ist wirklich neu in der Tooling-Welt, und ich glaube, die meisten Leser unterschätzen diesen Aspekt, wenn sie zum ersten Mal davon hören.

Das gleiche Muster gilt für Dokumente. Ich habe es an einem 4-seitigen Produktbrief ausprobiert, den ich für einen Kunden geschrieben hatte – ein PDF, das im Projektordner abgelegt wurde, mit der Aufforderung * „Konvertieren Sie diesen Brief in ein 90-sekündiges Erklärvideo. Verwenden Sie die gleiche dunkle, professionelle Ästhetik wie mein Intro. Ziehen Sie die drei Hauptfunktionen in separate Szenen. Beenden Sie mit dem Kontakt-CTA aus dem Dokument.“* Der Agent las das PDF, identifizierte die Struktur, komponierte drei Szenen und renderte. Das Ergebnis war als erster Entwurf nützlich. Nach zwei Runden mit Aufforderungen zur Überarbeitung konnte ich es an den Kunden senden.

Dies ist der Teil des Arbeitsablaufs, der am meisten stören wird. Vermarkter, die derzeit drei Stunden und vierhundert Dollar für die Produktion eines einzelnen Erklärvideos aufwenden, können jetzt zum Preis ihres Claude-Abonnements eines in einer Stunde produzieren. PMs, die PRDs in Notion geschrieben haben, können dasselbe Dokument an Hyperframes übergeben und eine Videoversion für das Kickoff-Meeting erhalten. Gründer, die ein Produkt auf den Markt bringen, können ihre Landingpage-Kopie mitnehmen und eine Videoanzeigen-Pipeline bereithalten, bevor die Seite überhaupt online ist. Die Eintrittsbarriere für „Video als Inhaltsformat“ ist gerade um eine Größenordnung zusammengebrochen.

Die traditionelle Pipeline im Vergleich zu dieser

Hier ist der Vergleich ohne Marketingsprache. Beide Spalten basieren auf der tatsächlichen Ausführung der Arbeit.

git es wie alles andere | | Markenkonsistenz | Wer auch immer die Datei erstellt hat, kontrolliert das System | Als Claude Code-Skill gespeichert, für immer wiederverwendbar | | Ausgabeformate | Was auch immer Sie zum Exportieren in Betracht ziehen | MP4, MOV, WebM über Flag oder Studio-Panel | | Decke | 4K, Broadcast-Farbe, komplexe VFX | 1080p, Bewegungsgrafiken, kein natives schweres 3D |

Die ehrliche Lektüre dieser Tabelle ist, dass Hyperframes keinen leitenden Motion Designer ersetzt, der an einem Markenfilm im Wert von 50.000 US-Dollar arbeitet. Es ersetzt fast vollständig die langen Sätze „Wir brauchen ein kurzes Intro für dieses Video“ und „Kann jemand ein unteres Drittel für diesen Clip erstellen“ und „Wir brauchen bis Freitag ein 30-Sekunden-Werbemotiv“-Arbeit, die die Projektwarteschlangen der Agenturen füllt. In diesem langen Schwanz leben tatsächlich die meisten Produktionsstunden. Das ist der Markt, der sich bewegt.

Die Anwendungsfälle, die dadurch derzeit freigeschaltet werden

Hier ist, wer dies an diesem Wochenende einrichten sollte, aufgeschlüsselt nach Job, wobei die spezifische Art von Arbeit meiner Meinung nach am schnellsten gewinnt:

Ersteller. Intro-Animationen, Outro-Karten, untere Drittel, Endbildschirme, animierte Abschnittstrenner für lange Inhalte, animierte Cover-Art für Podcasts. Die Dinge, die früher einen freiberuflichen Redakteur oder einen Sonntagnachmittag in DaVinci erforderten. Sie bauen ein paar Fähigkeiten auf (eine pro Asset-Typ) und verwenden sie für jedes zukünftige Video wieder. Ihr Kanal sieht nun optisch einheitlich aus, und zwar auf eine Art und Weise, deren Wartung sonst kostspielig wäre.

Entwickler. Produktdemo-Intros, animierte Änderungsprotokolle, Videos zur Veröffentlichungsankündigung, README-Heldenanimationen. Alles, was Sie auf einer Dokumentationsseite oder in einem Launch-Tweet hätten einbetten wollen, es aber nicht getan haben, weil die Produktionskosten zu hoch waren. Jetzt kostet es zehn Minuten.

Vermarkter. Social Ad-Creatives in großem Umfang, A/B Testvarianten derselben Anzeige mit unterschiedlichem Text oder Tempo, animierte Erklärungen für Landingpages, wöchentliche Produktaktualisierungsvideos. Die alte Einschränkung lautete: „Wir können es uns nicht leisten, fünf Varianten zu testen.“ Diese Einschränkung ist weg. Sie können in einer Stunde zwanzig Varianten einer Anzeige rendern und sich von der Plattform sagen lassen, welche davon funktioniert.

Produktmanager. Animierte Komplettlösungen für neue Funktionen für Kickoff-Meetings, Videoversionen eines PRD für Stakeholder-Updates, Demo-Clips für die Vertriebsunterstützung. Es geht nicht darum, Motion Designer zu werden. Der Punkt ist, dass Sie ein Video genauso produzieren können wie einen Slack-Beitrag – schnell, kostengünstig und aus Text.

Gründer. Einführungsvideos, Fundraising-Deck-Ergänzungen, Recruiting-Clips, Produkttrailer. Die Arbeit, die Sie stillschweigend gemieden haben, weil sie Ihnen zu teuer vorkam, als dass sie sich lohnte. Die Kosten sind einfach zusammengebrochen. Es gibt keinen vertretbaren Grund mehr, ohne Video zu starten.

Wenn Sie meine Arbeit am breiteren Video-Stack verfolgt haben, fügt sich dieser in das Produktionssystem ein, das ich in dem 3-Tools-Videoproduktions-Stack Claude Code beschrieben habe – Designsystem oben, Hyperframes in der Mitte, Auphonic unten für Audio. Für reine Bewegungsgrafiken ohne Voiceover können Sie die unterste Ebene vollständig überspringen und nur Hyperframes verwenden.

Wo der Workflow immer noch unterbrochen wird

Ich möchte Ihnen die ehrliche Version der Einschränkungen geben, da dies bei den Einführungsvideos nicht der Fall ist.

Voiceover-Synchronisierung ist ein separates Problem. Wenn Ihr Video einen Kommentar enthält und Sie Text oder Grafiken auf dem Bildschirm benötigen, um zu bestimmten Wörtern zu gelangen, benötigen Sie ein Transkript auf Wortebene und eine Eingabeaufforderung, die auf diese Zeitstempel verweist. Hyperframes führen es korrekt aus, wenn Sie ihm die Daten geben. Es wird erraten, wenn Sie es nicht tun. Ich habe den vollständigen transkriptgesteuerten Workflow in meinem Claude Design- und Hyperframes-Test behandelt, und der gleiche Ansatz funktioniert hier.

Die Renderzeit skaliert mit der Komplexität der Komposition. Ein dreisekündiges filmisches Intro wird in weniger als einer Minute gerendert. Eine 90-sekündige Komposition mit mehreren Animationsebenen, Bildüberlagerungen und einem geschäftigen Hintergrund kann auf einem modernen Laptop fünf bis zehn Minuten dauern. Dies ist keine Einschränkung des Tools, sondern physikalischer Natur – die Engine erfasst jeden Frame in einem Headless-Browser und fügt ihn mit FFmpeg zusammen. Wenn Sie Kundenarbeit erledigen, die fünfzig Renderings pro Tag erfordert, berücksichtigen Sie die Kosten für den lokalen Computer.

Die Obergrenze von 1080p ist vorerst real. Wenn Ihre Ausgabespezifikation 4K ist, ist dies noch nicht Ihr Werkzeug. Sehen Sie sich die GitHub-Veröffentlichungen an – das Engine-Team hat große Fortschritte gemacht.

Benutzerdefinierte Schriftarten müssen für die Laufzeit verfügbar sein. Wenn Sie auf eine Markenschriftart verweisen, die nicht Google Fonts ist und sich nicht im assets/-Ordner Ihres Projekts befindet, greift der Renderer zurück. Legen Sie Ihre .woff2-Dateien im Projekt ab und verweisen Sie sie im CSS der Komposition, oder bleiben Sie für erste Experimente bei websicheren Schriftarten und Google Fonts.

Schweres 3D ist nicht der richtige Job für dieses Tool. Sie können Three.js als Animationslaufzeit verwenden, und für stilisierte abstrakte Szenen funktioniert es gut. Für komplexe 3D-Charakteranimationen oder fotorealistisches 3D-Rendering sind Blender und eine echte Renderfarm immer noch die Antwort.

Keines davon ist ein Dealbreaker für die oben aufgeführten Anwendungsfälle. Sie stellen die Grenzen dar, in denen dieses Tool wirklich gut ist, und wenn Sie sie im Voraus kennen, ersparen Sie sich die Zeit, im falschen Moment eines Projekts auf sie zu stoßen.

Was als nächstes kommt: die Avatar-Pipeline

Der Teil, der das langfristige Bild interessant macht, ist das, was passiert, wenn Sie beginnen, Hyperframes mit dem Rest des AI-Videostapels zu kombinieren. HeyGen – das Unternehmen hinter Hyperframes – verfügt bereits über ein Deep-Avatar-Produkt. Der natürliche nächste Schritt, den ich in diesem Jahr erwarte, ist eine saubere Übergabe zwischen einem Avatar-Sprechkopf, den Bewegungsgrafiken dahinter und der Bearbeitungsebene, die das Ganze zusammenhält. Avatar in HeyGen, untere Drittel und Bewegung in Hyperframes, Audiopolitur in Auphonic, die gesamte Pipeline orchestriert durch Claude Code-Fähigkeiten, die Sie einmal geschrieben haben und für immer anrufen.

Das ist keine Science-Fiction. Die Teile sind alle versandfertig. Die Orchestrierungsschicht ist das, was Sie selbst erstellen. Dabei handelt es sich größtenteils um schnelles Engineering und Skill-Design, sobald die Tools installiert sind. Das zusammengesetzte Kapital ist Ihre Fähigkeitsbibliothek. Jedes Video, das Sie versenden, erhöht die Kapazität etwas, um das nächste schneller zu versenden. Wenn Sie mich beim Schreiben über [animierte Heldenabschnitte, die mit

Häufig gestellte Fragen

Muss ich wissen, wie man programmiert, um Hyperframes mit Claude Code zu verwenden?

Nein – Sie beschreiben das Video in einfachem Englisch und Claude Code schreibt die HTML-, CSS- und JavaScript-Komposition für Sie. Sie müssen Node.js und FFmpeg nur einmal installieren. Die vollständige Anleitung zur Einrichtung finden Sie im Abschnitt „Was Sie tatsächlich installieren müssen“ oben.

Ist die kommerzielle Nutzung von Hyperframes kostenlos?

Ja. Hyperframes ist Open Source unter der Apache 2.0-Lizenz ohne Gebühren pro Render, Sitzbeschränkungen oder Einschränkungen hinsichtlich der Unternehmensgröße. Sie zahlen nur für Ihr Claude Code-Abonnement und die Rechenleistung auf Ihrem lokalen Computer. Rendern Sie so viele Videos, wie Ihre Hardware verarbeiten kann.

Wie schneidet Hyperframes im Vergleich zu Remotion ab?

Bei beiden handelt es sich um HTML-basierte Video-Frameworks. Hyperframes wurde speziell für AI-Agenten zum Verfassen von Kompositionen entwickelt und wird standardmäßig mit Claude Code-Fähigkeiten geliefert. Remotion verwendet React und ist allgemeiner einsetzbar. Bei aufforderungsgesteuerten Arbeitsabläufen, bei denen der Agent an erster Stelle steht, überzeugt Hyperframes bei der Zeit bis zum ersten Rendering. Den ausführlicheren Vergleich habe ich in meinem Claude Code-Beitrag zum Videobearbeitungs-Workflow behandelt.

Welche Ausgabeformate unterstützt Hyperframes?

MP4, MOV und WebM, eingestellt über das --format-Flag zum Zeitpunkt des Renderns oder ausgewählt im Studio-Exportfenster. MP4 ist die Standardeinstellung und die richtige Lösung für die meisten Social-Media- und Web-Veröffentlichungen.

Können Hyperframes eine Webseite oder ein PDF in ein Video umwandeln?

Ja – übergeben Sie die URL oder das Dokument an Claude Code mit einer Eingabeaufforderung, die das gewünschte Video beschreibt, und der Agent liest die Quelle, strukturiert die Szenen, schreibt die Komposition und rendert. Der Abschnitt Über eine einzelne Eingabeaufforderung hinaus oben führt Sie durch ein reales Beispiel.

Was ist die maximale Renderauflösung?

1080p ab Mai 2026. Für TikTok, Reels, Shorts, LinkedIn, YouTube und die meisten bezahlten Anzeigenplatzierungen ist 1080p das richtige Ziel. Für 4K-Übertragungen oder Kinoarbeiten benötigen Sie eine andere Pipeline.

Der Render, der meinen Plan für diesen Monat geändert hat

Als der Wasserkocher fertig war, schenkte ich Wasser ein, ging an meinen Schreibtisch zurück und sah zu, wie die MP4 dreimal hintereinander abgespielt wurde. Nicht weil es perfekt war – das war es nicht –, sondern weil die Lücke zwischen dem, was ich eingegeben hatte und *dem, was jetzt als fertige Datei auf meiner Festplatte lag, größer war als bei jedem Tool, das ich in den letzten fünf Jahren verwendet hatte. Diese Lücke ist das eigentliche Produkt. Die Komposition selbst war unauffällig. Der Zusammenbruch der Produktionskosten zwischen „Ich möchte ein filmisches Intro“ und „Ich habe ein filmisches Intro“ wird in diesem Jahr viele Pläne ändern, auch meine.

Ich werde den nächsten Monat damit verbringen, die visuelle Ebene jedes Videos, das ich über diesen Stapel veröffentliche, neu aufzubauen – jedes Intro, jedes Outro, jedes untere Drittel, jeden Abschnittsumbruch – und ich werde jedes davon in einen Claude Code-Skill einbinden, damit ich nie wieder darüber nachdenken muss. Wenn ich mein nächstes Langvideo aufnehme, werden die visuellen Produktionskosten bei Null liegen. Das ist der eigentliche Sinn dieser Werkzeuge. Nicht, dass irgendein Rendering beeindruckend wäre. Dass die gesamte Pipeline nur einen Satz entfernt ist.

Wenn Sie auf den Moment gewartet haben, in dem die Videoerstellung von AI von „interessante Demo“ zu „Ich kann das morgen für meine echte Arbeit verwenden“ wechselte, dann ist es letzten Monat passiert. Der Wasserkocher ist Ihr Timer.

Lasst uns zusammenarbeiten

Möchten Sie AI-Systeme aufbauen, Arbeitsabläufe automatisieren oder Ihre technische Infrastruktur skalieren? Ich würde gerne helfen.

• Fiverr (benutzerdefinierte Builds und Integrationen): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (Unternehmenslösungen): ramlit.com
• ColorPark (Design & Branding): colorpark.io
• xCyberSecurity (Sicherheitsdienste): xcybersecurity.io