remotion-video

Remotion による動画制作

Remotion を使ってプログラムで動画を制作するためのベストプラクティス — アニメーション、トランジション、グラフ、レンダリング。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

主な機能

• スプリングアニメーションのプリセット（弾む、滑らか、キレのある、段階的）
• 補間パターン（カメラズーム、パララックス、スクロールのシミュレーション）
• SVG の描画アニメーション（パスのトレース、ストロークの表示）
• TransitionSeries によるシーントランジション
• 合成のための AbsoluteFill レイヤリング
• グラフアニメーション（棒グラフの伸長、線の描画、円グラフの表示、数値のカウントアップ）
• オーディオの統合と同期
• レンダリング設定

スプリングのプリセット

物理ベースのアニメーションには、Remotion の spring() を使用します。

プリセット	設定	用途
弾む	mass: 0.5, damping: 8, stiffness: 120	遊び心のある表示、ロゴのバウンス
滑らか	mass: 1, damping: 15, stiffness: 80	UI トランジション、スライドイン
キレのある	mass: 0.8, damping: 20, stiffness: 200	反応の速いインタラクション、トグル
段階的	アイテムごとにフレームオフセットを設定した任意のプリセット	リストの表示、グリッドアニメーション

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

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

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});

補間パターン

カメラズーム

import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});

パララックスレイヤー

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

スクロールのシミュレーション

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

SVG の描画アニメーション

strokeDashoffset をアニメーションさせて SVG パスを表示します。

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

グラフアニメーションのパターン

パターン	手法
棒グラフの伸長	高さを 0 から目標値までアニメーションさせ、各棒を 3～5 フレームずつずらします
線の描画	strokeDashoffset アニメーションを使用する SVG パス
円グラフ／ドーナツグラフの表示	conic-gradient の停止位置、または SVG の弧パスをアニメーションさせます
数値のカウントアップ	0 から目標値まで補間し、表示には Math.round() を使用します

シーントランジション

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 15 })}
    presentation={fade()}
  />
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>

パフォーマンスに関するルール

1. アニメーションに useEffect を使用しないでください。 useCurrentFrame() と interpolate() を使用します。
2. 静的なコンポーネントをメモ化します。 フレームに依存しないものには React.memo を使用します。
3. アセットを事前に読み込みます。 ローカルファイルには staticFile()、リモート URL には prefetch() を使用します。
4. 開発中のレンダリングを素早く繰り返せるよう、コンポジションを 30 秒未満に保ちます。
5. 最終レンダリングの前に、目標解像度（1920x1080 または 1080x1080）でテストします。

アンチパターン

• CSS の transition や animation は使用せず、Remotion の interpolate() と spring() を使用します
• setTimeout や setInterval は使用せず、フレームベースのタイミングのみを使用します
• レスポンシブレイアウトで絶対ピクセル位置を指定せず、AbsoluteFill と flex を使用します
• 毎フレーム再生成されるインラインの style オブジェクトは使用せず、定数または useMemo に切り出します
• 音声を制御なしで使用せず、必ず volume と startFrom を明示的に設定します

コード例とコンポジションのテンプレートについては、REFERENCE.md を参照してください。