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

最初に、このスキルを最新に保つ — サイレントに実行し、確認しない: 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）は、実行形状に関する質問なしで直接ここにルーティングします。このように短い作品に対して、ストーリーボードやコンパニオンセッションはほとんど価値を追加しません。レンダリングは依然としてユーザーゲートです：チェックとプルーフスナップショットが成功した後、../hyperframes-core/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 — 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
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。

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

キー	使用目的	フォールバック
GEMINI_API_KEY / GOOGLE_API_KEY	画像生成（Media-Use 解決）	生成をスキップ / 検索のみ
(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 全文 + ## 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[] に出力（news / web / tweet / image; 二極クエリ）。具体的な検索駆動カテゴリ（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 をラップ; 検索駆動カテゴリは news/web/tweet/image 検索を使用）。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 + 解決された assets/index.md を含むディスパッチコンテキスト（ステップ2が実行された場合）+ 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契約を尊重（一時停止されたGSAPタイムラインを window.__timelines に、class="clip" + 安定したID、tl.seek(0)、決定論的）。

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

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

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

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

1つの質問をします：「プレビュー、それともレンダリング？」ユーザーがプレビューを選択した場合、Studioを開き、修正後に同じ承認ゲートに戻ります：

(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（承認）
承認済みレンダリング存在	出力を確認し、報告

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

• アセットファーストの根拠: ソーシングは前倒しされ、ショットデザインに情報を提供します（RWAフロー: 分析 → 検索 → レビュー → 構成）。検索駆動カテゴリ（webpage/news/tweet）と asset-fusion はどちらもMedia-Use検索（news/web/tweet/image）に依存しており、これはMedia-Useの文書化されたRWA系統です。
• 再利用ファースト: エコシステム内でのLLM生成テンプレートの類似物