HyperFrames – Open-Source-Framework nur 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 lernen
  • In Claude Code direkt per Slash-Befehle /hyperframes, /hyperframes-cli, /gsap aufrufbar
  • OpenAI-Codex-Plugin und Cursor-Plugin ebenfalls separat verfügbar
• Verwendung
  • Beschreiben, was man möchte: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Bestehende 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 Video-Editor nutzen:
    • "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 Einrichtung

  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # Vorschau im Browser (Live-Reload)  
  npx hyperframes render       # als MP4 rendern  
  

  • hyperframes init installiert das Skill automatisch, danach ist es jederzeit nutzbar
• 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 gut für automatisierte 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            # animiertes Chart  
  

• Mit dem Befehl hyperframes capture <url> wird eine vollständige Pipeline zum Erfassen von Websites und Umwandeln in Videos unterstützt
• Die zentralen Unterschiede zu Remotion sind das Arbeitsformat (HTML vs. React) und die Lizenz
  • HyperFrames: Apache 2.0 (OSI-zertifiziert) — uneingeschränkt kommerziell nutzbar, ohne Gebühren pro Rendering, Sitzplatzgrenzen oder Beschränkungen nach Unternehmensgröße
  • Remotion: quelloffene (source-available) Custom-Lizenz – für Unternehmen mit mehr als 3 Personen ist eine kostenpflichtige Unternehmenslizenz nötig
  • HyperFrames spielt index.html ohne Build-Schritt direkt ab, Remotion benötigt einen Bundler
  • Clock-basierte Animationen mit Bibliotheken wie GSAP, Anime.js oder Motion One sind in HyperFrames seekable 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.