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 --example blank --tailwind # Tailwind v4ブラウザランタイム使用
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コーディングスキルをインストールします。手動でファイルを作成する代わりにこれを使用してください。
--tailwind を使用する場合は、クラスやテーマトークンを編集する前に tailwind スキルを呼び出してください。スキャフォールドはスタジオのTailwind v3セットアップではなく、ブラウザランタイム経由でTailwind v4.2を使用します。
リント
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/name_timestamp.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 # 既存の字幕をインポート
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
テキスト読み上げ（TTS）
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 # プロジェクト内のコンポジションを一覧表示
npx hyperframes docs # ドキュメントを開く
npx hyperframes benchmark . # レンダリングパフォーマンスのベンチマーク