motion-graphics

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

まず、このスキルを最新の状態に保ってください — 実行する前にユーザーに確認してください: npx hyperframes skills update motion-graphics。すべてが最新であれば高速な no-op です。そうでなければ、このスキルと、それが依存するコア領域のスキルを、あなたがそれらに依存する前に更新します。

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

motion-graphics — 振り分けエントリ

最初の入口は /hyperframes です。 このスキルでは、短く、デザイン主導で、ナレーションのないモーショングラフィック（動きそのものがメッセージです。約10秒未満で、ボイスオーバーはありません）を制作します。10秒を超えるもの、ナレーション付きのもの、複数シーンのもの、または判断に迷う場合は、まず /hyperframes を読んでください。あらゆるルートの判断はインテントレイヤーが担います。

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

短く、デザイン主導のモーショングラフィックです。アセット優先で進めます。ショットをデザインする前にアセット戦略を決め、実際の素材を用意してから、手元の素材を中心にショットをデザインし、カタログの機能を再利用して構成します。すべての成果物は PROJECT_DIR = videos/<project-name>/（Step 0 で作成）に保存します。以下のパスはすべて、このディレクトリからの相対パスです。

フェーズ	実行内容	主な成果物	詳細なフロー
init	Bash	hyperframes.json	Step 0
plan	サブエージェント — 検索するかどうかを判断 + 分類 + アセット戦略	shot-plan.json（草案：カテゴリ、asset_needs クエリ、ブリーフ）	agents/director.md（Part 1）
source ◇	Bash — メディア使用の解決（asset_needs が空の場合はスキップ）	assets/ + assets/index.md	phases/source/guide.md
design	サブエージェント — 解決済みのアセットを中心にショットをデザイン	shot-plan.json（最終版：ブロック、レイアウト、動き、位置）	agents/director.md（Part 2）
build	サブエージェント — 再利用を優先した構成	compositions/index.html	agents/builder.md
verify	Bash — lint、check、プルーフスナップショット。失敗時は修正	.hyperframes/artifacts/snapshots/<id>/contact-sheet.jpg	Step 5
approve	プレビューを開き、レンダリングするか変更するかを尋ね、回答を待つ	明示的なレンダリング承認	Step 6
render	Bash — hyperframes render（MP4。オーバーレイの場合は --format webm/mov）	renders/video.mp4 または透明オーバーレイ	Step 6

◇ source は、選択したカテゴリでアセットが宣言されている場合にのみ実行します。コードやテキストのみのカテゴリ（例：kinetic-type、大半の charts／stat）では asset_needs: [] となり、plan から design へ直接進みます。

カテゴリ — 検索の要否で分岐

plan の最初の判断は、検索が必要かどうかです。 この分岐でカテゴリが2つのグループに分かれます。その後、具体的なカテゴリを選びます。検索駆動型の場合は、検索で返されるコンテンツの種類によって決まります。各カテゴリは1つの 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 の resolve）	生成をスキップ／検索のみ
(asset_scout / search providers)	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 — 計画（サブエージェント：Director Part 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 / maps）を選びます。コンテンツはユーザー提供のものとし、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 に進みます。

適切にフォールバックします。検索プロバイダーが利用できない場合、カテゴリはアセット不要のものにフォールバックします（context.log に記録してください）。

ステップ 3 — デザイン（サブエージェント：Director Part 2）

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

ステップ 4 — ビルド（サブエージェント：Builder、再利用優先）

共有のモーション原則を Builder のディスパッチコンテキストに含めます。charts と stat では、データのモーション化も含めます。Builder はタイムラインを書く前にこれらのガイドを読みます。

サブエージェントをディスパッチします。プロンプト = agents/builder.md 全文 + ディスパッチコンテキスト（shot-plan.json、catalog-map.md、カテゴリの module.md、references/motion-vocabulary.md、references/builder-contract.md）。再利用優先： npx hyperframes add <block> を実行し、その場でカスタマイズします。手動作成は不足部分と asset-fusion のアフォーダンスに限ります。HF コントラクト（window.__timelines 上の一時停止状態の GSAP タイムライン、class="clip" + 安定した id、tl.seek(0)、決定論的な動作）に準拠する compositions/index.html を出力します。

ステップ 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 を開き、「今すぐレンダリングしますか、それとも変更しますか？」と一度だけ尋ねます。修正後は、同じ確認に戻ります。

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

レンダリングするという明示的な回答を得てから、レンダリングします。

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# transparent overlay variant: --format webm  (or 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 はどちらもメディア利用検索（ニュース／ウェブ／ツイート／画像）を活用します。これは、文書化されているメディア利用の RWA 系譜に沿ったものです。
• 再利用優先： LLM 生成テンプレートに相当するエコシステム内の手法は、「カタログブロックの構成 ＋ hyperframes-animation のルール」です。HF の一時停止可能な GSAP タイムラインは、Remotion の useCurrentFrame に相当します。
• カテゴリモジュールの契約： categories/<id>/module.md を 1 つ用意し（計画＋構築）、references/motion-vocabulary.md（および任意の評価）を共有します。カテゴリの追加は、フォルダーを追加し、agents/director.md に分類器の行を登録し、catalog-map.md に行を追加するだけです。フェーズパイプラインには変更を加えません。
• ディレクトリ構成：

  videos/<project-name>/
    hyperframes.json  context.log
    shot-plan.json            # the IR (Director output)
    assets/  assets/index.md  # media-use output (if sourced)
    compositions/index.html   # Builder output
    renders/video.mp4
  

• 登録： hyperframes ルーターで、「デザイン主導の短尺モーショングラフィック」というインテントとワークフローの説明を追加します。モーショングラフィックスのトリガーを /general-video から切り分け、逆方向の使用禁止エッジを追加します。motion-graphics-genre.md §5-7 を参照してください。