HyperFrames CLI
Alles läuft über npx hyperframes. Erfordert Node.js >= 22 und FFmpeg.
Workflow
- Gerüst erstellen –
npx hyperframes init my-video - Schreiben – HTML-Komposition verfassen (siehe den
hyperframesSkill) - Linten –
npx hyperframes lint - Vorschau –
npx hyperframes preview - Rendern –
npx hyperframes render
Vor der Vorschau linten – erkennt fehlende data-composition-id, überlappende Tracks, nicht registrierte Timelines.
Gerüst erstellen
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-Programmier-Skills. Verwenden Sie dies 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 # 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 ausliefern
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 (Ausgabe automatisch in renders/)
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 Chrome |
--docker | Flag | aus | Reproduzierbare Ausgabe |
--gpu | Flag | aus | GPU-beschleunigte Kodierung |
--strict | Flag | aus | Fehler bei Lint-Fehlern |
--strict-all | Flag | aus | Fehler bei Fehlern UND Warnungen |
Qualitätsrichtlinie: draft während der Iteration, standard für die Ü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ühren Sie zuerst doctor aus, wenn das Rendern fehlschlägt. Häufige Probleme: fehlendes FFmpeg, fehlendes Chrome, zu wenig Speicher.
Fallstricke
--out Pfad muss ein Verzeichnis sein, kein Dateiname
npx hyperframes render --out renders/output.mp4 → ✗ Fehler: "Kein Verzeichnis"
npx hyperframes render → ✅ Ausgabe automatisch in renders/name_timestamp.mp4
Verwenden Sie --output (nicht --out), um einen benannten Dateipfad anzugeben.
index.html-Root-Timeline muss mit data-composition-id der Unterkomposition übereinstimmen
Wenn index.html nur einen data-composition-src-Verweis enthält (keinen Inline-Inhalt), benötigen Sie dennoch eine window.__timelines-Registrierung, die mit einer echten data-composition-id übereinstimmt. Beste Praxis: Registrieren Sie window.__timelines['<sub-comp-id>'] = gsap.timeline({paused:true}) – aber da Unterkompositionen ihre eigenen Timelines registrieren, wird der Skriptblock in index.html nur benötigt, um den Lint zu bestehen. Verwenden Sie die ID der Unterkomposition (nicht 'root').
Unterkomposition <div> benötigt data-start="0" und data-duration
Das <div data-composition-id="..."> innerhalb von <template> muss data-start="0" und data-duration="N" haben, sonst warnt der Lint und die Wiedergabe startet möglicherweise nicht.
Sonstiges
npx hyperframes compositions # Kompositionen im Projekt auflisten
npx hyperframes docs # Dokumentation öffnen
npx hyperframes benchmark . # Renderleistung benchmarken