chmonitor/chmonitor

HyperFrames — ここから始めてください

HyperFrames は HTML から動画をレンダリングします。コンポジションとは、DOM が data-* 属性でタイミングを宣言し、アニメーションのランタイムがシーク可能で、メディア再生がフレームワークによって制御される HTML ファイルです。完全なオーサリング契約は /hyperframes-core にあります。コンポジション HTML を書く前に、それを読んでください。

以下は、機能マップ（必要に応じてロードされるドメインスキル）と、インテントルーター（「動画を作って」というリクエストに対してワークフローを選択するためのもの）です。

機能マップ — ドメインスキル

必要に応じてロードするアトミックな機能です。完全な動画ワークフローではありません。「動画を作って」という場合は、以下のインテントルーターを使用してください。

やりたいこと	スキル
HTML コンポジションの作成/編集 — data-* 契約、クリップ、トラック、サブコンポジション、変数	/hyperframes-core
アニメーション — アトミックモーション、シーンブループリント、トランジション、ランタイムアダプター（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）	/hyperframes-animation
クリエイティブディレクション — frame.md / design.md、パレット、タイポグラフィ、ナレーション、ビート計画、オーディオリアクティブ	/hyperframes-creative
メディア — TTS ナレーション、BGM、文字起こし、背景除去、キャプション	/hyperframes-media
メディア解決 — HeyGen カタログから BGM、SE、画像、アイコンを見つけて .media/ に固定し、マニフェストで追跡する	/media-use
CLI 開発ループ — 初期化、lint、バリデーション、検査、プレビュー、レンダリング、公開、修復	/hyperframes-cli
レジストリブロック/コンポーネントのインストール (hyperframes add)	/hyperframes-registry

---

インテントルーティング — ワークフローの選択

このセクションはトップレベルのワークフローのみを認識します。内部参照や上記のドメインスキルはロードしません。

ルーティング前 — 仕様ではなく入力を確認する

ルーティングでは、動画が何についてのものか、つまりその入力と主題を知る必要があります。それが指定されていない場合（「私たちの製品についての動画を作って」とだけ言って、URL、製品、トピック、アセットがない場合）、ワークフローに入る前に質問してください。ワークフローを決定することがルーティングの決定です。質問は最大2つです。

• 入力 — 製品（URL / 概要）、一般的なWebサイト、GitHub PR、説明するトピック、または既存のトーキングヘッド動画？

仕様のデフォルト — 状態を伝え、質問しない（ルートを変更することはありません）：アスペクト比は 16:9（9:16 は TikTok / Reels / Shorts など、縦長の配信先が明確な場合のみ使用）；ナレーション/キャプションの 言語 = ユーザーの言語。選択されたワークフローは、最初のステップで独自の詳細を再確認します。

ワークフロー早見表

ワークフロー	使用するケース
/product-launch-video	製品のマーケティング/ローンチ/プロモーション — URL、概要、またはスクリプトから（サイト名のみが指定されている場合でも）
/website-to-video	一般的なWebサイトを動画に変換 — サイトツアー、ポートフォリオ/ランディングページの紹介、サイトのビジュアルからのソーシャルクリップ
/faceless-explainer	テキストからトピック/コンセプトを説明 — 製品もURLもなし；すべてのビジュアルは LLM が生成
/pr-to-video	GitHub PR / コード変更 → チェンジログ/機能紹介/修正/リファクタリング解説
/embedded-captions	既存のトーキングヘッド動画にキャプション/字幕を追加（映像はそのまま）
/talking-head-recut	既存のトーキングヘッド動画をデザインされたグラフィックオーバーレイでパッケージ化 — ローワーサード、データコールアウト、キネティックタイトル、プルクォート
/motion-graphics	短く、ナレーションなしの、デザイン主導のモーショングラフィック — キネティックタイポグラフィ、統計/チャート、ロゴスティング、ローワーサードオーバーレイ
/music-to-video	音楽トラック → ビート同期動画 — リリックビデオ、スライドショー、またはキネティックプロモーション；音楽がペーシングを駆動
/slideshow	プレゼンテーション/ピッチデッキ/インタラクティブデッキ — 個別のスライド、フラグメント、分岐、ホットスポット；出力はナビゲート可能なデッキ、レンダリング動画ではない
/general-video	その他すべて — 長めの作品や複数シーンの作品、静的ループ/ポスター、カスタムコンポジション
/remotion-to-hyperframes	既存の Remotion (React) コンポジションを HyperFrames に移植（移行、作成ではない）

曖昧さ回避（混乱しやすい場合のみ）：

• モーション優先＆ナレーションなし（約10秒未満、モーション自体がメッセージ）→ /motion-graphics、入力は問わない。
• URL またはスクリプト — 特定の製品をマーケティング（サイト名のみの場合でも）→ /product-launch-video；一般的な非製品サイト → /website-to-video；GitHub PR リンク → /pr-to-video；製品/サイトなしでコンセプトを説明 → /faceless-explainer。製品かトピックか、ローンチか一般サイトかが本当に不明な場合 → 1つ質問する。
• 既存の映像 — プレーンな音声の字幕 → /embedded-captions；デザインされたオーバーレイカード → /talking-head-recut。どちらも映像自体は編集しない（タイミング変更/色変更/フレーム変更/順序変更/オーディオ編集は NLE 編集であり、範囲外）。
• 音楽トラックが入力（オーディオファイル、またはオーディオを抽出するための動画）でナレーションなし → /music-to-video — 音楽のビート/エネルギーがペーシングを駆動。（ナレーション付きの作品は、上記の入力マッチングワークフローに従います。/motion-graphics は音楽駆動ではない短いナレーションなしモーション用です。）
• プレゼンテーション/ピッチデッキ/インタラクティブデッキ（個別のスライド、ナビゲーション、プレゼンターモード）→ /slideshow — 出力はナビゲート可能なデッキであり、レンダリング動画ではありません。明示的に「スライドショー」と要求された場合は直接進みます。関連するトリガー（「デッキ/スライド/プレゼンテーション/このページを変換」）がある場合、/slideshow はオーサリング前にスライドショーであることを確認し、そうでない場合は適切な非スライドショーワークフローに切り替えます。
• 長さは目安であり、絶対的な条件ではない — 意図がワークフローを選択します。作品が明らかに約3分より長い場合、または静的/ループ/カスタム形式の場合にのみ /general-video に進みます。

マッチしたワークフローがインストールされていない場合

ワークフローを選択したら、それが実際に利用可能かどうかを確認してください。マッチしたワークフロースキルがインストールされていない場合、推測に頼らず、まずインストールするようにユーザーに伝えてください。

• このワークフローのみの場合： npx skills add heygen-com/hyperframes --skill <ワークフロー名>（例：--skill pr-to-video — ベース名で、先頭の / は不要）。
• すべてのワークフローを一度に： npx skills add heygen-com/hyperframes --all（コア + すべてのワークフロー、ピッカーをスキップ）。

ユーザーが実行した後、ワークフローのスキルを読み直して続行してください。

スキルを最新に保つ

HyperFrames スキルはバージョン管理されています。npx hyperframes init は、インストールされているスキルを GitHub 上の最新バージョンと照合し、最新でないものや不足しているものがあれば、完全なセットをインストール/更新します。これにより、新しく初期化されたプロジェクトは常に完全で最新のセットを持つことになります（最新のプロジェクトで init を再実行しても何も起こりません）。このチェックは短い GitHub ラウンドトリップです。オフライン（またはレート制限）の場合は、短いタイムアウト後にインストールにフォールバックするため、init がネットワークの不調でハードフェイルすることはありません。init --skip-skills で完全に無効にできます。

タスクが予期しない動作をする場合、または長時間のビルドの前に、インストールされているスキルが最新であることを確認してください。

• 確認： npx hyperframes skills check（--json を追加すると、機械可読な結果が得られます。最新でないものや不足しているものがあれば、非ゼロで終了します）。
• 更新： npx hyperframes skills update — 完全なセットを最新バージョンにプルし、まだ存在していないものをインストールします（init のインストールステップと同じ）。

CLI は、render / lint / validate の実行時に古いスキルを検出すると、1行のリマインダーを表示します。

ワークフローの詳細

/product-launch-video

• 入力： マーケティング対象の製品 — (a) 製品 URL（ヘッドレス Chrome でクロールしてアセットとブランドトークンを取得）、(b) 製品のサイト名が記載されたスクリプト/概要（リンクがなくても PLV が解決してクロールします。ユーザーがオプトアウトしない限り）、または (c) サイトが特定できない/「スクレイピングしない」スクリプト（キャプチャなしモード — パレットとデザインシステムを提供するスタイルプリセットを選択）。提供されたスクリプトは、逐語的なナレーションとして使用することも、シーンごとに再構成することもできます。PLV が質問します。
• 出力： 製品ローンチ/SaaS プロモーションを HyperFrames コンポジションとして → MP4。（最適な長さ 30〜90秒）。
• トリガー： 「Xのローンチ動画」、「当サイトのプロモーション」、「私のSaaSを1分で説明」、「スクリプトを60秒のプロモに」、「テキストのみのローンチ動画、スクレイピングしないで」。

/website-to-video

• 入力： 動画に変換する一般的なWebサイト/URL — 製品ローンチではなく、サイト自体の動画が目的。ヘッドレス Chrome でキャプチャし、実際のスクリーンショットとブランドアセットを取得。
• 出力： サイトのビジュアルから構築されたサイトツアー/ポートフォリオ/ランディングページ紹介/ソーシャルクリップ → MP4。
• トリガー： 「このWebサイトを動画に変換」、「 からのサイトツアー」、「当社ホームページからのソーシャルクリップ」、「URLだけあるので何か作って」。

/faceless-explainer

• 入力： 任意のテキスト — トピック、記事、メモ — を説明するもの。マーケティング対象の製品やキャプチャするサイトはありません。（/product-launch-video からフォーク。ヘッドレス Chrome は使用しません）。
• 出力： 顔出しなし解説動画 → MP4。すべてのビジュアルはシーンごとに LLM が生成（タイポグラフィ/抽象/図解/データ可視化）。pin-and-paper プリセットが同梱されます。（最適な長さ 30〜90秒）。
• トリガー： 「Xについての顔出しなし解説」、「DNSの仕組みを動画で説明」、「この記事を解説動画に」、「私のメモから解説動画を」。

/pr-to-video

• 入力： GitHub プルリクエスト — PR URL、owner/repo#N 参照、または「このPR」 — gh CLI を介して読み取られます（スクレイピングするサイトではありません）。
• 出力： コード変更解説（チェンジログ/機能紹介/修正/リファクタリング）→ MP4 — diff ハイライト、before/after、ファイルツリー＋影響シーン。（最適な長さ 30〜90秒）。
• トリガー： 「このPRについての動画を作って」、「PR #1187 をチェンジログ動画に」、「github.com/org/repo/pull/123 からリリースノート動画を」。

/embedded-captions

• 入力： キャプションを追加する既存のトーキングヘッド動画（MP4） — 実際の映像であり、URL や概要ではありません。ローカルで文字起こし（Whisper、API キー不要）し、被写体がキャプションを隠せるようにマット処理（RVM）されます。
• 出力： 同じ映像はそのままで、キャプションレイヤーが追加されます — 標準（逐語的なローワーサードレール＋被写体の後ろに埋め込まれたクライマックス）またはシネマティック（すべてのキャプションが被写体の後ろに合成）。任意の長さ。
• トリガー： 「この動画にキャプション/字幕を追加」、「被写体の後ろにキャプション」、「私のクリップにシネマティックキャプション」。

/talking-head-recut

• 入力： オンスクリーングラフィックでパッケージ化する既存のトーキングヘッド/インタビュー/ポッドキャスト動画（MP4） — 実際の映像。ローカルで文字起こし（Whisper）。クリップはそのまま、下で完全に再生されます。
• 出力： 同じ映像に、文字起こしに同期したタイミングのグラフィックオーバーレイカード — キネティックタイトル、ローワーサード、データコールアウト、プルクォート、サイドパネル、ピクチャーインピクチャー — が追加されます。任意の長さ。
• トリガー： 「この動画をパッケージ化」、「私のトークにグラフィックオーバーレイ/ローワーサード/データコールアウトを追加」、「このインタビューをグラフィックパッケージ版に」。

/motion-graphics

• 入力： モーションがメッセージである、短くデザイン主導のモーショングラフィック — 通常約10秒未満、ナレーションなし。ジャンル：キネティックタイポグラフィ、統計/数字のカウントアップ、チャートヒット、ロゴスティング、ローワーサード/オーバーレイ、または検索駆動のページ/ツイート/ヘッドラインショット。
• 出力： 短いモーショングラフィック → MP4 または透明オーバーレイ（アルファ WebM/MOV）（ローワーサード/コールアウト用）。
• トリガー： 「8秒のロゴスティング」、「この統計をアニメーション化」、「キネティックタイプのイントロ」、「このツイートをモーショングラフィックに」、「透明なローワーサードオーバーレイ」。

/music-to-video

• 入力： 音楽トラック — オーディオファイル、またはオーディオを抽出するための動画 — ナレーションなし、Webサイトのキャプチャなし。オプションで、ユーザーが提供する画像/動画を織り交ぜます。トラックは一度分析され、動画全体の基盤となる決定論的なビート/エネルギーマップ（audiomap.json）が生成されます。
• 出力： ビート同期 HyperFrames コンポジション → MP4。音楽がペーシングを駆動します。タイポグラフィとテンプレートが基本（ゼロアセットでも完全な動画になります）。提供されたメディアは同じビートグリッド上にカットされます（ビートカット/ケンバーンズ）。ジャンル（リリックビデオ、スライドショー、キネティックプロモーション）はフレームごとの選択から生まれます。パイプラインはそれに応じて分岐しません。
• トリガー： 「この曲の動画を作って」、「このトラックからビート同期動画を」、「リリックビデオ」、「この音楽を動画に」、「ミュージックビジュアライザー/このビートに合わせたキネティックプロモーション」。

/slideshow

• 入力： オーサリングするプレゼンテーション/ピッチデッキ/インタラクティブデッキ。

...