zroeschen/Video-Production-Factory

HyperFrames CLI

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

Workflow

1. Scaffold — npx hyperframes init my-video
2. Schreiben — HTML-Komposition verfassen (siehe hyperframes-Fähigkeit)
3. Linten — npx hyperframes lint
4. Vorschau — npx hyperframes preview
5. Rendern — npx hyperframes render

Linten vor der Vorschau – erkennt fehlende data-composition-id, überlappende Tracks, nicht registrierte Zeitleisten.

Scaffolding

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       # Abfragen überspringen (CI/Agenten)

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

init erstellt die richtige Dateistruktur, kopiert Medien, transkribiert Audio mit Whisper und installiert KI-Programmierhilfen. Verwende es, anstatt Dateien von Hand zu erstellen.

Linten

npx hyperframes lint                  # aktuelles Verzeichnis
npx hyperframes lint ./my-project     # bestimmtes Projekt
npx hyperframes lint --verbose        # Informationen auf Info-Ebene
npx hyperframes lint --json           # maschinenlesbare Ausgabe

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

Vorschau

npx hyperframes preview                   # aktuelles Verzeichnis bedienen
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 Ausgabedatei
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                       # byte-identisch

Flag	Optionen	Standard	Hinweise
--output	Pfad	renders/name_timestamp.mp4	Ausgabepfad
--fps	24, 30, 60	30	60fps verdoppelt die Renderzeit
--quality	draft, standard, high	standard	draft für Iterationen
--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 für die Ü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   # Vorhandenen importieren
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json

Text-to-Speech

npx hyperframes tts "Hier der Text" --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, Speicher)
npx hyperframes browser      # gebündeltes Chrome verwalten
npx hyperframes info         # Versions- und Umgebungsdetails
npx hyperframes upgrade      # nach Updates suchen

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

Sonstiges

npx hyperframes compositions   # Kompositionen im Projekt auflisten
npx hyperframes docs           # Dokumentation öffnen
npx hyperframes benchmark .    # Rendering-Leistung testen