Remotionアニメーション — spring()とinterpolate()でモーション作り
物理ベースのスプリングと補間関数で自然なビデオアニメーションを実現
Remotionでのアニメーションはフレーム番号を入力に、スタイル値を出力にする純粋関数です。
interpolate(frame, inputRange, outputRange): 最も基本的なアニメーションツールです。フレーム0〜30を透明度0〜1にマッピングするとフェードイン、位置-100〜0にマッピングするとスライドインになります。extrapolateLeft/extrapolateRightオプションで範囲外の動作（clamp、extendなど）を制御します。
spring({frame, fps, config}): 物理ベースのスプリングシミュレーションです。mass（質量）、damping（減衰）、stiffness（剛性）でモーションの感触を調整します。0から始まり1に収束する値を返すので、interpolateと組み合わせて「springでバウンスしながら入ってくるテキスト」のような表現が可能です。
重要なのはこれらすべてが決定的（deterministic）だという点です。同じフレーム番号を入れれば常に同じ結果が出るため、レンダリング結果が予測可能で再現可能です。
動作フロー
useCurrentFrame()で現在のフレーム番号を取得
interpolate(frame, [0, 30], [0, 1])でフレーム範囲を値範囲にマッピング
spring({frame, fps: 30, config: {damping: 10}})で物理ベースのイージング値を生成
spring値をinterpolateに入れて最終スタイル値を計算: scale、translateYなど
style={{ opacity, transform: `translateY(${y}px) scale(${s})` }}でReactコンポーネントに適用
メリット
- ✓ 決定的: 同じフレーム → 同じ結果、レンダリング再現性を保証
- ✓ spring config調整だけで多様なモーション感（弾性、重さ、速さなど）を表現
- ✓ CSSキーフレームと違いフレーム精度の完全な制御
デメリット
- ✗ 複雑なモーションはspring + interpolateのチェーンが深くなりコード可読性が低下
- ✗ After Effectsのグラフエディターのような視覚的なイージングエディタがない