HyperFrames – Open-Source-Framework für KI-Agenten zum Erstellen von Videos mit HTML

• Ähnlich wie Remotion lassen sich Videos allein mit HTML + CSS + GSAP erstellen und als MP4 rendern
• Ohne React oder eine proprietäre DSL ist die reine HTML-Datei selbst die Videokomposition, und index.html wird ohne Build-Schritt direkt abgespielt
• Optimiert für Workflows, in denen KI-Coding-Agenten wie Claude Code oder Codex HTML direkt schreiben
  • Mit npx skills add heygen-com/hyperframes kann der Agent Framework-Muster erlernen
  • In Claude Code ist ein direkter Aufruf über die Slash-Befehle /hyperframes, /hyperframes-cli, /gsap möglich
  • OpenAI-Codex-Plugin und Cursor-Plugin werden ebenfalls separat bereitgestellt
• Verwendungsweise
  • Beschreiben, was gewünscht ist: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Vorhandene Inhalte in Videos umwandeln:
    • "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
    • "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
    • "Turn this CSV into an animated bar chart race using /hyperframes."
  • Bestimmtes Format: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Iteration – den Agenten wie einen Videoeditor verwenden:
    • "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
    • "Add a lower third at 0:03 with my name and title."
• Manuelle Startmethode

  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # preview in browser (live reload)  
  npx hyperframes render       # render to MP4  
  

  • Da hyperframes init die Skills automatisch installiert, können sie danach jederzeit verwendet werden
• Mit dem Frame-Adapter-Muster lassen sich beliebige Animations-Runtimes wie GSAP, Lottie, CSS oder Three.js frei anbinden
• Deterministisches Rendering, das bei identischer Eingabe identische Ausgabe garantiert, eignet sich für Automatisierungs-Pipelines
• Katalog mit mehr als 50 vorgefertigten Blöcken und Komponenten (Shader-Transitions, Social Overlays, Datencharts usw.), installierbar mit npx hyperframes add <Blockname>

  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  

• Mit dem Befehl hyperframes capture <url> wird eine vollständige Pipeline unterstützt, die Websites erfasst und in Videos umwandelt
• Im Vergleich zu Remotion liegt der Hauptunterschied bei den Artefakten (HTML vs. React) und der Lizenz
  • HyperFrames: Apache 2.0 (OSI-zertifiziert) — vollständig kommerziell nutzbar, ohne Kosten pro Rendering, Sitzplatzobergrenzen oder Beschränkungen nach Unternehmensgröße
  • Remotion: quelloffene, aber source-available Custom-Lizenz – in Unternehmen mit mehr als 3 Personen ist eine kostenpflichtige Unternehmenslizenz erforderlich
  • HyperFrames spielt index.html ohne Build-Schritt direkt ab, Remotion benötigt einen Bundler
  • Bibliotheks-Clock-Animationen wie mit GSAP, Anime.js oder Motion One sind in HyperFrames seekbar und bleiben framegenau, während sie in Remotion beim Rendering nach Wall-Clock abgespielt werden
  • Remotion bietet produktionsreifes verteiltes Rendering über Lambda, HyperFrames unterstützt derzeit nur Rendering auf einer einzelnen Maschine
• Paketaufbau: CLI, core (Typen, Parser, Linter), engine (Puppeteer + FFmpeg-Capture), producer (vollständiges Rendering), studio (Browser-Editor), player (Web-Component), shader-transitions
• Apache-2.0-Lizenz, basiert auf TypeScript

[xguru]

Von Remotion inspiriert und fast identisch, aber ein Tool, das React entfernt und stattdessen komplett mit HTML arbeitet.
Im Moment nutzen wir es einfach weiter, weil wir ein kleines Unternehmen sind.
Remotion ist nur bis zu 3 Personen kostenlos, daher scheint HyperFrames für etwas größere Teams die bessere Wahl zu sein.