Remotion 動画ツールキット
React コンポーネントを書けば、実際の MP4 動画が手に入ります。このスキルは、AI エージェントに Remotion を使った動画制作の方法を教えます — 最初のアニメーションから本番レンダリングパイプラインまで。
29 のルール。主要な Remotion 機能をすべてカバー。
これで何が作れるか
大規模なパーソナライズ動画 ユーザーデータを JSON プロパティとして渡せば、ユーザーごとにユニークな動画をレンダリングできます。Spotify Wrapped、GitHub Unwrapped、オンボーディングチュートリアルなど — 1 つのテンプレートから何千もの出力を生成。
自動化されたソーシャルメディアクリップ ライブデータ（統計、リーダーボード、製品指標）を取得し、毎日または毎週の動画投稿を、タイムラインエディタに触れることなくレンダリング。
動的な広告とマーケティング動画 顧客名、商品画像、価格を差し替え。同じテンプレートで無限のバリエーションを生成。API または Lambda 経由でサーバーサイドレンダリング。
アニメーションデータ可視化 ダッシュボードや KPI レポートを、アニメーション付きのチャートとトランジションで共有可能な動画クリップに変換。
TikTok と Reels のキャプション 音声を書き起こし、単語ごとにハイライトされた字幕を表示し、アップロード可能な状態でエクスポート。
製品紹介動画 データベースから自動生成 — 画像、仕様、価格 — そのまま MP4 に。
教育・解説コンテンツ アニメーション化された教材、証明書動画、ステップバイステップのチュートリアル — すべてコードで駆動。
サービスとしての動画生成 レンダリングを HTTP エンドポイントとして公開。アプリが JSON を送信すると、動画ファイルが返ってきます。
必要条件
- Node.js 18+
- React 18+（Remotion は React コンポーネントをフレームごとにレンダリングします）
- Remotion —
npx create-video@latestでスキャフォールディング - FFmpeg —
@remotion/rendererに同梱、別途インストール不要 - サーバーレスレンダリングの場合: AWS アカウント（Lambda）または GCP アカウント（Cloud Run）
含まれるもの
コア
| ルール | 説明 |
|---|---|
| コンポジション | 動画、静止画、フォルダ、デフォルトプロパティ、動的メタデータを定義 |
| レンダリング | CLI、Node.js API、AWS Lambda、Cloud Run、Express サーバーパターン |
| メタデータ計算 | レンダリング時に動的に duration、dimensions、props を設定 |
アニメーションとタイミング
| ルール | 説明 |
|---|---|
| アニメーション | フェード、拡大縮小、回転、スライド |
| タイミング | 補間曲線、イージング、スプリング物理 |
| シーケンス | シーンの遅延、連鎖、オーケストレーション |
| トランジション | シーン間の切り替えエフェクト |
| トリミング | アニメーションの開始または終了をカット |
テキストとタイポグラフィ
| ルール | 説明 |
|---|---|
| テキストアニメーション | タイプライター、単語ハイライト、リビールエフェクト |
| フォント | Google Fonts とローカルフォントの読み込み |
| テキスト測定 | テキストをコンテナに合わせる、オーバーフロー検出 |
メディア
| ルール | 説明 |
|---|---|
| 動画 | 埋め込み、トリミング、速度、音量、ループ、ピッチシフト |
| 音声 | インポート、トリミング、フェード、音量と速度の制御 |
| 画像 | Img コンポーネント |
| GIF | タイムラインと同期した GIF 再生 |
| アセット | 任意のメディアをコンポジションにインポート |
| デコードチェック | ブラウザ互換性の検証 |
キャプションと字幕
| ルール | 説明 |
|---|---|
| キャプション書き起こし | Whisper、Deepgram、AssemblyAI による音声からキャプションへ |
| キャプション表示 | TikTok スタイルの単語ごとのハイライト表示 |
| SRT インポート | 既存の .srt ファイルを読み込み |
データ可視化
| ルール | 説明 |
|---|---|
| チャート | アニメーション棒グラフ、折れ線グラフ、データ駆動型ビジュアル |
アドバンスト
| ルール | 説明 |
|---|---|
| 3D コンテンツ | Three.js と React Three Fiber |
| Lottie | Lottie を使った After Effects アニメーション |
| TailwindCSS | Tailwind でコンポジションをスタイリング |
| DOM 測定 | レンダリング時に要素の寸法を測定 |
メディアユーティリティ
| ルール | 説明 |
|---|---|
| 動画の長さ | 長さを秒単位で取得 |
| 動画の寸法 | 幅と高さを取得 |
| 音声の長さ | 音声の長さを取得 |
| フレーム抽出 | 特定のタイムスタンプでフレームを抽出 |
クイックスタート
# プロジェクトを作成
npx create-video@latest my-video
# ブラウザでプレビュー
cd my-video && npm start
# MP4 にレンダリング
npx remotion render src/index.ts MyComposition out/video.mp4
# 動的データを渡す
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
コントリビュート
ソース: github.com/shreefentsar/remotion-video-toolkit
何か足りない？より良いアプローチを見つけた？PR を送ってください — 新しいルール、改善された例、バグ修正など、すべて歓迎します。
Zone 99 により構築