HyperFrames CLI

Was macht HyperFrames CLI?

Alles wird über npx hyperframes ausgeführt. Erfordert Node.js >= 22 und FFmpeg.

Workflow

1. Scaffold – npx hyperframes init my-video
2. Schreiben – HTML-Komposition erstellen (siehe Skill hyperframes)
3. Linten – npx hyperframes lint
4. Vorschau – npx hyperframes preview
5. Rendern – npx hyperframes render

Vor dem Rendern linten – erkennt fehlende data-composition-id, überlappende Tracks, nicht registrierte Timelines.

Scaffolding

npx hyperframes init my-video                        # interaktiver Assistent
npx hyperframes init my-video --example warm-grain   # ein 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       # ohne Eingabeaufforderungen (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-Coding-Skills. Verwende es, anstatt Dateien manuell 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           # maschinenlesbar

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 bereitstellen
npx hyperframes preview --port 4567       # benutzerdefinierter Port (Standard 3002)

Lädt bei Dateiänderungen automatisch neu. Ö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        # finale 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 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 einen Chrome
--docker	Flag	aus	Reproduzierbare Ausgabe
--gpu	Flag	aus	GPU-beschleunigte Kodierung
--strict	Flag	aus	Abbruch bei Lint-Fehlern
--strict-all	Flag	aus	Abbruch bei Fehlern UND Warnungen

Qualitätshilfe: draft während der Iteration, standard zur Überprüfung, high für die finale 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, Speicher)
npx hyperframes browser      # gebündelten Chrome verwalten
npx hyperframes info         # Version und Umgebungsdetails
npx hyperframes upgrade      # nach Updates suchen

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

Sonstiges

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