HyperFrames — ここから始める
HyperFrames は HTML からビデオをレンダリングします——コンポジションは、data-* 属性でタイミングを宣言する DOM を持つ 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、効果音、画像、アイコンを .media/ にマニフェストトラッキング付きで検索・固定 | /media-use |
| CLI 開発ループ — 初期化、リント、検証、検査、プレビュー、レンダリング、公開、診断 | /hyperframes-cli |
レジストリブロック / コンポーネントのインストール (hyperframes add) | /hyperframes-registry |
インテントルーティング — ワークフローを選択する
このセクションはトップレベルのワークフローのみを認識します。内部参照や上記のドメインスキルは読み込みません。
ルーティング前 — 仕様ではなく入力を確認する
ルーティングには、動画の内容、つまり入力と主題を知る必要があります。それが未指定の場合（URL、製品、トピック、アセットがない「私たちのものについての動画を作って」）、ワークフローに入る前に質問してください——ワークフローへのコミット自体がルーティングの決定です。最大2つの質問：
- 入力 — 製品（URL/ブリーフ）、一般的なウェブサイト、GitHub PR、説明するトピック、または既存のトーキングヘッド動画？
仕様のデフォルト — 質問せずに伝える（ルートを変更することはありません）：アスペクト比 16:9（9:16 は TikTok / Reels / Shorts などの指定された縦型配信先のみ）；ナレーション/キャプションの 言語 = ユーザーの言語。選択されたワークフローは、最初のステップで独自の詳細を再確認します。
ワークフロー早見表
| ワークフロー | 使用ケース |
|---|---|
/product-launch-video | 製品の販売（SaaS、アプリ、企業/製品サイト） — URL、ブリーフ、スクリプトから プロモ動画 へ。商用URLのデフォルト（サイト名のみの場合も）。 |
/website-to-video | サイト自体の紹介 — サイトのスクリーンショットを使用したツアー/ショーケース。非商用サイト（ポートフォリオ、ブログ、ドキュメント、個人、イベント）、またはユーザーがプロモではなくツアーを希望する場合。 |
/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 またはスクリプト — 一つ質問：そのサイトは製品を販売していますか？ はい（SaaS/アプリ/製品/企業サイト）→
/product-launch-video— プロモ動画。商用URLのデフォルト（サイト名のみの場合も）。いいえ、またはユーザーがサイトをそのまま見せたい場合（ポートフォリオ/ブログ/ドキュメント/個人/イベント）→/website-to-video— ツアー。GitHub PR リンク →/pr-to-video；製品やサイトのない概念 →/faceless-explainer。 - 既存の映像 — プレーンな音声の字幕 →
/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 されたプロジェクトは常に完全で最新のセットを持ちます（最新のプロジェクトで init を再実行しても何も起こりません）。このチェックは迅速な GitHub ラウンドトリップです；オフライン（またはレート制限）の場合、短いタイムアウト後にインストールにフォールバックするため、init がネットワークの問題でハードフェイルすることはありません。作成ワークフローは init でスキャフォールドするため、新しいプロジェクトを開始するたびにこのチェックが実行され、古いスキルがある場合は GitHub から最新のスキルをプルします。--skip-skills フラグは現在無効化されています（skills.sh レジストリが追いつくまでの一時的な措置）：渡してもチェックはスキップされないため、すべての init が GitHub をチェックします。CI/テストは HYPERFRAMES_SKIP_SKILLS=1 環境変数でオプトアウトします。
タスクが予期せぬ動作をする場合、または長時間のビルドの前に、インストールされているスキルが最新であることを確認してください：
- チェック：
npx hyperframes skills check（機械可読な結果を得るには--jsonを追加；何かが古い または不足している 場合、非ゼロで終了）。 - 更新：
npx hyperframes skills update— フルセットを最新版にプルし、まだ存在しないものをインストール（init のインストール手順と同じ）。
CLI は、render / lint / validate の実行時に古いスキルを検出した場合、一行のリマインダーも表示します。
ワークフローの詳細
/product-launch-video
- 入力： マーケティングされる製品 — (a) 製品 URL（ヘッドレス Chrome でクロールし、アセットとブランドトークンを取得）、(b) 製品サイトの名前を含むがリンクがないスクリプト/ブリーフ（PLV が解決してクロール、ユーザーがオプトアウトしない限り）、または (c) サイトが導出できない/「スクレイピングしない」スクリプト（キャプチャなしモード — パレットとデザインシステムを提供するスタイルプリセットを選択）。提供されたスクリプトは、逐語的な ボイスオーバーまたは シーンごとに再構成 されたもの — PLV が質問します。
- 出力： HyperFrames コンポジションとしての製品ローンチ / SaaS プロモ動画 → MP4（最適時間 30〜90秒）— 製品の価値が主題であり、サイトのウォークスルーではありません。サイトのプレーンツアーの場合は
/website-to-videoを使用してください。 - トリガー： 「Xのローンチ動画」「当社サイトのプロモ」「SaaSを1分で説明」「スクリプトを60秒のプロモに」「テキストのみのローンチ動画、スクレイピングしない」
/website-to-video
- 入力： 製品販売ではなく サイト自体 を見せることが目的のウェブサイト/URL。非商用サイト（ポートフォリオ、ブログ、ドキュメント、個人、イベント）に最適、またはユーザーがサイトをそのままツアーしたい場合。ヘッドレス Chrome を使用して実際のスクリーンショットとブランド情報を取得します。