remotion-transitions

Remotion カスタムトランジション

このスキルでは、Fyltr の Instagram Reel キャンペーンで使われたものと同じパターンを使用し、TransitionPresentation API で本番環境に対応した、エネルギッシュなカスタムトランジションを構築する方法を説明します。

クイックリファレンス

• カスタムトランジションのパターン — TransitionPresentation API、コンポーネントの正確な形、タイミングの仕組み
• トランジションカタログ — 実戦で検証済みの6種類のトランジションと完全なソースコード：ストライプスラム、ズームパンチ、斜めリビール、エメラルドバースト、縦シャッター、グリッチスラム
• アニメーションの計算 — イージング関数、スタガーの計算式、スプリング設定、および全体で使われる clamp 外挿パターン

基本概念

Remotion の @remotion/transitions パッケージでは、TransitionPresentation 型が公開されています。次の値を受け取るコンポーネントを実装します。

• presentationProgress — トランジション開始時は 0 → 終了時は 1
• presentationDirection — "exiting"（前のシーン）または "entering"（新しいシーン）
• children — ラップ対象のシーン

同じコンポーネントが両方のシーンを同時にラップします。方向に応じて、異なる要素をアニメーションさせます。

基本ルール

1. CSS トランジション／アニメーションは使用しないでください — すべての動きは presentationProgress を使って interpolate()／spring() で制御します
2. トランジションコンポーネント内で useCurrentFrame() を使用しないでください — presentationProgress のみを使用します
3. 常に { component, props: {} } を返してください — 空であっても props オブジェクトは必須です
4. コンポーネントの外、モジュールレベルでインスタンスを作成してください — 再レンダリングをまたいで安定性を保てます
5. linearTiming（ドラマチックでフレーム単位の精度が必要なトランジション向け）または springTiming（弾むような物理表現向け）と組み合わせます

リファレンスを読むタイミング

• 新しいカスタムトランジションを構築する場合 → まず custom-transition-pattern.md を読みます
• 既存のエフェクトをコピー／調整する場合 → transition-catalog.md を読みます
• タイミングやイージングの計算をデバッグする場合 → animation-math.md を読みます