saisandeep17/pro-motion-graphics

Pro Motion Graphics (V2 アーキテクチャ)

洗練された、決定論的な、スタジオ品質のモーショングラフィックス動画を構築します。あたかもシニアテクニカルモーションディレクターが手掛けたかのような仕上がりを実現します。このスキルは、厳格なアンチスロップ視覚基準、数学的物理演算、マルチエンジンルーティング、およびエンドツーエンドの10段階制作パイプラインを強制します。

---

このスキルを有効化するタイミング

• プログラムによる動画コード（Remotion / React、HTML/CSS/SVG + GSAP、または HTML5 Canvas）を生成する場合。
• 以下の動画カテゴリを構築する場合：ソーシャルリール/ショート（9:16）、ブランドプロモーション（16:9 / 1:1）、SaaS製品ローンチ、UIマイクロデモ、シネマティックキネティックタイポグラフィ、またはテクニカル解説動画。
• 「AIスロップ」（ぼやけたブラーブロブ、ネオンメッシュの輝き、汎用的なグラデーション、固定されていないCSSフェード、機械的なリニアイージング）に見えるアニメーションをリファクタリングする場合。
• コードを書く前に、フレーム精度のストーリーボード、数学的なタイミング、およびサウンドデザインの同期を計画する場合。

---

モデル実行ルール（Sonnet & Haiku 最適化）

1. 形容詞ではなく数値へ：すべての美的意図を、直接かつ正確な数値トークン（フレーム数、スプリングの stiffness/damping、cubic-bezier曲線、8pxグリッド増分、hex/OKLCH色）に変換します。視覚的な洗練を曖昧な形容詞で決して表現しないでください。
2. 決定論的フレーム計算：すべてのアニメーションは、厳密に frame 変数または明示的なタイムライン進捗度 progress（$0.0 \to 1.0$）によって駆動されなければなりません。シードなしの Math.random()、setTimeout、またはレンダリング中に非同期化する固定されていないCSSの infinite キーフレームを決して使用しないでください。
3. GPUセーフプロパティのみ：transform（translate3d、scale、rotate）、opacity、clip-path、またはSVG stroke-dashoffset をアニメーション化します。width、height、top、left、またはフレームごとの重い filter: blur() を決してアニメーション化しないでください。
4. Reactフックルールの遵守：Remotionでは、spring() は純粋な計算関数です。.map() ループ内でのReactフックルール違反を避けるために、数学的ヘルパーに決して use を接頭辞として付けないでください（例：useStaggerSpring() ではなく getStaggerSpringProgress() を使用します）。

---

マルチエンジンルーティングマトリックス

プロジェクトコードを生成する前に、マルチエンジン選択ガイド に照らしてブリーフを評価します：

• エンジンA: Remotion（React）：複雑なUIモックアップ、SaaSローンチ、モジュール式マルチシーン動画、データ駆動型リール、フレーム精度のCLIレンダリングに最適。
• エンジンB: HTML/CSS/SVG + GSAP：キネティックタイポグラフィ、エディトリアルブランドマニフェスト、SVGロゴストロークアニメーション、軽量ブラウザ再生に最適。GSAPパターン を参照。
• エンジンC: HTML5 Canvas：プロシージャルグラフィックス、パーティクルネットワーク、数学的アニメーション、ジェネレーティブ視覚効果に最適。

---

10段階動画制作パイプライン

すべてのプロジェクトで以下の段階を順に実行します：

段階1: ブリーフの理解

ターゲットプラットフォーム、アスペクト比、再生時間（$t$）、FPS、コアメッセージ、ビジュアルトーン、利用可能なアセットを特定します。必須の欠落質問のみを尋ねます（最大4箇条）。詳細が指定されていない場合は、スタジオのデフォルトを適用します：

• アスペクト比：デスクトップ/Webは 16:9（1920x1080）、ソーシャルは 9:16（1080x1920）。
• フレームレート：UI & ソーシャルは 60fps、エディトリアル & 解説は 30fps、シネマティックタイプは 24fps。

段階2: カテゴリルーティング

リクエストを カテゴリプレイブック の6つのカテゴリブループリントのいずれかにマッピングします：

• カテゴリA: ソーシャルリール、TikTok、ショート（9:16、60fps、12秒～30秒）
• カテゴリB: ブランドプロモーション & マニフェスト（16:9 / 1:1、30fps、20秒～45秒）
• カテゴリC: SaaS製品ローンチ動画（16:9、60fps、45秒～90秒）
• カテゴリD: 機能ハイライト / UIマイクロデモ（1:1 / 4:5、60fps、10秒～25秒）
• カテゴリE: シネマティックキネティックタイポグラフィ（16:9 / 9:16、24/30fps、15秒～45秒）
• カテゴリF: 解説 & 教育動画（16:9、30/60fps、45秒～120秒）。詳細は 解説プレイブック を参照。

段階3: アセットの発見と検証

本物のブランドアセット（ロゴ、UIスクリーンショット、フォント、カラーパレット）を収集します。

• 本物のブランドロゴは、アスペクト比を歪めずにそのまま維持します。
• 本物のスクリーンショットが提供されている場合、実際の製品スクリーンショットを作成されたプレースホルダーUIで決して置き換えないでください。
• scripts/check-assets を使用してアセットパスを検証します。

段階4: ストーリーボード計画と数学的タイミング

秒数とFPSからフレーム番号を計算する明示的なタイムラインテーブルを作成します： $$\text{frame} = \text{round}(t \times fps)$$ シーンの開始/終了時間、視覚的な説明、カメラトランジション、オーディオキューを定義します。シーンの長さが、意図しない重複なく、ターゲットの合計再生時間と一致することを確認します。

段階5: 集中型デザインシステム（BRAND_CONFIG）

シーンJSX/HTMLを書く前に、デザイントークンを確立します：

• 色：アンチスロップルール から厳選された1つのシステム（Swiss Technical Dark、Editorial Warm Paper、または Kinetic Mono）を選択します。
• タイポグラフィ：タイポグラフィガイド に従います（ネガティブトラッキング -0.04em のディスプレイ + ポジティブトラッキング +0.08em で tabular-nums を持つ等幅メタデータ）。
• 幾何学：同心円の角丸計算を強制します：$R_{inner} = \max(0, R_{outer} - Padding)$

段階6: モジュール式プロダクションコード

templates/ にある選択されたエンジンスターターに基づいて、クリーンでモジュール式のコードを生成します：

• templates/remotion-starter/：config.ts、motion.ts、およびコンポーネントを使用したモジュール式Remotionコンポジション。
• templates/gsap-starter/：フレーム決定論的なGSAPタイムライン設定。
• templates/canvas-starter/：プロシージャル2Dキャンバス描画ループ。 scripts/validate-project を使用して構造を検証します。

段階7: オーディオ & サウンドデザイン

オーディオデザインガイド に従ってサウンドレイヤーを組み込みます：

• 音声ナレーションセグメント中は、背景音楽を12～16dB下げます。
• トランジションのウィッシュ音は、視覚的な中間点の2フレーム前に合わせ、インパクト音は正確な視覚的接触フレームに合わせます。
• すべての音楽がロイヤリティフリー/商用利用ライセンス済みであることを確認します。

段階8: レンダリング & エンコーディング

高品質の決定論的設定を使用してレンダリングします：

# Remotion 高品質 Web MP4 (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18

段階9: ビジュアル品質保証

動画品質チェックリスト を実行します：

• 再生時間の25%、50%、75%、100%の地点で静止プレビューフレームをレンダリングします（npx remotion still ... --frame=N）。
• テキストのクリッピング、8pxグリッドの整列、コントラスト比、およびセーフゾーン（9:16 の上部220px / 下部340px）を監査します。
• scripts/inspect-output out/video.mp4 を使用して最終動画出力を検証します。

段階10: 納品と引き渡し

以下を提供します：

1. レンダリングされた動画出力ファイル（または正確に再現可能なレンダリングコマンド）。
2. テンプレートアーキテクチャに一致するクリーンなソースプロジェクト。
3. public/ に整理された参照アセット。
4. 実行手順と検証ログ。

---

必須品質ゲート

モーショングラフィックスタスクを終了する前に、以下を確認します：

• 汎用的な filter: blur() ブラブや紫から青へのAIグラデーションがないこと。
• Reactフックルール違反がないこと（getStaggerSpringProgress のような純粋ヘルパーを使用していること）。
• すべてのアニメーションが frame または正規化された progress によって決定論的に駆動されていること。
• node scripts/validate-project.js <project-dir> が終了コード0で終了すること。
• node scripts/check-assets.js <project-dir> が終了コード0で終了すること。
• node scripts/inspect-output.js <output-path> によってレンダリング出力が検証されていること。