NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Grüner HYPERFRAMES Schriftzug im Browser mit Rakete für lokalen Video Schnitt

Was ist Hyperframes?

Hyperframes ist ein quelloffenes Framework von HeyGen für lokalen Video Schnitt mit KI Agenten. Du beschreibst dem Agent das Video, der schreibt HTML, CSS und JavaScript, und Hyperframes rendert daraus frame-genau eine MP4 Datei auf deinem eigenen Rechner. Kein Cloud Upload, keine API Keys, keine monatliche Lizenz.

Das Framework steht unter Apache 2.0 Lizenz, ist OSI konform und nutzt headless Chrome plus FFmpeg als Render Pipeline. Anders als klassische Editoren wie Premiere oder DaVinci Resolve gibt es keine Timeline zum Klicken. Anders als Cloud KI Video Dienste wie HeyGen oder Synthesia verlässt dein Material den Rechner nicht.

Hyperframes ist explizit für KI Coding Agenten gebaut. Skills und Plugins gibt es für Claude Code Plugins, Cursor, OpenAI Codex und Gemini CLI. Das Ergebnis ist deterministisch: gleicher Input erzeugt identisches Video, perfekt für automatisierte Marketing Pipelines und Produkt Updates.

NCA KI Workshop für alle Abteilungen

KI für das ganze Team an einem Tag

Ein Tag inhouse, ohne Vorkenntnisse, mit Live Demo und Live Coding. Am Ende steht ein eigenes kleines Tool statt einer Demo App.

  1. 1
    Kostenloses Vorgespräch
    Aufgaben und Teams klären
  2. 2
    Workshoptag bei euch
    Live Demo, danach gemeinsam bauen
  3. 3
    Praxistag optional
    KI an eigenen Aufgaben einsetzen
Roland Golla
Roland Golla
Fullstack Developer
Zum Workshop für alle Abteilungen arrow_forward

Hyperframes mit NCA: Schnelle Hilfe vom Experten

Never Code Alone berät seit Jahren Teams bei lokalen, souveränen KI Workflows. Wir betreiben unseren eigenen Stack mit Ollama für lokale KI Modelle, hosten alles bei Conversis Duisburg statt in der Cloud und arbeiten täglich mit Claude Code Plugins und OpenCode. Hyperframes passt damit perfekt in unser Verständnis von DSGVO konformer KI Entwicklung.

Konkret unterstützen wir bei der Einführung von Hyperframes im Vibe Coding Consulting, der Integration in bestehende Vibe Coding Workflows, beim Aufbau lokaler Render Pipelines auf eigenen Servern, der Verknüpfung mit anderen lokalen KI Tools wie ComfyUI und Z Image Turbo, sowie bei der Migration weg von Cloud Video Diensten. Unser KI Tools 2026 Glossar ordnet Hyperframes in das größere Bild ein.

Lokales Rendering: Was auf deinem Rechner passiert

Hyperframes installierst du als npm Package und brauchst nur zwei Dinge: Node.js ab Version 22 und FFmpeg. Der eigentliche Workflow läuft komplett offline. Du startest ein Projekt, dein KI Agent schreibt eine HTML Composition mit data-Attributen für Zeit, Position und Dauer, und Hyperframes orchestriert headless Chrome plus FFmpeg, um Frame für Frame eine MP4 Datei zu erzeugen.

Die typischen CLI Kommandos zeigen, wie wenig Overhead das Framework hat. Der Render läuft auf deiner Hardware, fertige Videos landen direkt im Projektordner.

Code: 
          
npx hyperframes init mein-video
cd mein-video
npx hyperframes preview
npx hyperframes render

Der preview Befehl öffnet die Komposition mit Live Reload im Browser, sodass du Änderungen sofort siehst. Der render Befehl kapselt headless Chrome, capture per image2pipe, und kodiert mit FFmpeg zu MP4. Bei Bedarf läuft alles auch in Docker, also auch reproduzierbar in CI Pipelines wie GitHub Actions oder GitLab CI ohne Cloud Dienste.

HTML Composition: So sieht eine Szene aus

Hyperframes nutzt klassisches HTML mit data-Attributen statt einer eigenen DSL oder einem React Tree. Das macht den Output für KI Modelle besonders zugänglich, weil LLMs auf riesigen Mengen HTML trainiert sind. Eine typische Szene mit Hintergrundvideo, Overlay und Musikspur sieht so aus:

Code: 
          
<div id="stage" data-composition-id="mein-video" data-start="0" data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3" data-track-index="1" src="logo.png" />
  <audio id="bg-music" data-start="0" data-duration="9" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

Die Attribute data-start, data-duration und data-track-index definieren Zeitlinie und Spurzuordnung. Was im Browser läuft, ist auch das, was Hyperframes rendert. Für Animationen kommen optional Frame Adapter für GSAP, Anime.js, Web Animations API, CSS Keyframes, Lottie und Three.js dazu, sodass library-clock-basierte Bibliotheken sauber frame-genau seekbar werden.

Hyperframes für KI Agenten: Skills und Plugins

Das eigentliche Killer Feature ist die native Anbindung an KI Coding Agenten. Hyperframes liefert Skills im Vercel Skills Format mit, die du in Claude Code, Cursor, OpenAI Codex und Gemini CLI installieren kannst. Damit kennt dein Agent die Framework Konventionen, die Composition Patterns und die richtigen CLI Befehle, ohne dass du sie ihm erklären musst.

Code: 
          
npx skills add heygen-com/hyperframes

In Claude Code stehen anschließend Slash Commands zur Verfügung wie /hyperframes für Composition Authoring, /hyperframes-cli für die Dev Loop, /hyperframes-media für TTS und Whisper Transkription, sowie /gsap, /animejs, /css-animations, /lottie, /three und /waapi je nach Animations Runtime.

Für Anthropics Designtool gibt es einen eigenen Guide. Wer Hyperframes lieber visuell prototypisieren möchte, kann den Erstentwurf in Claude Design generieren und anschließend in einem Coding Agent verfeinern. Für Cursor gibt es zusätzlich ein eigenes Plugin, das per Cursor Marketplace installiert wird.

Hyperframes im Vergleich zu Cloud Diensten und klassischen Editoren

Wer Videos produzieren will, hat 2026 grob drei Wege: Cloud KI Dienste, klassische Editoren oder agent-getriebene lokale Frameworks wie Hyperframes. Der Vergleich macht die Trade-offs sichtbar.

Ansatz Beispiele Kontrolle und Datenschutz
Cloud Video KI HeyGen, Synthesia, Pictory Cloud, meist US Server, API Limits, monatliche Lizenz
Klassischer Editor Premiere, DaVinci Resolve, Final Cut Lokal aber manuell, Abo oder hohe Einmalkosten
Agent native lokal Hyperframes, Remotion Lokal, automatisiert, Open Source oder Source Available
Browser Engine Headless Chrome plus FFmpeg Deterministisch, reproduzierbar in CI

Hyperframes versus Remotion: Apache 2.0 schlägt Source Available

Der direkte Konkurrent ist Remotion, ein React basiertes Video Framework, das HeyGen selbst lange intern genutzt hat. Beide Tools steuern headless Chrome und sind deterministisch. Der Unterschied liegt im Authoring Modell und in der Lizenz.

Authoring: Remotion setzt auf React Komponenten in TSX und braucht einen Build Step mit Bundler. Hyperframes setzt auf plain HTML mit CSS und GSAP, die index.html läuft ohne Build. Bestehende HTML CSS Assets kannst du in Hyperframes einfach einfügen und animieren, statt sie als JSX nachzubauen.

Animations Modell: Bibliothekszeit getriebene Animationen wie GSAP, Anime.js oder Motion One sind in Hyperframes seekbar und frame-genau abrufbar, während Remotion sie zur Wall Clock Zeit rendert. Das macht Hyperframes robuster für aufwendige Library Timelines.

Lizenz: Hyperframes steht unter Apache 2.0, einer OSI anerkannten Open Source Lizenz ohne Per Render Fees, Sitzplatz Limits oder Firmen Größen Schwellen. Remotion ist source available, nicht Open Source, und verlangt eine bezahlte Firmenlizenz oberhalb kleiner Team Größen. Für viele Unternehmen ist das ein erstrangiges Entscheidungskriterium.

Verteiltes Rendering: Hier liegt Remotion vorne, mit produktionsreifer Lambda Integration für massiv parallele Renderings. Hyperframes rendert aktuell single machine. Für Marketing Pipelines auf einem oder zwei Servern reicht das, für millionenfach parametrische Videos pro Tag noch nicht.

Anwendungsfälle für lokalen Video Schnitt

Hyperframes spielt seine Stärken überall dort aus, wo Videos programmatisch entstehen sollen und sensibler Inhalt den Rechner nicht verlassen darf. Typische Szenarien aus Beratungsprojekten:

  • Marketing Pipelines: Produkt Demos und Erklärvideos aus CSV oder JSON Daten generieren, in CI Pipelines reproduzierbar rendern
  • Daten Visualisierungen: Animierte Bar Chart Races, Liniendiagramme und Dashboard Recaps für Reports und Social Media
  • Onboarding Videos: Pro Kunde individualisierte Begrüßungsvideos ohne Cloud Upload, inklusive personalisierter Texte per lokaler Ollama Inferenz
  • Compliance Schulungen: Reproduzierbare Schulungsvideos mit Audit Trail, ohne dass interne Inhalte an US Cloud Anbieter fließen
  • URL to Video: Bestehende Webseiten oder Artikel mit dem website-to-hyperframes Skill in ein Video umwandeln
  • Remotion Migration: Bestehende Remotion Komposition mit dem remotion-to-hyperframes Skill auf HTML portieren, um Lizenzkosten zu sparen
  • Social Snippets: 9 zu 16 Hook Videos für TikTok oder Reels, mit TTS Narration aus Kokoro und automatischen Captions

Das Skill hyperframes-media deckt zusätzlich TTS mit Kokoro, Transkription mit Whisper und Background Removal mit U2Net ab. Alles lokal, alles Open Source. Wer schon mit ComfyUI oder Z Image Turbo lokal Bilder generiert, hat mit Hyperframes den passenden Video Output dazu.

Hyperframes Video Levels: vom Kurz Hook zur Pipeline

Hyperframes skaliert mit der Komplexität deines Video Outputs. Vier praxiserprobte Reifegrade haben sich aus Beratungsprojekten und Community Best Practices herauskristallisiert, vom einfachen TikTok Hook bis zur vollautomatischen Render Pipeline in CI.

Level Output und Länge Hyperframes Skill und Workflow
Short 9 zu 16 Hook, 15 bis 30 Sekunden TTS Kokoro, Caption Sync, Bouncy Captions
Explain 16 zu 9 Erklärvideo, 1 bis 3 Minuten GSAP Timeline, Audio Track, lower thirds
Demo Produkt Demo mit Live Daten website-to-hyperframes, Data Charts, Shader Transitions
Pipeline Massen Output aus CSV oder JSON hyperframes-cli, Docker, GitHub Actions
Bar Chart Infografik vier aufsteigende grüne Balken Video Levels Short bis Pipeline

Code it. Edit it. Render it. Ship it. Launch ready motion without leaving your coding agent.

Joshua Xu, CEO und Mitgründer HeyGen – via LinkedIn

Hyperframes in NCA Projekten: was wir sehen

In Vibe Coding Beratungsprojekten bei Never Code Alone landen wir immer öfter beim gleichen Punkt: Marketing und Engineering wollen Videos automatisiert ausspielen, aber niemand will Kundendaten an US Cloud Anbieter geben. Hyperframes ist hier eine ehrliche Antwort. Die Tatsache, dass ausgerechnet HeyGen das Framework Open Source gestellt hat, obwohl sie selbst Cloud Video verkaufen, sagt viel über die Reife des Markts aus.

Wir ordnen Hyperframes ein, vergleichen es mit Alternativen wie Remotion oder klassischen Editoren, und helfen Teams beim Aufsetzen einer lokalen Render Pipeline auf eigenen Servern. Die Anbindung an lokale Ollama Modelle für Skripterzeugung oder Open WebUI als Frontend sind dabei naheliegende Erweiterungen. Auch Peekaboo für macOS Automation ergänzt das Setup, wenn KI Agenten zusätzlich Desktop Aktionen ausführen sollen.

Hyperframes ist selbst in unserer Production noch nicht erprobt. Wir bewerten es editorial, vergleichen, beraten Teams beim Einstieg und beim Vergleich mit anderen Optionen. Wer überlegt von einem Cloud Video Dienst weg zu migrieren oder von Remotion auf Apache 2.0 umzuziehen, findet im Vibe Coding Best Practices Guide und im KI Tools 2026 Glossar die passenden Bausteine.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
NCA Vibe Coding Consulting

Roland Golla ist Entwickler aus Leidenschaft – seit über 20 Jahren. Er hat hunderte Projekte begleitet, von Legacy-Refactoring bis KI-Integration. Bei Vibe Coding verbindet er das Beste aus beiden Welten: Die Geschwindigkeit von KI-generiertem Code mit der Qualität professioneller Softwareentwicklung. Kein Bullshit, keine Agentur-Floskeln – direkte Hilfe von jemandem, der selbst täglich im Code steckt.

E-Mail Kontakt

Häufige Fragen zu Hyperframes

Die folgenden Antworten beziehen sich auf Hyperframes Version 0.5.3 (Mai 2026) und das umliegende Ökosystem aus Skills, Plugins und Render Pipeline.

Was ist Hyperframes 2026?

Hyperframes ist ein Open Source Framework von HeyGen unter Apache 2.0 Lizenz, das HTML, CSS und JavaScript Kompositionen lokal zu MP4 Videos rendert. Es ist explizit für KI Coding Agenten gebaut und liefert Skills sowie Plugins für Claude Code, Cursor, OpenAI Codex und Gemini CLI mit. Aktuelle Version ist 0.5.3, veröffentlicht am 6. Mai 2026.

Wie installiere ich Hyperframes 2026?

Hyperframes braucht Node.js ab Version 22 und FFmpeg. Mit dem Befehl npx hyperframes init projektname legst du ein neues Projekt an, npx hyperframes preview öffnet die Komposition live im Browser und npx hyperframes render erzeugt die MP4 Datei. Die Skills für KI Agenten installierst du mit npx skills add heygen-com slash hyperframes.

Was kostet Hyperframes 2026?

Hyperframes ist komplett kostenlos. Apache 2.0 Lizenz heißt: kommerzielle Nutzung in jeder Größe, keine Per Render Fees, keine Sitzplatz Limits, keine Firmen Größen Schwellen. Im Vergleich dazu verlangt Remotion eine bezahlte Firmenlizenz oberhalb kleiner Team Größen. Hardware Kosten entstehen nur durch deinen eigenen Rechner.

Hyperframes versus Remotion 2026: was passt wann?

Hyperframes nutzt plain HTML ohne Build Step und ist Open Source unter Apache 2.0. Remotion nutzt React Komponenten mit Bundler und ist source available mit Lizenzpflicht ab kleinen Teams. Wer single machine rendert und HTML CSS Stack bevorzugt, ist mit Hyperframes besser dran. Wer parametrische Videos massiv parallel auf AWS Lambda rendern will, bleibt vorerst bei Remotion.

Warum hat HeyGen Hyperframes 2026 Open Sourced?

HeyGen verkauft Cloud Video Dienste und hat intern bereits Remotion produktiv eingesetzt. Mit Hyperframes definiert die Firma den agent-native Layer für lokale Video Produktion und etabliert einen Standard, der HTML als Format positioniert. Die Plugins für Claude Code, Cursor und Codex bringen HeyGen sichtbar in den Workflow jedes KI Entwicklers.

Bleiben Videos mit Hyperframes lokal und DSGVO konform?

Ja, das ist der Kernvorteil. Hyperframes rendert komplett auf deinem Rechner mit headless Chrome und FFmpeg. Keine Cloud Uploads, keine API Keys zu Drittanbietern, keine Telemetrie an externe Server. Wer lokale Hosting wie Conversis Duisburg nutzt, hat eine vollständig DSGVO konforme Render Pipeline.

Welche Animationen unterstützt Hyperframes?

Hyperframes hat Frame Adapter für GSAP, Anime.js, Web Animations API, CSS Keyframes, Lottie und Three.js. Library getriebene Animationen werden frame-genau seekbar, was bei Remotion nur eingeschränkt funktioniert. Shader Transitions für WebGL Effekte sind als separates Paket verfügbar.

Funktioniert Hyperframes mit Claude Code?

Ja, Hyperframes ist offiziell als Claude Code Plugin gelistet. Nach Installation der Skills stehen Slash Commands wie slash hyperframes, slash hyperframes-cli und slash hyperframes-media zur Verfügung. Der Agent kennt die Framework Konventionen und kann komplette Kompositionen aus einem Prompt generieren.

Welche Hardware brauche ich für Hyperframes?

Hyperframes läuft auf jedem System mit Chrome, FFmpeg und Node.js ab Version 22. Für 1080p Renderings reicht ein moderner Laptop. Bei 4K oder vielen parallelen Renderings hilft eine GPU oder ein dedizierter Render Server. Docker wird offiziell unterstützt, sodass CI Pipelines mit GitHub Actions oder GitLab CI funktionieren.

Kann Hyperframes Videos zu MOV oder WebM exportieren?

Ja, neben MP4 sind auch MOV und WebM als Output Formate möglich. Die Konfiguration läuft über FFmpeg Parameter, die im Composition Schema gesetzt werden. Damit deckt Hyperframes sowohl Social Media Formate wie 9 zu 16 für TikTok als auch klassische Broadcast Formate ab.

Welche Lizenz hat Hyperframes?

Apache 2.0, eine OSI anerkannte Open Source Lizenz. Du darfst Hyperframes kommerziell nutzen, forken, modifizieren und in eigene Produkte einbauen ohne Lizenzgebühren. Das ist der entscheidende Unterschied zu source available Lösungen wie Remotion, die ab bestimmten Teamgrößen eine bezahlte Lizenz erfordern.

Wie migriere ich von Remotion zu Hyperframes?

Hyperframes liefert ein Skill namens remotion-to-hyperframes mit, das eine Remotion Komposition in eine HyperFrames HTML Komposition übersetzt. Du installierst die Skills mit npx skills add heygen-com slash hyperframes, übergibst deinem Agent die Remotion Quelldateien und erhältst eine plain HTML Version, die du anschließend manuell verfeinern kannst.