モーショングラフィックス

プラグインのインストール: セットアップや更新コマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持してください。

最初に、このスキルを最新の状態に保ってください。実行前にユーザーに確認してください: npx hyperframes skills update motion-graphics。全てが最新の場合は高速なno-opです。そうでない場合は、このスキルとそれが依存するコアドメインスキルを更新してから、それらに依存します。

figmaソース: 構築元のロゴ/アセット/アニメーションがfigma.comのURLから来る場合は、最初に/figmaを実行してください（アセットエクスポート、ブランドトークン、およびグラフィックがFigma Motionのインポートである場合はMotion→GSAP変換）。その後、その出力から構築します。生のMCPツールを介して直接Figmaを操作しないでください。これにより、SVGサニタイズ、.media/manifest.jsonlの来歴、およびブランドトークンvar()バインディングがスキップされ、後でブランド変更があっても完全に再インポートしないと伝播できなくなります。

motion-graphics — ディスパッチエントリ

玄関口は/hyperframesです。 このスキルは、短く、デザイン主導で、ナレーションのないモーショングラフィックを作成します（動きがメッセージであり、約10秒未満、音声はありません）。それより長いもの、ナレーション付きのもの、または複数シーンのもの、あるいは不確かな場合は、最初に/hyperframesを読んでください。インテントレイヤーがすべてのルート決定を担当します。

このワークフローは設計上自律的です。最大でも1つの確認質問（agents/director.md）を行い、その後は中間レビューなしで検証まで構築します。インテントレイヤー（/hyperframes → references/intent-interview.md）は、実行形状に関する質問をせずに直接ここにルーティングします。このように短い作品にストーリーボードやコンパニオンセッションを追加してもほとんど価値はありません。レンダリングは依然としてユーザーゲートです。チェックとプルーフスナップショットに合格した後、Studioプレビューを開き、../hyperframes/references/brief-contract.mdの標準的な「今レンダリングしますか、それとも変更しますか？」という質問をします。BRIEF.mdが存在する場合は、ディレクターの質問の前にそれを読んでください。

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

フェーズ	実行	主要アーティファクト	詳細フロー
init	Bash	hyperframes.json	ステップ0
plan	サブエージェント — 検索が必要か決定？ + 分類 + アセット戦略	shot-plan.json（ドラフト: カテゴリ、asset_needsクエリ、概要）	agents/director.md（パート1）
source ◇	Bash — メディア使用解決（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
verify	Bash — lint、check、プルーフスナップショット；失敗時は修復	snapshots/contact-sheet.jpg	ステップ5
approve	プレビューを開く；レンダリングか変更かを尋ね、回答を待つ	明示的なレンダリング承認	ステップ6
render	Bash — hyperframes render（MP4、オーバーレイの場合は --format webm/mov）	renders/video.mp4 または透明オーバーレイ	ステップ6

◇ 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-* + レジストリオーバーレイブロック
maps	地理的モーション — 地域のハイライト、場所の接続、場所へのズーム（ベクターまたはベイクドベースマップ）	us-map / world-map ファミリー + bake-basemap.mjs

検索駆動型カテゴリ — 最初に検索し、次にコンテンツタイプでアニメーション化（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。

オプションのキー（設定されていない場合はローカルフォールバック） — メディア使用を介してアセットをソース/生成するカテゴリでのみ必要:

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

フロー

ステップ 0 — 初期化

cwdはエージェントワークスペースのルートです。すべてのアーティファクトを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 --skill=motion-graphics

initは、インストールされているスキルをGitHub上の最新と比較し、古いものがあればグローバルセットを更新します。

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

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

1つのサブエージェントをディスパッチします。プロンプト = 完全なagents/director.md + ## ディスパッチコンテキスト（SKILL_DIR / PROJECT_DIR / ユーザーのリクエスト / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。これにより:

1. 判断: これには検索が必要か？（最初の分岐）
   • いいえ → フォームカテゴリを選択（kinetic-type / stat / charts / logo-reveal / lower-thirds / maps）。コンテンツはユーザー提供。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: メディア使用、条件付き）

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

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

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

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

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

共有モーション原則をビルダーのディスパッチコンテキストに含めます。chartsおよびstatの場合は、データインモーションも含めます。ビルダーはタイムラインを記述する前にこれらのガイドを読みます。

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

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

(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)

開始状態、シグネチャムーブ、最終ホールドを示すプルーフタイムを選択します。続行する前に、生成されたコンタクトシートまたはスナップショットシートを検査します。lint、check、またはスナップショットの失敗時は、修復サブエージェント（agents/finalize.md）をディスパッチして1回のその場修正パスを実行し、失敗したゲートを再実行します。欠陥を隠すためだけに固定された期間を変更しないでください。

ステップ 6 — 承認とレンダリング（Bash）

Studioを開き、1つの質問をします：「今レンダリングしますか、それとも変更しますか？」 修正後、同じゲートに戻ります:

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

明示的なレンダリングの回答があった場合のみレンダリング:

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

出力が存在し、空でなく、意図された期間であることを確認します。最終ハンドオフでは、アーティファクト名、実際の期間、コンポジションまたはフレームID、プルーフタイム、および検査されたコンタクトまたはスナップショットシートを指定します。フラグは/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あり、プルーフスナップショットなし	ステップ5（検証）
チェックとプルーフスナップショット合格、承認済みレンダリングなし	ステップ6（承認）
承認済みレンダリングあり	出力を検証し、報告

デザインノート（メンテナー — 実行時はこれを読まない）

• アセットファースト配給

…

[翻訳用に切り詰められました]