HyperFrames CLI
すべての操作は npx hyperframes で実行します。Node.js 22以上とFFmpegが必要です。
ワークフロー
- スキャフォールディング —
npx hyperframes init my-video - 作成 — HTML Compositionを作成（
hyperframesスキルを参照） - リント —
npx hyperframes lint - ビジュアルインスペクション —
npx hyperframes inspect - プレビュー —
npx hyperframes preview - レンダリング —
npx hyperframes render
プレビューの前にリントとインスペクションを実行してください。lintは data-composition-id の欠落、トラックの重複、未登録のタイムラインを検出します。inspect はレンダリングしたCompositionをヘッドレスChromeで開き、タイムラインをスキャンして吹き出しやコンテナからはみ出したテキスト、キャンバス外へのあふれを報告します。
スキャフォールディング
npx hyperframes init my-video # インタラクティブウィザード
npx hyperframes init my-video --example warm-grain # サンプルを指定
npx hyperframes init my-video --video clip.mp4 # 動画ファイルを指定
npx hyperframes init my-video --audio track.mp3 # 音声ファイルを指定
npx hyperframes init my-video --non-interactive # プロンプトをスキップ（CI/エージェント向け）
テンプレート: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph。
init は適切なファイル構成を作成し、メディアをコピーし、Whisperで音声を文字起こしし、AIコーディングスキルをインストールします。手動でファイルを作成する代わりにこれを使ってください。
リント
npx hyperframes lint # カレントディレクトリ
npx hyperframes lint ./my-project # 特定のプロジェクト
npx hyperframes lint --verbose # 情報レベルの結果も表示
npx hyperframes lint --json # 機械可読形式
index.html と compositions/ 配下のすべてのファイルをリントします。エラー（修正必須）、警告（修正推奨）、情報（--verbose 時のみ）を報告します。
ビジュアルインスペクション
npx hyperframes inspect # レンダリングレイアウトをタイムライン全体で検査
npx hyperframes inspect ./my-project # 特定のプロジェクト
npx hyperframes inspect --json # エージェント可読形式
npx hyperframes inspect --samples 15 # より密なタイムラインスキャン
npx hyperframes inspect --at 1.5,4,7.25 # 明示的なキーフレームタイムスタンプ
lint と validate の後に使用してください。特に吹き出し、カード、キャプション、タイトなタイポグラフィを含むCompositionに効果的です。以下の項目を報告します：
- テキストが最も近いビジュアルコンテナまたは吹き出しの外にはみ出している
- テキストが自身の固定幅/固定高さのボックスでクリップされている
- テキストがCompositionキャンバスの外にはみ出している
- 子要素がクリッピングコンテナから逃げている
エラーはレンダリング前に修正する必要があります。警告はエージェントによるレビューのために表示されます。--strict を追加すると警告でも失敗します。繰り返しの静的な問題はデフォルトで折りたたまれ、LLMのコンテキストウィンドウのためにJSON出力がコンパクトに保たれます。エントランス/イグジットアニメーションで意図的にオーバーフローさせる場合は、要素またはその祖先に data-layout-allow-overflow をマークしてください。装飾要素を監査対象から外すには data-layout-ignore をマークしてください。
npx hyperframes layout は同じビジュアルインスペクションを行う互換性エイリアスとして引き続き利用可能です。
プレビュー
npx hyperframes preview # カレントディレクトリを配信
npx hyperframes preview --port 4567 # カスタムポート（デフォルト3002）
ファイル変更時にホットリロードされます。ブラウザでスタジオを自動的に開きます。
レンダリング
npx hyperframes render # 標準MP4
npx hyperframes render --output final.mp4 # 名前を指定
npx hyperframes render --quality draft # 高速イテレーション
npx hyperframes render --fps 60 --quality high # 最終出力
npx hyperframes render --format webm # 透過WebM
npx hyperframes render --docker # バイト一致
| フラグ | オプション | デフォルト | 備考 |
|---|---|---|---|
--output | パス | renders/名前_タイムスタンプ.mp4 | 出力パス |
--fps | 24, 30, 60 | 30 | 60fpsはレンダリング時間が2倍 |
--quality | draft, standard, high | standard | draftはイテレーション用 |
--format | mp4, webm | mp4 | WebMは透過をサポート |
--workers | 1-8 または auto | auto | 各ワーカーがChromeを起動 |
--docker | フラグ | off | 再現可能な出力 |
--gpu | フラグ | off | GPUアクセラレーションエンコード |
--strict | フラグ | off | リントエラーで失敗 |
--strict-all | フラグ | off | エラーと警告の両方で失敗 |
品質ガイダンス: イテレーション中は draft、レビューには standard、最終納品には high を使用してください。
文字起こし
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # 既存のSRTをインポート
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
テキスト読み上げ
npx hyperframes tts "ここにテキスト" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # すべての音声を表示
トラブルシューティング
npx hyperframes doctor # 環境をチェック（Chrome, FFmpeg, Node, メモリ）
npx hyperframes browser # バンドルされたChromeを管理
npx hyperframes info # バージョンと環境の詳細
npx hyperframes upgrade # アップデートを確認
レンダリングが失敗したら、まず doctor を実行してください。よくある問題: FFmpeg不足、Chrome不足、メモリ不足。
その他
npx hyperframes compositions # プロジェクト内のComposition一覧
npx hyperframes docs # ドキュメントを開く
npx hyperframes benchmark . # レンダリングパフォーマンスのベンチマーク