Remotion Video Pro
スコープ
このスキルは、Remotionを使用したプログラム動画制作に必要なすべてを担当します。
- プロジェクトスキャフォールディングとコンポジションアーキテクチャ
- フレームベースのアニメーション数学（interpolate、spring、measureSpring）
- 時間設計の考え方（セーフエリア、フックウィンドウ、タイミング）
- オーディオ同期（ナレーション、キャプション、ビート検出）
- ビジュアルデザインシステム（タイポグラフィ、カラー、モーション原則）
- パフォーマンス最適化（memoization、OffthreadVideo、バンドルサイズ）
- レンダリングパイプライン（Lambda、CloudRun、CI/CD）
- ウェブフック駆動のデータ動画（CRM → キュー → Lambda → S3）
- 大規模バッチレンダリング（10,000本以上のパーソナライズ動画）
- コンポジション検証（pre-commitフック、CIゲート）
クイックリファレンス
| 問題 | ルール読み込み |
|---|---|
| プロジェクト設定、Zodスキーマ、Composition構造 | 01-scaffolding.md |
| interpolate、spring、トランジション、タイミング | 02-animation-physics.md |
| モバイルセーフエリア、フレームタイミング、レスポンシブレイアウト | 03-temporal-design.md |
| ナレーション同期、キャプション、ビート検出、スペクトラム | 04-audio-sync.md |
| タイポグラフィ、カラー、禁止パターン、モーション原則 | 05-anti-slop-aesthetics.md |
| レンダリングの遅さ、memoization、バンドルサイズ、Lambda | 06-performance.md |
| ソーシャル、デモ、説明動画用の既成プロンプト | 07-prompt-templates.md |
| CI/CD、Lambda、CloudRun、スナップショットテスト | 08-rendering-pipeline.md |
| CRMウェブフック → Lambda → S3 パイプライン | 09-webhook-integration.md |
| バルクレンダーファンアウト、/api/render/batch | 10-batch-rendering.md |
| Pre-commitフック、CIゲート、コンポジションリンティング | 11-validation-pipeline.md |
黄金ルール
- フレームがすべて。 すべてのアニメーションは
useCurrentFrame()から派生します。CSSアニメーションやタイマーは使用禁止。 - 決定論のみ。
Math.random()は禁止。代わりに Remotion のrandom(seed)を使用。 - Spring > リニア。 モーションはデフォルトで
spring()を使用。リニアはロボット的。 - すべての入力動画に OffthreadVideo。 MP4入力には
<Video>を使用しないでください。 - 非同期データはレンダリングをゲートする。 フォント、データ、外部アセットには
delayRender()/continueRender()を使用。 - すべてのCompositionにZod。 実行時バリデーションにより、不正なプロパティによるレンダリングクラッシュを防止。
- すべてのシーンにReact.memo。 不要な再レンダリングはレンダリング時間とLambdaのコストを増大させます。
- コミット前に検証。 Pre-commitフックは7つの大罪をすべてキャッチします。絶対に無効にしないでください。
- デプロイ前にテスト。 Lambdaサイト作成前にテストハーネスが実行されます。壊れたコンポジションはLambdaに到達しません。
- 動画はデータベースの行。 大規模なパーソナライズ動画は、レンダリングをデータパイプラインの出力として扱います。
- アンチスロップか無か。 Interフォント、紫のグラデーション、絵文字アイコンは禁止。以上。
- コンポジションのバージョン管理。 v2をデプロイし、テストし、アクティベートします。旧バージョンのウェブフックは旧バージョンをレンダリングします。本番を壊さないでください。
決定木
動画を作る？
├── ソーシャルショートフォーム（TikTok/Reels）→ 03, 04, 05, 07 を読み込み
├── プロダクトデモ / 説明動画 → 02, 03, 04, 05 を読み込み
├── 大規模パーソナライズ → 06, 08, 09, 10 を読み込み
├── CI/CDパイプライン → 08, 11 を読み込み
└── 基本だけで良い → 01, 02, 06, 11 を読み込み