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() を使用した物理ベースのアニメーション：
| プリセット | 設定 | 使用例 |
|---|---|---|
| 弾む (Bouncy) | mass: 0.5, damping: 8, stiffness: 120 | 遊び心のある表示、ロゴのバウンド |
| 滑らか (Smooth) | mass: 1, damping: 15, stiffness: 80 | UIトランジション、スライドイン |
| きびきび (Crisp) | mass: 0.8, damping: 20, stiffness: 200 | 素早いインタラクション、トグル |
| 段階的 (Staggered) | アイテムごとのフレームオフセット付きの任意のプリセット | リスト表示、グリッドアニメーション |
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>
パフォーマンスルール
- アニメーションに
useEffectを使用しない。useCurrentFrame()+interpolate()を使用する。 - 静的コンポーネントをメモ化する。 フレームに依存しないものには
React.memoを使用する。 - アセットをプリロードする。 ローカルには
staticFile()、リモートURLにはprefetch()を使用する。 - 開発時の高速なレンダリング反復のために、コンポジションは30秒以内に保つ。
- 最終レンダリング前にターゲット解像度（1920x1080 または 1080x1080）でテストする。
反パターン
- CSS の
transitionやanimationを使用しない — Remotion のinterpolate()とspring()を使用する setTimeoutやsetIntervalを使用しない — フレームベースのタイミングのみ使用する- レスポンシブレイアウトに絶対ピクセル配置を使用しない —
AbsoluteFill+ flex を使用する - フレームごとに再生成されるインライン
styleオブジェクトを使用しない — 定数またはuseMemoに抽出する - 制御されていないオーディオを使用しない — 常に明示的な
volumeとstartFromを設定する
完全なコード例とコンポジションテンプレートについては、REFERENCE.md を参照してください。