Was macht 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 das
hyperframes-Skill) - Linten —
npx hyperframes lint - Visuell inspizieren —
npx hyperframes inspect - Vorschau —
npx hyperframes preview - Rendern —
npx hyperframes render
Linten und inspect vor der Vorschau ausführen. lint erkennt fehlende data-composition-id, überlappende Spuren und nicht registrierte Timelines. inspect öffnet die gerenderte Komposition in Headless Chrome, durchläuft die Timeline und meldet Text, der aus Sprechblasen/Containern oder über die Leinwand hinausragt.
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 --example blank --tailwind # mit Tailwind v4 Browser Runtime
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 richtige Dateistruktur, kopiert Medien, transkribiert Audio mit Whisper und installiert KI-Coding-Skills. Verwenden Sie es, anstatt Dateien von Hand zu erstellen.
Wenn Sie --tailwind verwenden, rufen Sie das tailwind-Skill auf, bevor Sie Klassen oder Theme-Tokens bearbeiten. Das Gerüst verwendet Tailwind v4.2 über die Browser-Runtime, nicht das Tailwind v3-Setup von Studio.
Linten
npx hyperframes lint # aktuelles Verzeichnis
npx hyperframes lint ./my-project # bestimmtes Projekt
npx hyperframes lint --verbose # Info-Level-Ergebnisse
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).
Visuell inspizieren
npx hyperframes inspect # gerendertes Layout über die Timeline inspizieren
npx hyperframes inspect ./my-project # bestimmtes Projekt
npx hyperframes inspect --json # agentenlesbare Ergebnisse
npx hyperframes inspect --samples 15 # dichterer Timeline-Durchlauf
npx hyperframes inspect --at 1.5,4,7.25 # explizite Heldenbild-Zeitstempel
Verwenden Sie dies nach lint und validate, insbesondere bei Kompositionen mit Sprechblasen, Karten, Untertiteln oder enger Typografie. Es meldet:
- Text, der sich außerhalb des nächstgelegenen visuellen Containers oder der Sprechblase erstreckt
- Text, der durch seine eigene Box mit fester Breite/Höhe abgeschnitten wird
- Text, der sich außerhalb der Kompositionsleinwand erstreckt
- Kinder, die aus abschneidenden Containern entkommen
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 fehlzuschlagen. Wiederholte statische Probleme werden standardmäßig zusammengefasst, sodass die JSON-Ausgabe kompakt für LLM-Kontextfenster bleibt. Wenn ein Überlauf für eine Ein-/Aus-Animation beabsichtigt ist, markieren Sie das Element oder den Vorfahren mit data-layout-allow-overflow. Wenn ein dekoratives Element nie überprü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.
Wenn Sie ein Projekt an den Benutzer zurückgeben, verwenden Sie die Studio-Projekt-URL, nicht den Pfad der Quell-index.html:
http://localhost:<port>/#project/<project-name>
Verwenden Sie den tatsächlichen Port aus der Vorschauausgabe und den Projektverzeichnisnamen. Melden Sie zum Beispiel nach npx hyperframes preview --port 3017 in codex-openai-video:
http://localhost:3017/#project/codex-openai-video.
Behandeln Sie index.html nur als Quellcode-Kontext. Es ist in Ordnung, sie als Implementierungsdatei zu verlinken, aber bezeichnen Sie sie nicht als das Projekt oder die Vorschauoberfläche.
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 | Anmerkungen |
|---|---|---|---|
--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 fehlschlagen |
--strict-all | Flag | aus | Bei Fehlern UND Warnungen fehlschlagen |
Qualitätshinweis: draft beim Iterieren, 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
Problembehebung
npx hyperframes doctor # Umgebung prüfen (Chrome, FFmpeg, Node, Arbeitsspeicher)
npx hyperframes browser # gebündeltes Chrome verwalten
npx hyperframes info # Version und Umgebungsdetails
npx hyperframes upgrade # auf Updates prüfen
Führen Sie zuerst doctor aus, wenn das Rendern fehlschlägt. Häufige Probleme: fehlendes FFmpeg, fehlendes Chrome, wenig Arbeitsspeicher.
Sonstiges
npx hyperframes compositions # Kompositionen im Projekt auflisten
npx hyperframes docs # Dokumentation öffnen
npx hyperframes benchmark . # Render-Leistung benchmarken