remotion-animation

Remotion アニメーション

モーションに関するあらゆる知識を 1 つのスキルにまとめています。ルール（単一のレシピ）、ブループリント（複数フェーズのシーンテンプレート）、トランジション（シーン間の切り替え）、テクニック（より幅広いモーションデザインのパターン）が含まれます。

コンポジションの仕様（useCurrentFrame、Sequence、決定性）については、remotion-core を参照してください。

デフォルト：基本ルールを組み合わせる

rules-index.md から 2～4 個のルールを選び、単一の useCurrentFrame() 呼び出しから interpolate() と spring() を使って表現すれば完成です。ブループリントから始めるよりも速く、コードも少なくて済みます。

次の場合はブループリントを読み込みます

• シーンが既存の事前設計済みの複数フェーズテンプレート（brand-reveal、data-story、social-proof など）に一致し、そのフェーズパイプラインを再利用することで作成時間を大幅に節約できる場合
• 複雑な 4～5 フェーズの振り付けを実行できる、信頼できるコード例が必要な場合

ブループリントは blueprints-index.md にあります。各項目から blueprints/<id>.md（レシピ）に移動できます。シーンレベルのオーケストレーションが必要だと判断した場合にのみ読み込んでください。

参照先

知りたいこと	参照先
トリガー／タグから基本的なモーションパターンを選ぶ	rules-index.md
1 つのルールの完全な TSX レシピを読む	rules/<name>.md
複数フェーズのシーンテンプレートを選ぶ	blueprints-index.md
1 つのブループリントの完全なレシピを読む	blueprints/<id>.md
シーンのトランジションを作成する（interpolate 主導、2 つの Sequence 間）	transitions/overview.md、transitions/catalog.md
より幅広いモーションデザインのテクニックを調べる	techniques.md
spring() — 物理設定、減衰、剛性、質量	adapters/spring.md
interpolate() — 外挿、入力／出力範囲、クランプ	adapters/interpolate.md
スタガー — インデックスに基づく遅延パターン、spring のスタガー	adapters/stagger.md
テキストアニメーション — 単語ごと、文字ごと、行ごとの表示	adapters/text-animation.md
SVG パスのアニメーション、ストローク描画、CSS によるシェイプのモーフィング	adapters/svg.md
Three.js / R3F — React での 3D シーン、AnimationMixer のシーク	adapters/three.md
Lottie — @remotion/lottie による After Effects の書き出し	adapters/lottie.md

複数のプリミティブを 1 つのコンポジション内で併用できます。それぞれが同じ useCurrentFrame() から値を取得します。

重要な制約

前提条件：remotion-core → 必須ルール（フレーム決定的であること、Math.random と Date.now を使わないこと、タイムラインに同期するモーションに CSS トランジションを使わないこと、視覚プロパティに useState／useEffect を使わないこと、すべての値を useCurrentFrame() から導出すること）。

core の仕様に加えて、アニメーション作成で守るべき事項：

• レイアウト定数は事前に計算する — レンダリング時に getBoundingClientRect() を呼び出さないでください。並列フレームレンダリング中の DOM 測定は信頼できません。代わりに useVideoConfig() から取得したコンポジションの width／height を使って座標を計算してください
• 空間的なモーションには React のインラインスタイルを使う — left／top ではなく transform: translateX(${x}px) を使います（レイアウトの再計算を避けるため）
• spring() は異なる時刻に再評価されない — 同じ config であれば、同じ frame は常に同じ値を返します
• シーンの境界を越えて値がはみ出さないよう、開始／終了には clamp 外挿を使った interpolate() を使う

アニメーションの基本パターン

spring による開始

const frame = useCurrentFrame();
const {fps} = useVideoConfig();

const scale = spring({frame, fps, config: {damping: 12, stiffness: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

時間指定の補間

const x = interpolate(frame, [30, 60], [-200, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

スタガーパターン

const items = ['A', 'B', 'C', 'D'];
// Each item enters 8 frames after the previous
const getItemSpring = (index: number) =>
  spring({frame: frame - index * 8, fps, config: {damping: 200}});

シーンの終了

const {durationInFrames} = useVideoConfig();
const exitStart = durationInFrames - 20;
const opacity = interpolate(frame, [exitStart, durationInFrames], [1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

関連項目

• remotion-core — コンポジションの構造、決定性の契約、Sequence、メディア要素
• remotion-creative — パレット、タイポグラフィ、ナレーション、ビートのプランニング
• remotion-cli — npx remotion render / studio / lambda
• remotion-keyframes — 詳細なスプリング設定、補間のレシピ、高度なスタッガー