HyperFrames CLI
全ての操作は npx hyperframes で行います。Node.js 22以上とFFmpegが必要です。
ワークフロー
- スキャフォールド —
npx hyperframes init my-video - 作成 — HTML構成を記述（
hyperframesスキルを参照） - リント —
npx hyperframes lint - ビジュアルインスペクション —
npx hyperframes inspect - プレビュー —
npx hyperframes preview - レンダリング —
npx hyperframes render
プレビューの前に必ずリントとインスペクションを実行してください。lintは、data-composition-idの欠落、トラックの重複、未登録のタイムラインを検出します。inspectは、レンダリングされた構成をヘッドレス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の後に使用します。特に吹き出し、カード、キャプション、タイトなタイポグラフィを含む構成に効果的です。以下を報告します:
- 最も近いビジュアルコンテナまたは吹き出しの外にはみ出したテキスト
- 自身の固定幅/高さボックスによってクリップされたテキスト
- 構成キャンバスの外にはみ出したテキスト
- クリッピングコンテナから逃げ出した子要素
エラーはレンダリング前に修正する必要があります。警告はエージェントのレビュー用に表示されます。--strictを追加すると警告でも失敗します。繰り返される静的の問題はデフォルトで折りたたまれ、LLMのコンテキストウィンドウ用にJSON出力をコンパクトに保ちます。出入りアニメーションのために意図的にオーバーフローさせる場合は、要素または祖先にdata-layout-allow-overflowをマークします。装飾要素を監査対象外にする場合は、data-layout-ignoreをマークします。
npx hyperframes layoutは、同じビジュアルインスペクションパスの互換性エイリアスとして引き続き利用可能です。
プレビュー
npx hyperframes preview # カレントディレクトリをサーブ
npx hyperframes preview --port 4567 # カスタムポート（デフォルト3002）
ファイル変更時にホットリロードします。ブラウザでスタジオが自動的に開きます。
プロジェクトをユーザーに返す際は、ソースのindex.htmlパスではなく、スタジオのプロジェクトURLを使用してください:
http://localhost:<port>/#project/<project-name>
プレビュー出力の実際のポートとプロジェクトディレクトリ名を使用します。例えば、codex-openai-videoでnpx hyperframes preview --port 3017を実行した後、http://localhost:3017/#project/codex-openai-videoを報告します。
index.htmlはソースコードのコンテキストとしてのみ扱ってください。実装ファイルとしてリンクすることは問題ありませんが、プロジェクトまたはプレビュー画面としてラベル付けしないでください。
レンダリング
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はレンダリング時間が倍増 |
--quality | draft, standard, high | standard | draftは反復用 |
--format | mp4, webm | mp4 | WebMは透明度をサポート |
--workers | 1-8 または auto | auto | それぞれChromeを起動 |
--docker | フラグ | オフ | 再現可能な出力 |
--gpu | フラグ | オフ | GPUアクセラレーションエンコーディング |
--strict | フラグ | オフ | リントエラーで失敗 |
--strict-all | フラグ | オフ | エラーと警告の両方で失敗 |
品質ガイダンス: 反復中はdraft、レビュー時はstandard、最終納品時はhigh。
文字起こし
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.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の欠落、メモリ不足。
## その他
```bash
npx hyperframes compositions # プロジェクト内の構成を一覧表示
npx hyperframes docs # ドキュメントを開く
npx hyperframes benchmark . # レンダリングパフォーマンスのベンチマーク