coleam00/hyperframes-ai-video-generation

HyperFrames CLI

Alles läuft über npx hyperframes. Erfordert Node.js >= 22 und FFmpeg.

Arbeitsablauf

1. Gerüst erstellen — npx hyperframes init my-video
2. Schreiben — HTML-Komposition erstellen (siehe Skill hyperframes)
3. Linten — npx hyperframes lint
4. Visuell inspizieren — npx hyperframes inspect
5. Vorschau — npx hyperframes preview
6. Rendern — npx hyperframes render

Linten und inspizieren Sie vor der Vorschau. lint erkennt fehlende data-composition-id, überlappende Tracks und nicht registrierte Timelines. inspect öffnet die gerenderte Komposition in headless Chrome, durchsucht die Timeline und meldet Text, der aus Blasen/Containern oder über die Zeichenfläche hinausragt.

Gerüst erstellen

npx hyperframes init my-video                        # interaktiver Assistent
npx hyperframes init my-video --example warm-grain   # Beispiel auswählen
npx hyperframes init my-video --video clip.mp4        # mit Videodatei
npx hyperframes init my-video --audio track.mp3       # mit Audiodatei
npx hyperframes init my-video --non-interactive       # Eingabeaufforderungen überspringen (CI/Agenten)

Vorlagen: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.

init erstellt die korrekte Dateistruktur, kopiert Medien, transkribiert Audio mit Whisper und installiert KI-Coding-Skills. Verwenden Sie es anstatt Dateien von Hand zu erstellen.

Linten

npx hyperframes lint                  # aktuelles Verzeichnis
npx hyperframes lint ./mein-projekt   # bestimmtes Projekt
npx hyperframes lint --verbose        # Info-Funde
npx hyperframes lint --json           # maschinenlesbar

Lintet index.html und alle Dateien in compositions/. Meldet Fehler (müssen behoben werden), Warnungen (sollten behoben werden) und Infos (mit --verbose).

Visuelle Inspektion

npx hyperframes inspect                 # gerendertes Layout über die Timeline inspizieren
npx hyperframes inspect ./mein-projekt  # bestimmtes Projekt
npx hyperframes inspect --json          # agentenlesbare Funde
npx hyperframes inspect --samples 15    # dichtere Timeline-Durchsuchung
npx hyperframes inspect --at 1.5,4,7.25 # explizite Hero-Frame-Zeitstempel

Verwenden Sie dies nach lint und validate, insbesondere bei Kompositionen mit Sprechblasen, Karten, Untertiteln oder enger Typografie. Es meldet:

• Text, der außerhalb des nächstgelegenen visuellen Containers oder der Blase liegt
• Text, der durch sein eigenes festgelegtes Breiten-/Höhenfeld abgeschnitten wird
• Text, der über die Kompositionsfläche hinausragt
• Kindelemente, die aus Clip-Containern entweichen

Fehler sollten vor dem Rendern behoben werden. Warnungen werden zur Überprüfung durch den Agenten angezeigt; fügen Sie --strict hinzu, um auch bei Warnungen abzubrechen. Wiederholte statische Probleme werden standardmäßig zusammengefasst, damit die JSON-Ausgabe für LLM-Kontextfenster kompakt bleibt. Wenn ein Überlauf für eine Ein-/Ausgangsanimation beabsichtigt ist, markieren Sie das Element oder den Vorfahren mit data-layout-allow-overflow. Wenn ein dekoratives Element nie geprüft werden soll, markieren Sie es mit data-layout-ignore.

npx hyperframes layout bleibt als Kompatibilitätsalias für denselben visuellen Inspektionsdurchlauf verfügbar.

Vorschau

npx hyperframes preview                   # aktuelles Verzeichnis bereitstellen
npx hyperframes preview --port 4567       # benutzerdefinierter Port (Standard 3002)

Hot-Reload bei Dateiänderungen. Öffnet das Studio automatisch im Browser.

Rendern

npx hyperframes render                                # Standard MP4
npx hyperframes render --output final.mp4             # benannte Ausgabe
npx hyperframes render --quality draft                # schnelle Iteration
npx hyperframes render --fps 60 --quality high        # endgültige Auslieferung
npx hyperframes render --format webm                  # transparentes WebM
npx hyperframes render --docker                       # byteidentisch

Flag	Optionen	Standardwert	Hinweise
--output	Pfad	renders/name_timestamp.mp4	Ausgabepfad
--fps	24, 30, 60	30	60fps verdoppelt Renderzeit
--quality	draft, standard, high	standard	draft für Iteration
--format	mp4, webm	mp4	WebM unterstützt Transparenz
--workers	1-8 oder auto	auto	Jeder startet Chrome
--docker	flag	aus	Reproduzierbare Ausgabe
--gpu	flag	aus	GPU-beschleunigte Kodierung
--strict	flag	aus	Bei Lint-Fehlern abbrechen
--strict-all	flag	aus	Bei Fehlern UND Warnungen abbrechen

Qualitätshinweis: draft während der Iteration, standard zur Überprüfung, high für die endgültige Auslieferung.

Transkription

npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt   # Vorhandene importieren
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json

Text-to-Speech

npx hyperframes tts "Text hier" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list  # Alle Stimmen anzeigen

Fehlerbehebung

npx hyperframes doctor       # Umgebung prüfen (Chrome, FFmpeg, Node, Arbeitsspeicher)
npx hyperframes browser      # Gebündelten Chrome verwalten
npx hyperframes info         # Versions- und Umgebungsdetails
npx hyperframes upgrade      # Nach Updates suchen

Führen Sie doctor zuerst aus, wenn das Rendern fehlschlägt. Häufige Probleme: fehlendes FFmpeg, fehlender Chrome, zu wenig Arbeitsspeicher.

Sonstiges

npx hyperframes compositions   # Kompositionen im Projekt auflisten
npx hyperframes docs           # Dokumentation öffnen
npx hyperframes benchmark .    # Renderleistung messen