Early Access sichern →
Setup-Guide · Hyperframes für Claude Code · Mai 2026

Claude jetzt mit Hyperframes verbunden.

Ich baue gerade eine Community für alle, die Claude Code richtig lernen wollen. Trag dich ein für Early Access.

Erst die Schritte ansehen
Schritt für Schritt · Live seit 17. April 2026

In drei Schritten zu fertigen Videos aus dem Terminal.

HeyGen hat Hyperframes als komplett open source Plugin für Claude Code veröffentlicht. Apache 2.0, kein API-Key, läuft komplett lokal. Du schreibst HTML, Claude rendert MP4, mit Motion Graphics, Captions, Audio-Sync und Animationen aus zwölf Skill-Bibliotheken.

01

Voraussetzungen

Claude Code + Node.js

Hyperframes läuft komplett lokal. Du brauchst Claude Code im Terminal und Node.js. Beim ersten Start lädt Hyperframes einen Headless-Browser nach, der die HTML-Compositions als MP4 rendert. Kein Cloud-Account, kein API-Key, keine Credits.

Hyperframes Open Source, Apache 2.0 Lizenz, von HeyGen released am 17.04.2026.
Claude Code Pro, Max, Team oder Enterprise. CLI im Terminal.
Node.js Version 20 oder neuer. Über nvm oder homebrew installierbar.
Speicherplatz Etwa 600 MB für den Render-Browser, einmalig beim ersten Render.
Kosten Null. Render und Preview laufen lokal auf deinem Rechner.
Tipp: wenn du noch nie mit Hyperframes gearbeitet hast, fang mit dem Default-Template an. Das macht dir der Init-Befehl in Schritt drei automatisch.
02

Plugin installieren

Zwölf Skills mit einem Befehl

Hyperframes wird über das Skills-System in Claude Code installiert. Ein Befehl, und Claude bekommt zwölf neue Slash-Commands: für Compositions, CLI, Asset-Pipeline, GSAP-Animationen, Lottie, Three.js und mehr.

Befehl im Terminal
$ npx skills add heygen-com/hyperframes
  1. Den Befehl ausführen. Skills landen unter ~/.claude/skills/.
  2. Claude Code einmal neu starten, damit die Skills geladen werden.
  3. Im Chat /help tippen und nach Hyperframes-Befehlen suchen.
Welche Slash-Commands jetzt da sind
/hyperframesHTML-Compositions, Captions, TTS und Marker-Highlights schreiben oder ändern.
/hyperframes-cliDev-Loop: init, lint, inspect, preview, render, doctor.
/hyperframes-mediaAsset-Pipeline: TTS via Kokoro, Whisper-Transkripte, Hintergrund-Removal.
/hyperframes-registryFertige Blocks und Components per hyperframes add nachziehen.
/website-to-hyperframesURL erfassen, daraus ein komplettes Video bauen.
/gsap · /animejs · /lottie · /threeAnimationen mit den vier wichtigsten Engines, alle seek-bar.
Plus /tailwind für Tailwind v4 Browser-Runtime-Styles und /css-animations, /waapi für Web Animations. Alles wird nur geladen, wenn du den Skill explizit nutzt, kein Kontext-Bloat.
03

Erste Composition rendern

Init, Dev, Render

Jetzt baust du dein erstes Video. Init-Befehl legt das Projekt an, der Dev-Server zeigt dir die Composition im Browser, Render schreibt eine MP4. Drei Befehle, ein fertiger Clip.

Projekt anlegen
$ npx hyperframes init mein-erstes-video
  1. In das neue Projekt-Verzeichnis wechseln: cd mein-erstes-video
  2. Claude Code im Projekt starten. Du siehst eine index.html und einen compositions/-Ordner mit Beispielen.
  3. Im Chat tippen: „Bau mir mit Hyperframes ein 10-Sekunden-Intro mit dem Titel Mein Video, dunkler Hintergrund, weiße Serif-Headline, sanftes Fade-In."
  4. Claude editiert die Compositions per /hyperframes Skill.
Dev-Server starten (zeigt Live-Preview im Browser)
$ npm run dev
MP4 rendern
$ npm run render

Output landet in out/main.mp4. Beim ersten Render lädt Hyperframes einen Headless-Chromium nach (etwa 600 MB, einmalig). Danach rendert jedes Video direkt.

Fehler beim Render? npx hyperframes doctor checkt Node-Version, Browser-Install und Composition-Validierung. Für detaillierte Logs npx hyperframes lint --verbose.
SKAILE Community · Early Access

Ich baue gerade eine Community für alle, die Claude Code richtig lernen wollen, von Setups bis Video-Pipelines. Workshops, Q&A, alle Guides an einem Ort. Trag dich ein für Early Access.

Master-Prompt · Komplettes Video

Eine Anweisung, ein fertiger Clip.

Sag Claude was für ein Video du brauchst, gib ihm das Thema und die Tonalität. Er schreibt das Skript, generiert die Voiceover-Spur, transkribiert sie für saubere Captions, baut die Motion-Graphics und rendert das fertige MP4. Alles in einer Session.

1
Konzept und Skript
Schreib mir ein 30-Sekunden-Skript für ein LinkedIn-Reel zum Thema „Claude Code in der Buchhaltung". Tonalität: pragmatisch, anti-guru. Hook in den ersten zwei Sekunden, dann drei konkrete Vorteile, am Ende ein CTA.
2
Voiceover generieren · Kokoro TTS
Nimm das Skript und generier mit Hyperframes-Media eine saubere TTS-Spur in Kokoro. Männliche Stimme, ruhig, ohne übertriebene Modulation. Speicher als audio/voiceover.mp3.
3
Transkript für Captions · Whisper
Lass Hyperframes-Media die Voiceover-Spur per Whisper auf Wort-Ebene transkribieren. Daraus baust du synced Captions im Bottom-Third, weiße Sans-Serif mit dunklem Schatten, ein Wort pro Frame markiert.
4
Motion-Graphics · Title Cards plus Lower Thirds
Bau in der index.html eine Title-Card für die ersten drei Sekunden mit dem Reel-Titel, dann drei Lower-Thirds, je einer pro Vorteil. GSAP-Fade-In, kein Bounce, alles im SKAILE-Stil dunkel mit Coral-Accent.
5
Lint und Render
Lauf einmal npm run check zum Linten und Validieren, fix gefundene Issues. Dann npm run render. Das MP4 in 1080p Hochkant landet in out/main.mp4. Wenn alles gut ist, gleich npm run publish für einen shareable Link.

Output · 30-Sekunden-Reel · Voiceover · Captions · Motion-Graphics · alles aus einer Composition

Was Hyperframes für dich macht

Vier Bausteine, ein Render.

Motion Graphics
Title Cards · Lower Thirds · Callouts

Logo-Reveals, animierte Headlines, Stats die ins Bild fliegen, Pfeile die auf Details zeigen. Du beschreibst das Motion und Claude schreibt den HTML-CSS-Code. Sek-genaues Timing über data-time Attribute, frame-akkurates Rendering.

Captions & TTS
Kokoro · Whisper · Synced

Voiceover lokal mit Kokoro generieren, dann per Whisper Wort-für-Wort transkribieren. Captions landen automatisch synchron im Bild, mit Highlight-Animation auf dem aktuellen Wort. Perfekt für Social-Reels, Tutorials, Erklärclips.

Animationen
GSAP · Anime.js · Lottie · Three.js

Vier Animation-Engines aus einer Composition heraus, alle pause-bar und seek-bar. GSAP für Timelines, Anime.js für leichte Tweens, Lottie für After-Effects-Exports, Three.js für 3D-Scenes. Plus CSS-Keyframes und Web-Animations-API für simple Sachen.

Audio-Reactive
Web Audio API · Marker

Animationen die zur Voiceover-Spur reagieren: Balken die auf Bass schlagen, Headlines die mit Beats erscheinen, Frequenzkurven die hinter dem Text laufen. Marker-Highlights für Hervorhebungen genau zum richtigen Wort.

Das Wichtigste
Community · Early Access

Werde Teil der SKAILE Community.

Ich baue gerade eine Community für alle, die Claude Code richtig lernen wollen. Workshops, Q&A, alle Skills und Magic-Prompts an einem Ort. Trag dich ein für Early Access.