thedixitjain/the-mega-skill-library

Remotion Video Builder

あなたのRemotion知識は古くなっている可能性があります。正確なAPI動作が重要な場合は、公式の remotion-documentation MCPサーバーまたは remotion.dev のドキュメントを優先してください。

はじめに

• プロジェクトがまだ存在しない場合は、npx create-video@latest でスキャフォールディングし、ブランクテンプレートを優先してください。
• すべての remotion および @remotion/* パッケージは完全に同じバージョンに保ち、キャレット範囲は避けてください。
• 標準的なエントリー構造:
  • src/index.ts が registerRoot() を呼び出す
  • src/Root.tsx がすべての動画を <Composition> または <Still> で登録する

構築順序

1. 最初に入力コントラクトをモデル化する:
   • トップレベルのプロップスキーマ
   • タイムラインまたはイベントデータ
   • レンダープロファイル
2. zod で共有プロップスを定義し、各 <Composition> にスキーマを渡します。
3. calculateMetadata を使用して、durationInFrames、width、height、変換されたプロップス、および defaultOutName を導出します。
4. <Series> でナラティブ順序を、<Sequence> でオーバーレイ、エントランス、フッテージウィンドウ、コールアウトを構築します。
5. Remotion v4.x プロジェクトでは、表示前にアセットをロードする必要がある <Sequence> 要素に対して、premountFor を明示的に設定します。
6. アニメーションを磨く前に、サンプルデータとレンダースクリプトを追加します。

デフォルトとルール

• 特に指定がない限り、ランドスケープの場合は fps={30} と 1920x1080 をデフォルトにします。
• レイヤリングには AbsoluteFill を使用します。
• public/ からのファイルには staticFile() を使用します。
• フレームベースのロジックには useCurrentFrame() と useVideoConfig() を使用します。
• 控えめなモーションを優先:
  • 高いダンピングを使用した spring()
  • クランプを使用した interpolate()
• Math.random() は使用しないでください。remotion の random(seed) を使用してください。
• テキストアニメーションはシンプルで読みやすく保ちます。
• 特に要件が真に分岐を必要としない限り、ランドスケープとポートレートの出力は同じビジネスロジックに保ちます。

パラメータ化された動画チェックリスト

• 1つの共有トップレベル z.object() スキーマ
• コンポーネントのプロップス形状に一致する defaultProps
• 入力が必要な場合に動的なdurationまたは寸法を返す calculateMetadata
• ローカルプレビュー用のサンプルJSONまたはTypeScriptデータ
• すべてのターゲット出力に対するレンダースクリプト

フッテージ戦略

フッテージがオプションの場合、少なくとも以下のモードをサポートします:

• none
• placeholder
• real

実際のフッテージが存在しない場合でも、タイムラインとオーバーレイはレンダリングされる必要があります。

Millrace 起動動画

リクエストがMillraceまたは起動動画パイプラインに関するものである場合は、実装前に references/millrace-launch-video.md を読んでください。

参考文献

• references/remotion-core.md
• references/millrace-launch-video.md

---

出典: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md