モーション グラフィックス — ディスパッチエントリ

モーション グラフィックス — ディスパッチエントリ は何をしますか？

ステップ 0 の前にルートを確認してください。 このスキルは短く、デザイン主導で、ナレーションのないモーショングラフィックを作成します（動きがメッセージであり、約10秒未満、ナレーションなし）。より長い、複数シーン、またはナレーション付きの作品 → /general-videoへ；ウェブサイトのナレーション付き動画 → /general-videoへ；トピック解説 → /faceless-explainerへ；製品プロモーション → /product-launch-videoへ；既存映像へのキャプション追加 → /embedded-captionsへ。対象外：ライブ/レンダリング時データ、またはキャプチャできない映像。モーションファーストかナレーション付きか不明な場合？最初に /hyperframes をお読みください。

短くデザイン主導のモーショングラフィック。アセットファースト：ショットをデザインする前にアセット戦略を決定し実際の素材を入手し、その後、入手した素材に基づいてショットをデザインし、カタログ機能を再利用して構成します。すべての成果物は PROJECT_DIR = videos/<project-name>/（ステップ 0 で作成）に配置します。以下のパスはすべてこれを基準とします。

フェーズ	実行	主要な成果物	詳細フロー
init	Bash	hyperframes.json	ステップ 0
plan	サブエージェント — 検索の要否を決定 + 分類 + アセット戦略	shot-plan.json（ドラフト：カテゴリ、asset_needs クエリ、概要）	agents/director.md（パート1）
source ◇	Bash — media-use 解決（asset_needs が空の場合はスキップ）	assets/ + assets/index.md	phases/source/guide.md
design	サブエージェント — 解決済みアセットに基づくショットデザイン	shot-plan.json（最終版：ブロック + レイアウト + モーション + 位置）	agents/director.md（パート2）
build	サブエージェント — 再利用ファーストの構成	compositions/index.html	agents/builder.md
render	Bash — hyperframes render（MP4、またはオーバーレイ用 --format webm/mov）	renders/video.mp4	ステップ 5
verify	Bash — lint / inspect → 失敗時に修復サブエージェントを実行	（その場で修正）	agents/finalize.md

◇ source は、選択されたカテゴリがアセットを必要とする場合にのみ実行されます。純粋なコード/テキストカテゴリ（例：kinetic-type、ほとんどの charts/stat）は asset_needs: [] を持ち、計画から直接デザインに進みます。

カテゴリ — 検索判断による分割

plan の**最初の判断は「これは検索を必要とするか？」**です。この分岐によりカテゴリは2つのグループに分かれます。その後、検索駆動グループでは、検索結果のコンテンツタイプによって特定のカテゴリが選択されます。各カテゴリは categories/<id>/module.md（計画 + ビルドルール）として定義され、共有のモーション語彙は references/motion-vocabulary.md（→ hyperframes-animation ルール/ブループリント + レジストリブロック）にあります。

フォームカテゴリ — 検索不要。ユーザーがコンテンツを提供：

カテゴリ	意図	依存先
kinetic-type	インパクトのあるライン/引用/タイトル、モーションファーストテキスト	caption-* ブロック + アニメーションルール
stat	単一のヒーロー数値/カウントアップ + リング	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	データに基づく棒/折れ線/円/レース/パーセントグラフ	data-chart ブロック
logo-reveal	ロゴスティング/ブランドロックアップ（ユーザーロゴ）	logo-outro / rules/svg-path-draw
lower-thirds	名前/タイトルバー、コールアウト、ソーシャルオーバーレイ	caption-* + レジストリオーバーレイブロック

検索駆動カテゴリ — 最初に検索し、コンテンツタイプに応じてアニメーション化（RWAパス）：

返されるコンテンツ	カテゴリ	アニメーション
ウェブページ/リンク	webpage	ウェブページ/UIアニメーション（スクロール、リビール、カーソル、コールアウト）
ニュース記事	news	見出しリビール + ソースカード + キーファクトコールアウト
ツイート	tweet	アニメーション化されたツイートカード
画像/エンティティ	asset-fusion	アセットのジオメトリが_チャートになる_（RWAダイジェティックフュージョン）

ビルド順序：一度に1つずつ、カバレッジファースト（大まかで問題ありません）。kinetic-type はプロトタイプから移植済み。残りはそれに従います。

前提条件

macOS Apple Silicon または Linux x64。システムツール：brew install node ffmpeg。npx hyperframes doctor を一度実行。macOS GPUレンダリング：export PRODUCER_BROWSER_GPU_MODE=hardware。

オプションのキー（未設定の場合はローカルフォールバック）— media-use を介してアセットをソース/生成するカテゴリでのみ必要：

キー	使用目的	フォールバック
GEMINI_API_KEY / GOOGLE_API_KEY	画像生成（media-use 解決）	生成をスキップ/検索のみ
(asset_scout / 検索プロバイダ)	webpage/news/tweet + asset-fusion 実アセット検索	カテゴリはアセットなしに低下

フロー

ステップ 0 — 初期化

カレントワーキングディレクトリはエージェントワークスペースルート。すべての成果物は PROJECT_DIR = videos/<project-name>/ の下に書き込みます。<project-name>：ユーザーが指定したディレクトリを使用し、それ以外の場合は意図から短いケバブケース名（<subject>-motion）を使用します。ワークスペースベース名やタイムスタンプは使用しません。

$PROJECT_DIR/hyperframes.json がない場合のみ：

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank

init はインストール済みスキルをGitHub上の最新版と照合し、古いものがあった場合はグローバルセットを更新します。

制約： ワークスペースルートで hyperframes init を実行しないでください。PROJECT_DIR 内に別の hyperframes/ をネストしないでください。すべてのBashコマンド（マスター + サブエージェント）は (cd "$PROJECT_DIR" && ...) サブシェルで実行します — 裸の cd は使用しないでください。

ステップ 1 — 計画（サブエージェント：ディレクター パート1）

1つのサブエージェントを起動します。プロンプト = agents/director.md 全文 + ## Dispatch context（SKILL_DIR / PROJECT_DIR / ユーザーのリクエスト / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。以下の処理を行う必要があります：

1. 決定：これは検索を必要とするか？（最初の分岐）
   • いいえ → フォームカテゴリ（kinetic-type / stat / charts / logo-reveal / lower-thirds）を選択します。コンテンツはユーザー提供。asset_needs: []。
   • はい → 検索計画 を asset_needs[] に出力します（ニュース / ウェブ / ツイート / 画像；2極クエリ）。特定の検索駆動カテゴリ（webpage / news / tweet / asset-fusion）は、ステップ2で返されるコンテンツタイプによって確定され、ステップ3で最終決定されます。
2. ドラフト shot-plan.json を書き込みます（エンベロープ + 選択されたフォームカテゴリ または 検索意図 + asset_needs + 1段落のショット概要）。スキーマ：references/shot-plan-ir.md。

検証：[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing

ステップ 2 — 素材収集 ◇（Bash：media-use、条件付き）

shot-plan.json.asset_needs が空でない場合、アセットを解決します（検索 / 生成 / 取得 → フリーズされたプロジェクトローカルパス + 台帳）。詳細は phases/source/guide.md（media-use resolve をラップ。検索駆動カテゴリはニュース/ウェブ/ツイート/画像検索を使用）を参照してください。asset_needs が空の場合は、ステップ3にスキップします。

# 例示 — phases/source/guide.md を参照
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)

グレースフルデグラデーション：検索/プロバイダが利用できない場合、カテゴリはアセットなしにフォールバックします（context.log に記録）。

ステップ 3 — デザイン（サブエージェント：ディレクター パート2）

サブエージェントを起動します（プロンプト = agents/director.md パート2 + ディスパッチコンテキスト（ステップ2が実行された場合は解決済みの assets/index.md を含む）+ catalog-map.md）。利用可能なアセットに基づいてショットをデザインします：カタログブロック + hyperframes-animation ルール/ブループリント、レイアウト、モーション、ビート、および（asset-fusion の場合は）element_positions + スポイトパレットを選択します。shot-plan.json を最終化します（content.block + content.customize + カテゴリ別コンテンツ）。

ステップ 4 — 構築（サブエージェント：ビルダー、再利用ファースト）

サブエージェントを起動します。プロンプト = agents/builder.md 全文 + ディスパッチコンテキスト（shot-plan.json、catalog-map.md、カテゴリの module.md、references/motion-vocabulary.md、references/builder-contract.md）。再利用ファースト：npx hyperframes add <block> + その場でカスタマイズ。ギャップとアセットフュージョンアフォーダンスのみ手書きします。出力 compositions/index.html はHFコントラクトに準拠します（window.__timelines 上の一時停止されたGSAPタイムライン、class="clip" + 安定したID、tl.seek(0)、決定論的）。

ステップ 5 — レンダリング（Bash）

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# 透明オーバーレイバリアント：--format webm （または mov）

ステップ 6 — 検証（Bash → 失敗時に修復サブエージェントを実行）

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

exit 0 → 完了。lint/inspectエラー時は、修復サブエージェント（agents/finalize.md：スナップショットQA + 1回のその場修正パス + 再レンダリング）を起動します。修復で固定期間を変更しないでください。

レポート + オプションのプレビュー

最終出力（renders/video.mp4、または .webm / .mov オーバーレイバリアント）+ 時間を報告します。実行中にプレビューを開かないでください。 リクエストがあった場合のみ、レンダリング後に開始して最終ファイルを提供します：

(cd "$PROJECT_DIR" && npx hyperframes preview)   # Studio UI；または `npx hyperframes play` で共有可能なリンク

フラグは hyperframes-cli スキル（references/preview-render.md）にあります。

再開テーブル

状態	再開場所
shot-plan.json なし	ステップ 1（計画）
shot-plan.json に asset_needs あり、assets/ なし	ステップ 2（素材収集）
shot-plan.json 最終版、compositions/index.html なし	ステップ 3/4（デザイン+構築）
compositions/index.html あり、renders/video.mp4 なし	ステップ 5（レンダリング）+ ステップ 6
renders/video.mp4 あり	レポート + 停止

デザインノート（メンテナー向け — 実行時はこれを読みません）

• アセットファーストの根拠： 素材の調達は前倒しで行われ、ショットデザインに情報を提供します（RWAフロー：分析 → 検索 → レビュー → 構成）。検索駆動カテゴリ（webpage/news/tweet）と asset-fusion はどちらも media-use の検索（ニュース/ウェブ/ツイート/画像）に依存しており、これは media-use の文書化されたRWA系列です。
• 再利用ファースト： LLM生成テンプレートのエコシステム内アナログは、「カタログブロック + hyperframes-animation ルールを構成する」です。HFの一時停止されたGSAPタイムラインは、Remotionの useCurrentFrame に相当します。
• カテゴリモジュール契約： 1つの categories/<id>/module.md（計画 + 構築）、references/motion-vocabulary.md を共有（+ オプションの評価）。カテゴリの追加 = フォルダのドロップ + agents/director.md への分類子行の登録 + catalog-map.md への行の追加。フェーズパイプラインは変更されません。
• ディレクトリ構造：

  videos/<project-name>/
    hyperframes.json  context.log
    shot-plan.json            # IR（ディレクター出力）
    assets/  assets/index.md  # media-use 出力（ソースされた場合）
    compositions/index.html   # ビルダー出力
    renders/video.mp4
  

• 登録： hyperframes ルーター内 — 「デザイン主導の短いモーショングラフィック」意図 + ワークフロー説明を追加。/general-video から motion-graphics トリガーを切り出し、逆の「使用しないでください」エッジを追加。motion-graphics-genre.md §5-7 を参照。