remotion-motion-graphics

Remotion モーショングラフィックス

Remotion は React コンポーネントをフレームごとにレンダリングし、動画を生成します。ボトルネックはコードの品質ではなく、モーションデザインの技術です。十分な訓練を受けていない生成では、直線的なイージング、透明度だけのフェード、同時に始まる登場、平坦な色、質感のない映像が生成されます。これが「ありがちな AI 動画」の見た目です。このスキルは、そうした結果を防ぐためのものです。

絶対に守るルール（すべてのコンポジションに適用）

1. 線形補間は絶対に使わないでください。 すべての interpolate() にイージング曲線を設定し、登場には spring() を優先します。常に extrapolateLeft/Right: "clamp" を指定してください。
2. 登場時は2～3個のプロパティを組み合わせてアニメーションさせます（不透明度＋translateY＋scale）。フェードだけでの登場は禁止です。
3. すべてに時間差をつけてください。 リスト、単語、光線、カードには、3～6フレームのずれをつけます。同時に登場させてはいけません。
4. 退出アニメーションを必ず入れ、登場より速くします（約10フレーム、登場は約20フレーム）。
5. すべてのシーンに5層のスタックを配置します。下から順に、背景メッシュ → アセット → グラフィック／文字 → カラーグレーディング → 粒子＋ビネットです。単色の背景は使わないでください。
6. 静止画像には必ず Ken Burns 効果を適用します（ゆっくり拡大 1→1.08 ＋パン）。動画アセットには <OffthreadVideo> を使い、<Video> は使わないでください。
7. 静止している要素にもわずかな動きを加えます。画面上に2秒を超えて表示される要素には、正弦波状の微細な動きをつけてください。
8. タイミングはすべて useVideoConfig() を介して fps から算出します。 フレーム番号を直接指定しないでください。
9. プロジェクトの先頭にテーマオブジェクトを1つ用意します（色、イージング、スプリングのプリセット、フォント）。コンポーネント内で16進カラー値やイージングを直接指定しないでください。
10. レンダリングし、フレームを抽出して確認し、修正して、再レンダリングします。 未検証のレンダリング結果を納品してはいけません。この確認サイクルは必須です。詳しくは以下の「検証」を参照してください。

ワークフロー

ステップ1 — 範囲の確認

動画の長さ、fps（デフォルトは30。動きが速く激しい場合のみ60）、サイズ（Reels／Shorts は1080×1920、横長は1920×1080）、利用可能なアセット（画像、映像素材、音声、ロゴ）、新規コンポジションか既存プロジェクトの編集かを確認します。 既存プロジェクトを編集する場合は、まず src/ をすべて読み、テーマを見つけるか新たに作成し、機能を追加する前に上記ルールへの違反を修正します。

ステップ2 — セットアップ

新規プロジェクト：

npm install remotion @remotion/cli react react-dom
# optional: @remotion/transitions @remotion/motion-blur @remotion/google-fonts

このスキルの assets/theme.ts を src/theme.ts にコピーし、ユーザーのブランドに合わせてカラーパレットを調整します。構成は次のとおりです。src/index.ts（registerRoot）→ src/Root.tsx（Composition、長さ／fps／サイズ）→ src/scenes/*.tsx → src/components/*.tsx。ユーザーのアセットは public/ に置き、staticFile() を使って読み込みます。

ステップ3 — 作成

再利用可能なコンポーネントの実装（BgMesh、Grade、Grain、Vignette、KenBurns、WordReveal、Stagger、Counter、Spark、トランジション、パララックス）については、references/motion-patterns.md を読んでください。シーンはこれらのパターンを組み合わせて作成します。ペース配分、リズム、タイポグラフィ、カラーパレット、サウンドデザインのルールについては、references/design-rules.md を読んでください。

シーンのリズム：HIT → 静止状態を維持（15～20フレーム）→ 展開 → HIT。最初の15フレーム以内に何かを動かしてください。新しい視覚要素を出さずに90フレームを超えてはいけません。

ステップ4 — レンダリング

npx remotion render src/index.ts <CompId> out/video.mp4 --codec h264 --crf 17

Remotion には Chromium のバイナリが必要です。自動ダウンロードに失敗する場合（サンドボックス、オフラインの CI など）は、バイナリを見つけて明示的に渡してください。

which chromium chromium-browser google-chrome 2>/dev/null
ls /opt/pw-browsers 2>/dev/null   # Playwright installs live here
npx remotion render ... --browser-executable=<path>

Chrome のフル版で「Old Headless mode has been removed」というエラーが出る場合は、代わりに headless_shell バイナリを使ってください（Playwright には chromium_headless_shell-*/chrome-linux/headless_shell として同梱されています）。

ステップ 5 — VERIFY（必須。絶対に省略しないでください）

重要なタイミングでフレームを抽出し、それぞれを目視で確認します。システムに ffmpeg がないマシンでも動作し、正確なフレームをレンダリングできるポータブルな方法：

for f in 15 45 90 150; do
  npx remotion still src/index.ts <CompId> out/check_$f.png --frame $f --overwrite
done

システムに ffmpeg がある場合は、完成した mp4 からフレームを抽出すると、エンコード自体も検証できます（-ss によるシークは select= フィルターよりポータブルです。select= はシェルによっては引用符の扱いで問題が発生し、Remotion にバンドルされた ffmpeg でも動作しない場合があります）：

ffmpeg -v error -ss 1.5 -i out/video.mp4 -frames:v 1 check_1.png

頻度の高い順に、次の問題を探して修正します：

• 余白の不具合：gap／margin の em はテキストサイズではなく、親要素のフォントサイズ（多くの場合 16px）を基準にします。大きな文字の周囲にあるフレックスコンテナでは px 値を使用してください。
• テキストがあふれている、またはフレームの端に触れている（9:16 では重要なコンテンツを縦方向の中央 75% に配置してください。プラットフォームの UI が上下を覆います）。
• 登場前または退場後に要素が表示されている（clamp の不足）。
• 色やコントラストの不具合：1 フレーム内にヒーローカラーが 2 つ以上の要素で使われている、グレーディング上の暗いテキストが読めない。
• レイヤー順の誤り（グレイン／ビネットは最前面に、グレーディングはコンテンツの上に配置する必要があります）。 修正 → 再レンダリング → 再抽出 → 再確認。問題がないことを確認してから納品してください。 最後に references/design-rules.md の末尾にある最終チェックリストを実行します。

ユーザーの既存映像を編集する

ゼロから作成するのではなく、既存の mp4 を加工する（字幕、グレーディング、イントロ／アウトロを追加する）場合は、ファイルを public/ に置き、アセットレイヤーとして <OffthreadVideo src={staticFile("clip.mp4")} /> でレンダリングします。コンポジションの長さはクリップの長さに合わせ、グラフィック／グレーディング／グレインをその上に重ねます。コンポジションを設定する前に、ffprobe でクリップの長さと fps を取得してください。音声に同期した単語単位の字幕については、references/motion-patterns.md の字幕セクションを参照してください。

参考ファイル

• references/motion-patterns.md — コピーして使えるコンポーネントライブラリ：背景、グレーディング／グレイン／ビネット、Ken Burns、テキストの表示、カウンター、トランジション、視差、オーディオ同期、字幕。コンポーネントを書く前に読んでください。
• references/design-rules.md — カラーパレット、タイポグラフィのルール、シーン構成、サウンドデザイン、納品前チェックリスト。シーンを設計する前と、最終納品の前に読んでください。
• assets/theme.ts — すべてのプロジェクトにコピーするテーマのテンプレート。

積極的に避けるべきよくある失敗

• アイコンに絵文字を使う。 絵文字はフルカラーのプラットフォーム固有の字形（緑の ✳️、青い 🌐）としてレンダリングされ、カラーパレットを無視してヒーローカラーを 1 色にするルールをひそかに破ります。また、指定した背景の上にそのまま表示されます（オレンジ色のタイルにオレンジ色のマスコットを置くと見えなくなります）。テーマカラーを使って CSS／SVG でグリフを描画するか、抽出した各フレームで絵文字を確認してください。
• SFX アセットがないことは、無音のまま納品する理由にはなりません。 Node スクリプトで 16-bit WAV の最小限の音素材セットを合成し（ノイズバーストのウーシュ、ピッチが下がるポップ、サイン波の重低音キック、わずかにデチューンしたサイン波のパッド）、public/sfx/ に保存します。リポジトリの examples/scripts/ を参照してください。ダウンロード不要で、完全に決定論的です。
• テーマに沿った再利用可能なパーツではなく、巨大なコンポーネントを 1 つ作る。
• Composition とシーンコンテンツの durationInFrames が一致しない（無音の余白が生じる）。
• 再レンダリング時に --overwrite を忘れ、古いファイルを確認してしまう。
• フォント：ヒーローテキストにシステムのデフォルトフォントを使わないでください。@remotion/google-fonts または @font-face と staticFile でディスプレイフォントを読み込みます。
• レンダリングして検証する代わりに、結果をユーザーに「説明」しようとする。