remotion-video-toolkit について
Remotion で動画を作る方法を AI エージェントに案内するスキルです。React のコンポジションやアニメーションからレンダリングまで扱い、メディア、字幕、データ可視化、CLI・API・クラウドでの出力パターンも含みます。
主な機能
- 01React による動画コンポジション
- 02アニメーション、タイミング、トランジション
- 03音声、動画、画像、GIF の処理
- 04字幕の文字起こしと表示
- 05アニメーションチャートとデータ可視化
- 06CLI とクラウドレンダリングのパターン
活用シーン
- 01JSON データから個別動画を生成
- 02定期投稿するソーシャルメディア動画の作成
- 03複数パターンの商品広告の制作
- 04アニメーションチャートや字幕のレンダリング
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/remotion-video-toolkitを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
rules/3d.mdassets.mdcan-decode.mdcalculate-metadata.mdanimations.mdcharts.mdaudio.mdget-video-dimensions.mdimages.mdget-video-duration.mddisplay-captions.mdfonts.mdcompositions.mdgifs.mdget-audio-duration.mdextract-frames.mdimport-srt-captions.mdlottie.mdsequencing.mdtiming.mdtransitions.mdrendering.mdmeasuring-dom-nodes.mdtext-animations.mdmeasuring-text.mdtailwind.mdtranscribe-captions.mdrules/assets/text-animations-typewriter.tsxcharts-bar-chart.tsxtext-animations-word-highlight.tsx詳細
Remotion Video Toolkit
React コンポーネントを作成して、実際の MP4 動画を生成できます。このスキルでは、初めてのアニメーションから本番環境のレンダリングパイプラインまで、Remotion を使った構築方法を AI エージェントに教えます。
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 サーバーのパターン |
| メタデータの計算 | レンダリング時に再生時間、寸法、プロパティを動的に設定します |
アニメーションとタイミング
| ルール | 説明 |
|---|---|
| アニメーション | フェード、拡大縮小、回転、スライド |
| タイミング | 補間カーブ、イージング、スプリング物理 |
| シーケンス | シーンを遅延、連結、構成します |
| トランジション | シーン間のトランジション |
| トリミング | 任意のアニメーションの開始または終了をカットします |
テキストとタイポグラフィ
| ルール | 説明 |
|---|---|
| テキストアニメーション | タイプライター、単語のハイライト、表示エフェクト |
| フォント | Google Fonts とローカルフォントの読み込み |
| テキストの計測 | テキストをコンテナーに収め、はみ出しを検出します |
メディア
| ルール | 説明 |
|---|---|
| 動画 | 埋め込み、トリミング、速度、音量、ループ、ピッチ変更 |
| 音声 | インポート、トリミング、フェード、音量と速度の調整 |
| 画像 | Img コンポーネント |
| GIF | タイムラインと同期した GIF 再生 |
| アセット | あらゆるメディアをコンポジションにインポートします |
| デコードチェック | ブラウザーとの互換性を検証します |
キャプションと字幕
| ルール | 説明 |
|---|---|
| キャプションの文字起こし | Whisper、Deepgram、AssemblyAI を使って音声からキャプションを作成します |
| キャプションの表示 | TikTok 形式の単語ごとのハイライト表示 |
| SRT のインポート | 既存の .srt ファイルを読み込みます |
データビジュアライゼーション
| ルール | 説明 |
|---|---|
| グラフ | アニメーション付きの棒グラフ、折れ線グラフ、データ駆動型のビジュアル |
高度な機能
| ルール | 説明 |
|---|---|
| 3Dコンテンツ | Three.js と React Three Fiber |
| Lottie | Lottie を使用した After Effects アニメーション |
| TailwindCSS | Tailwind を使ったスタイル構成 |
| DOM の計測 | レンダリング時に要素の寸法を計測 |
メディアユーティリティ
| ルール | 説明 |
|---|---|
| 動画の長さ | 秒単位の長さを取得 |
| 動画の寸法 | 幅と高さを取得 |
| 音声の長さ | 音声の長さを取得 |
| フレームの抽出 | 指定したタイムスタンプのフレームを抽出 |
クイックスタート
# Scaffold a project
npx create-video@latest my-video
# Preview in browser
cd my-video && npm start
# Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4
# Pass dynamic data
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
コントリビューション
ソース： github.com/shreefentsar/remotion-video-toolkit
不足しているものはありますか？より良い方法を見つけましたか？新しいルール、例の改善、バグ修正など、ぜひ PR を作成してください。
Zone 99 によって開発されました。