Was macht HyperFrames CLI?
Alles läuft über npx hyperframes. Erfordert Node.js >= 22 und FFmpeg.
Workflow
- Strukturieren —
npx hyperframes init my-video - Schreiben — HTML-Komposition verfassen (siehe die
hyperframes-Fähigkeit) - Prüfen —
npx hyperframes lint - Visuell inspizieren —
npx hyperframes inspect - Vorschau —
npx hyperframes preview - Rendern —
npx hyperframes render
Prüfe und inspiziere vor der Vorschau. lint erkennt fehlende data-composition-id, überlappende Tracks und nicht registrierte Timelines. inspect öffnet die gerenderte Komposition in Headless Chrome, sucht durch die Timeline und meldet Text, der aus Sprechblasen/Containern herausragt oder den Canvas verlässt.
Strukturieren
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 --example blank --tailwind # mit Tailwind v4 Browser-Laufzeit
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-Codier-Fähigkeiten. Verwende es, anstatt Dateien von Hand zu erstellen.
Bei Verwendung von --tailwind rufe die tailwind-Fähigkeit auf, bevor du Klassen oder Design-Tokens bearbeitest. Das Grundgerüst verwendet Tailwind v4.2 über die Browser-Laufzeit, nicht das Tailwind v3-Setup von Studio.
Prüfen
npx hyperframes lint # aktuelles Verzeichnis
npx hyperframes lint ./my-project # bestimmtes Projekt
npx hyperframes lint --verbose # Hinweise auf Info-Ebene
npx hyperframes lint --json # maschinenlesbar
Prüft 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 # inspiziert das gerenderte Layout über die Timeline
npx hyperframes inspect ./my-project # bestimmtes Projekt
npx hyperframes inspect --json # agentenlesbare Ergebnisse
npx hyperframes inspect --samples 15 # dichtere Timeline-Abtastung
npx hyperframes inspect --at 1.5,4,7.25 # explizite Heldenbild-Zeitstempel
Verwende dies nach lint und validate, insbesondere bei Kompositionen mit Sprechblasen, Karten, Untertiteln oder enger Typografie. Es meldet:
- Text, der den nächstgelegenen visuellen Container oder die Sprechblase verlässt
- Text, der durch seine eigene feste Breite/Höhe abgeschnitten wird
- Text, der den Kompositions-Canvas verlässt
- Kinder, die aus ihren Container-Ausschnitten entweichen
Fehler sollten vor dem Rendern behoben werden. Warnungen werden zur Überprüfung durch den Agenten angezeigt; füge --strict hinzu, um auch bei Warnungen abzubrechen. Wiederholte statische Probleme werden standardmäßig zusammengefasst, sodass die JSON-Ausgabe für LLM-Kontextfenster kompakt bleibt. Wenn ein Überlauf für eine Ein-/Ausgangsanimation beabsichtigt ist, markiere das Element oder den Vorfahren mit data-layout-allow-overflow. Wenn ein dekoratives Element nie überprüft werden soll, markiere 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 du ein Projekt an den Benutzer zurückgibst, verwende die Studio-Projekt-URL, nicht den Pfad zur index.html:
http://localhost:<port>/#project/<project-name>
Verwende den tatsächlichen Port aus der Vorschauausgabe und den Projektverzeichnisnamen. Beispiel: Nach npx hyperframes preview --port 3017 in codex-openai-video melde http://localhost:3017/#project/codex-openai-video.
Behandle index.html nur als Quellcode-Kontext. Es ist in Ordnung, sie als Implementierungsdatei zu verlinken, aber bezeichne sie nicht als Projekt oder Vorschau-Oberflä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 | Hinweise |
|---|---|---|---|
--output | Pfad | renders/name_timestamp.mp4 | Ausgabepfad |
--fps | 24, 30, 60 | 30 | 60fps verdoppelt Renderzeit |
--quality | draft, standard, high | standard | draft zum Iterieren |
--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 | Abbruch bei Lint-Fehlern |
--strict-all | Flag | aus | Abbruch bei Fehlern UND Warnungen |
--variables | JSON-Objekt | — | Überschreibe Variablenwerte, die in data-composition-variables deklariert sind |
--variables-file | Pfad | — | JSON-Datei mit Variablenwerten (Alternative zu --variables) |
--strict-variables | Flag | aus | Rendern bei nicht deklarierten Schlüsseln oder Typfehlern in --variables abbrechen |
Qualitätsrichtlinie: draft während der Iteration, standard für die Überprüfung, high für die finale Auslieferung.
Parametrisierte Renderings: Die Komposition deklariert ihre Variablen auf dem <html>-Root mit data-composition-variables — einem JSON-Array von Deklarationen ({id, type, label, default} pro Eintrag), das das Schema definiert. Skripte im Inneren lesen die aufgelösten Werte über window.__hyperframes.getVariables(). Das CLI --variables '{"title":"Q4 Bericht"}' ist ein JSON-Objekt, das nach ID die deklarierten Standardwerte für ein Rendering überschreibt; fehlende Schlüssel fallen durch, sodass dieselbe Komposition in der Entwicklungsvorschau und in der Produktion unverändert läuft. (Sub-Kompositions-Hosts können auch pro Instanz mit data-variable-values überschreiben — gleiche Objektform, bezogen auf einen Mount der Sub-Komposition. Siehe die hyperframes-Fähigkeit für das vollständige Muster.)
Asset-Vorverarbeitung
npx hyperframes tts, transcribe und remove-background erzeugen Assets (Erzähl-Audio, Wort-für-Wort-Transkriptionen, transparentes Video), die in eine Komposition eingefügt werden. Jedes lädt beim ersten Ausführen sein eigenes Modell herunter. Für die Sprachauswahl, Whisper-Modellregeln (die .en-übersetzt-Nicht-Englisch-Falle), die Wahl des Ausgabeformats (VP9 Alpha WebM vs. ProRes) und die TTS → Transkription → Untertitel-Kette rufe die hyperframes-media-Fähigkeit auf.
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 Arbeitsspeicher.
Sonstiges
npx hyperframes compositions # Kompositionen im Projekt auflisten
npx hyperframes docs # Dokumentation öffnen
npx hyperframes benchmark . # Render-Leistung messen