Remotion で自作ツールの紹介動画を React コンポーネントで作った
背景
Remotion という、React コンポーネントで動画を生成できるフレームワークを知りました。ちょうど自作の HTTP/HTTPS プロキシツール Mimicry の紹介動画がほしいと思っていたので、試しに使ってみることにしました。
今回は Claude Code に「Mimicry の紹介ポイントを調査して、Remotion で紹介動画を作って」と依頼するだけで動画を生成できました。テキストの修正や構成の調整もコードの変更だけで済むので、画面収録より手軽です。
Remotion の概要
Remotion は React コンポーネントを使って動画を生成するフレームワークです。
通常の React アプリと同じように JSX でレイアウトを組み、useCurrentFrame() で現在のフレーム番号を取得してアニメーションを制御します。開発中は Remotion Studio というブラウザベースのプレビュー環境でリアルタイムに確認でき、完成したら npx remotion render で MP4 に書き出せます。
コードで管理できるので Git で差分管理もできます。After Effects のようなタイムラインを操作する必要はありません。
プロジェクトのセットアップ
Remotion の空テンプレートからプロジェクトを作成しました。
npx degit remotion-dev/template-empty mimicry-video
cd mimicry-video
npm install
開発中のプレビューは npm run dev で Remotion Studio を起動します。ブラウザ上でシークバーを動かしながらアニメーションを確認できるので、フィードバックループが速いです。
共通コンポーネント
シーン間で使い回すアニメーションコンポーネントをいくつか用意しました。
FadeIn
フェードイン + スライドアニメーションを行うコンポーネントです。direction props で上下左右のスライド方向を指定できます。
export const FadeIn: React.FC<{
children: ReactNode;
delay?: number;
duration?: number;
direction?: "up" | "down" | "left" | "right" | "none";
}> = ({ children, delay = 0, duration = 20, direction = "up" }) => {
const frame = useCurrentFrame();
const opacity = interpolate(frame - delay, [0, duration], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
// ...
};
interpolate() は Remotion の中核的な関数で、フレーム数をアニメーション値に変換してくれます。この例だと「delay フレーム経過後の duration フレームで opacity を 0 から 1 に変化させる」という意味です。extrapolateLeft/Right: 'clamp' を付けておくと、範囲外の値がクランプされます。
TypeWriter
テキストを 1 文字ずつ表示するタイプライターエフェクトです。フレーム数に応じて表示する文字数を増やしているだけのシンプルな実装ですが、動画にリズムが出ます。
CodeBlock
コードブロックを行ごとにフェードインで表示するコンポーネントです。セットアップ手順やコマンド例を見せるシーンで使っています。
SceneTransition
シーン間のクロスフェードを実現するラッパーコンポーネントです。
シーンのタイムライン管理
Remotion の Sequence コンポーネントを使うと、各シーンの開始フレームと長さを宣言的に管理できます。今回はシーンの定義を配列にまとめて map で展開する形にしました。
const scenes = [
{ duration: 120, Component: Opening },
{ duration: 150, Component: ProblemStatement },
{ duration: 120, Component: SetupDemo },
// ...
];
export const MyComposition: React.FC = () => {
let offset = 0;
return (
<AbsoluteFill style={{ background: colors.bg }}>
{scenes.map(({ duration, Component }, i) => {
const from = offset;
offset += duration;
return (
<Sequence key={i} from={from} durationInFrames={duration}>
<SceneTransition durationInFrames={duration}>
<Component />
</SceneTransition>
</Sequence>
);
})}
</AbsoluteFill>
);
};
シーンの追加や順序変更は配列を編集するだけです。各シーンの duration はフレーム数で指定し、30fps なので 120 は 4 秒になります。
スタイリング
VS Code にインスパイアされたダークテーマのカラーパレットを定義して、全シーンで統一した見た目にしました。
export const colors = {
bg: "#1e1e1e",
bgLight: "#252526",
text: "#d4d4d4",
accent: "#0e639c",
success: "#4ec9b0",
error: "#f14c4c",
// ...
};
プロジェクト構成
最終的なディレクトリ構成はこのようになりました。
mimicry-video/
src/
styles.ts カラーパレット + フォント定義
Composition.tsx シーン構成 + トランジション
Root.tsx Composition 定義（解像度・fps など）
components/ 共通コンポーネント（FadeIn, TypeWriter など）
scenes/ 各シーン（Opening, Problem, Setup ...）
public/
mimicry-icon.png アプリアイコン
動画の書き出し
完成したら 1 コマンドで MP4 に書き出せます。
npx remotion render MimicryIntro out/mimicry-intro.mp4
書き出しにかかった時間は数十秒程度でした。テキストを微修正して再レンダリング、という繰り返しが気軽にできます。
やってみた感想
今回は Claude Code に「Mimicry の紹介すべきポイントを調査して Remotion で紹介動画を作って」と依頼しました。プロジェクトの機能調査からシーン構成の設計、コンポーネントの実装、MP4 の書き出しまで一気にやってくれたので、手軽でした。日本語への変更やインストールコマンドの修正といった細かい調整も、コードの変更だけで済みます。
凝った映像表現やカメラワークが必要な動画には向いていませんが、プロダクト紹介動画やテキストベースのモーショングラフィックスにはぴったりだと感じました。
まとめ
Remotion を使うと React コンポーネントで動画を作れます。プロダクトの紹介動画やデモ動画を作る機会がある方は試してみてください。