プロモーションアニメーションスキル

プロダクトアニメーション

現在のコードベースの製品向けに、完成したMP4アニメーションを制作します。このスキルは決定論的なアニメーションエンジン＋方法論であり、固定フォーマットではありません。ユーザーの要求（チャット形式のデモ、ブランド紹介、統計情報の表示、ワークフローウォークスルー、Before/Afterなど）に最適なパターンをエージェントが判断します。

すべてのパターンで共通する点：

• 実際のブランドアセットをリポジトリから取得（ロゴSVG、デザイントークン、フォント）。
• Linear / Vercel / Stripe 級のビジュアル品質（ソフトシャドウ、本物のタイポグラフィ、単一のヒーローモーメント）。
• 決定論的な __setTime(t) タイムラインにより、Playwrightが毎レンダリングで完全なフレームをキャプチャ。
• アニメーションで主張を行う箇所には具体的で名前付きのコンテンツを使用 — 汎用的な「AIでコスト削減」のようなコピーは禁止。

これを機能させるための完全なリファレンスは methodology.md です。他の作業を行う前に必ず読んでください。ビジュアルスタイル、タイミング、カメラの計算、ffmpegフラグ、初回挑戦で陥りがちな10の落とし穴についての具体的な詳細が記載されています。

出力ターゲット

デフォルト：1920×1080 @ 30fps、H.264、オプションで音楽＋1秒の末尾フェード。長さはパターンによって異なります：

• ブランド紹介 / ロゴ表示：5～8秒
• 統計情報表示：6～10秒
• 製品プロモーション（チャット形式など）：15～22秒
• ワークフローウォークスルー：20～40秒

ユーザーが指定していない場合は、長さとアスペクト比を確認してください。ソーシャル/縦型の指定がない限り、デフォルトは16:9の1920×1080です。

複数のカットが適切な場合（例：固定カメラ＋シネマティックカメラ）は、両方を出力します。

事前チェック

何かを行う前に、環境がこれを実行できることを確認します：

which ffmpeg && ffmpeg -version | head -1
which node && node --version
ls ~/Library/Caches/ms-playwright/ 2>/dev/null | head -3   # macOS playwright cache

Playwright chromiumがキャッシュされていない場合は、npx playwright install chromium を実行します。ffmpegは必須です。

ワークスペースを作成します：

mkdir -p product-animation/frames
cd product-animation

4フェーズパイプライン

フェーズ4を開始する前に、フェーズ1～3をサブエージェントとして並列実行（独立した作業）します。

フェーズ1 — ブランドとアセットの発見（サブエージェント）

agents/01-brand-extractor.md のプロンプトを使用してブランド抽出エージェントを起動します。以下の情報を渡します：

• リポジトリのルートパス
• 製品の機能に関するいくつかのヒント

出力されるJSON：実際のロゴSVGパス、正確な16進数のトークン、フォントスタック、ヒーローUIの慣例（border-radius、padding、プライマリボタンスタイル）、製品名＋タグライン。

実際のワードマークSVGをワークスペースにコピーします（例：<product>-wordmark.svg）。ブランドアセットはインラインで、ラスター画像は使用しません。

フェーズ2 — コンセプトとスクリプト（サブエージェント）

agents/02-script-writer.md のプロンプトを使用してスクリプトライターエージェントを起動します。フェーズ1のブランドサマリー、製品の機能、ユーザーが要求したアニメーションの種類（プロモーション、ブランド紹介、統計情報表示など）を渡します。

出力：

• この製品に選択されたアニメーションパターン（例：「chat-demo」、「stat-reveal」、「brand-intro」）
• シーンタイミング付きのストーリーボード：コールドオープン → メインコンテンツ → アウトロ
• 各シーンでフィーチャーする正確なテキスト/数値/ビジュアル

パターンが chat-demo の場合、templates/chat-demo.html のテンプレートは完全な動作開始点です。スクリプトの内容で CASES.BIGGEST データ構造を埋めてください。他のパターンの場合は、methodology.md § 2 で説明されているアニメーションエンジンを使用してHTMLをゼロから構築します。同じ __setTime(t) ドライバー、同じイージングツールキット、同じPlaywrightキャプチャを使用します。

フェーズ3 — コンテンツリサーチ（サブエージェント）

agents/03-case-researcher.md のプロンプトを使用してケースリサーチャーエージェントを起動します。製品ドメインとアニメーションパターンを渡します。

出力内容はパターンによって異なります：

• チャットデモ / プロモーション： 1つの正規の、名前付きの、劇的なBefore/After（実際の数字付き、ドメインにとっての「コンバース・チャック・テイラー・モーメント」）＋3～4つのセカンダリケース。
• 統計情報表示： 製品が信用を持って主張できる、1つの大きな公開指標（引用付き）。
• ブランド紹介 / ロゴ表示： 会社の実際のヘッドライン、実際の顧客数、実際のローンチストーリー — 画面上に表示できる検証可能なもの。
• ワークフローウォークスルー： 最も一般的な実際のユーザージャーニー、製品自体からの名前付きステップ。

アニメーションが主張を行う箇所では、具体的で名前付きで検証可能なものにします。

フェーズ4 — ビルドとレンダリング

出力を選択したHTMLテンプレート（またはゼロから作成したもの）に結合し、Playwrightでフレームをレンダリングし、ffmpegでエンコードします。

ビルドフェーズ

ビルドはパターンによって若干異なります。共通の流れ：

1. アニメーションHTMLをコピーまたは作成します。

   • スクリプトライターが chat-demo を選択した場合、templates/chat-demo.html をワークスペースにコピーし、CASES.BIGGEST データオブジェクトをフェーズ2のスクリプト内容＋フェーズ3のリサーチで編集します。また、ブランド :root { --tokens }、ヘッダーテキスト（「Atlas Trade」、「Intelligence」、バッジ）、URLバー、wordmark <img src>、ロゴアウトロのタグライン＋CTAを置き換えます。
   • 他のパターン（ブランド紹介、統計情報表示、ウォークスルー、Before/After）の場合は、アニメーションエンジンを使用してHTMLをゼロから作成します — methodology.md § 2 に決定論的タイムラインパターンが示されています。reference/design-rules.md のデザインルール、reference/camera-modes.md のカメラ計算、そして同じPlaywrightレンダリング契約を再利用します。

2. レンダースクリプトをコピーします。 chat-demoには templates/render-chat-demo.js（525フレーム、約17.5秒）または render-chat-demo-zoom.js（585フレーム、約19.5秒、シネマティックカメラ）を使用します。カスタムパターンの場合は、いずれかのレンダースクリプトをコピーして DURATION 定数を更新します — 残りはそのまま動作します。

3. 最初にブラウザで検証します。 HTMLを直接開きます — アニメーションは自動的にループ再生されます。すべてのシーンを目視確認します。ブラウザで5分確認することで、1回のレンダリングにつき3分の時間を節約できます。

4. スモークレンダリング — 全レンダリングを実行する前に、シーン境界で6～8枚のキーフレームをレンダリングします。パターンについては scripts/smoke.js を参照してください。30秒でレイアウトの重複、フォントフォールバック、画面外の要素を検出できます。

レンダリングフェーズ

ワークスペースにPlaywrightをインストールします：

npm install [email protected] --no-save --no-audit --no-fund --silent

フレームをレンダリングします：

node render-<pattern>.js          # frames/f_*.png を書き込みます（持続時間×FPSあたり約3～5フレーム）

ffmpegでエンコードします。-t をアニメーションの持続時間に、afade=t=out:st=X をフェードが終了の1秒前に来るように調整します：

ffmpeg -y -framerate 30 -i frames/f_%05d.png \
  -i /path/to/music.mp3 \
  -c:v libx264 -pix_fmt yuv420p -crf 18 -preset medium -movflags +faststart \
  -c:a aac -b:a 192k -af "afade=t=out:st=<DURATION-1>:d=1.0" \
  -t <DURATION> -shortest animation.mp4

yuv420p はSlack/LinkedIn/Twitterでの再生に必要です。+faststart はストリーミングを可能にします。crf 18 はほぼ視覚的にロスレスです。

オーディオが提供されない場合は、-i music.mp3、-c:a aac -b:a 192k、および -af フラグを削除します。scripts/encode.sh はこれを適切なデフォルトでラップします。

品質ゲート — 完了宣言の前に読むこと

ユニバーサル（すべてのパターン）：

• 実際のブランドワードマークがインラインで使用されている（SVG <img>、Inter Tightの太字をロゴとしてスタイル付けしたものではない）。
• すべての色は製品のトークンからのもの — 決して発明された16進数ではない。
• アニメーションはコードベースから参照されている — そのUI、フォント、コピーの文体が認識可能である。
• 単一のヒーローモーメント。1つの数字、1つの表示、1つのCTA — 12もの競合する焦点ではない。
• 数字がカウントアップする場合は tabular-nums を使用する（水平方向にガタつかないように）。
• アニメーションは着地する — ある要素がフェードアウトするのと全く同じ瞬間に別の要素が出現しない。エントリー/エグジットのウィンドウを尊重する。
• ロゴは最後に十分な時間（ブランドアウトロで3秒以上）保持される。
• MP4がQuickTimeで再生され、正確にターゲットの解像度×fpsであり、ファイルサイズが妥当である（通常1～6 MB）。
• open <name>.mp4 でMP4をユーザー向けに開く。

chat-demo の場合の追加チェック（reference/design-rules.md を参照）：

• ヒーローの$の数字はJetBrains Mono / ウェイト800 / 6桁以上。
• ツールチェインには約8個のチップがあり、ペーシングは約3秒 — それより短いと偽物に見える。
• ユーザーバブルはバーがクリアされた後に表示され、同時には決して表示されない。
• 思考バブルは、結果がフェードインする前にスライドして消える — 両方が不透明になることは決してない。
• キャレットはタイピング中にのみ表示され、プレースホルダーには決して表示されない。

完了宣言の前にクリーンアップ：

rm -rf frames frames-zoom node_modules package.json package-lock.json smoke_*.png

最終的なワークスペースには以下を含める：HTML、レンダースクリプト、ワードマークSVG、完成したMP4。

ファイルマップ

~/.claude/skills/promo-animation/
├── SKILL.md                  ← 現在地
├── methodology.md            ← 詳細リファレンス、最初に読むこと — ユニバーサルアニメーションエンジン
├── agents/
│   ├── 01-brand-extractor.md   ← フェーズ1 サブエージェントプロンプト
│   ├── 02-script-writer.md     ← フェーズ2 サブエージェントプロンプト
│   └── 03-case-researcher.md   ← フェーズ3 サブエージェントプロンプト
├── templates/
│   ├── chat-demo.html              ← 正規のchat-demoパターン（動作例）
│   ├── render-chat-demo.js         ← 静的モードのPlaywrightレンダラー
│   ├── render-chat-demo-zoom.js    ← ズームモードのレンダラー
│   └── atlas-wordmark.svg          ← プレースホルダーSVG
├── scripts/
│   ├── smoke.js                ← キーフレームスモークテスト
│   └── encode.sh               ← ffmpegラッパー
└── reference/
    ├── design-rules.md         ← ビジュアルルール集
    ├── camera-modes.md         ← 静的 vs ズームの判断
    └── timing-blueprint.md     ← シーンタイミング

疑問がある場合は、templates/chat-demo.html を読んでください。これは現在すぐにレンダリングできる完全な動作例です（架空の「Atlas Trade」/ Converse Chuck Taylor再分類シナリオ）。これはchat-demoパターンおよび決定論的アニメーションエンジンの正規のリファレンスです — methodology.md のすべてのビジュアルルール、タイミング決定、および落とし穴がこのファイルにエンコードされています。

他のアニメーションパターンの場合は、HTMLをゼロから作成しますが、アニメーションエンジン（methodology.md § 2）、レンダリング契約（§ 5）、およびデザインルール（reference/design-rules.md）はすべて変更せずに引き継がれます。