Remotionは、動画をプログラムで作成するためのオープンソースフレームワークです。
どうやらcodexアプリと連動できそうなのでメモとして残しておきます。
使ってみたい！！
プロンプトで動画をつくれるなんて夢のようだなとと思う。
確かに、いまでも一部動画をつくるプロンプトを作るAIができているものの
プログラムと連動させてというの、とても面白い子やってみたいなと思った。
Remotionはまさにあなたが“動画をプログラムでつくる”という発想に直結するフレームワークです。コードで動画を定義し、レンダリングまで行えるオープンソースの仕組みとして、React／JavaScript／TypeScriptの知識をそのまま動画制作に活かせます。既存のAfter EffectsやPremiereのようなGUI操作中心の方法とは根本的にアプローチが異なります。
Remotion の基本概念
Remotion の本質は「動画をコードでつくること」です。
- React コンポーネントを書くだけで動画を生成 できる。
- JSX や CSS を使って視覚要素（テキスト、画像、アニメーション、音声）を定義し、フレームごとに計算・描画させる。
- Node.js + Headless Chrome + FFmpeg を組み合わせて、最終的に MP4 などの動画ファイルとして書き出す。
このコード中心の設計によって、バージョン管理、APIデータとの連携、自動生成のループ処理が自然に組み込めます。たとえばJSONデータや外部APIから値を受け取って、それに応じた動画バリエーションを大量に生成するような使い方が可能です。
実際の開発フロー（概要）
- プロジェクト生成
ターミナルでnpx create-video@latestを実行して新規 Remotion プロジェクトを作成します。
ここで React + TypeScript をベースにしたセットアップが整います。 - コンポーネント定義
React でVideoやCompositionといったコンポーネントを定義し、フレーム番号や時間経過に応じたアニメーションロジックを組みます。 - プレビューとレンダリング
Remotion Studio でリアルタイムのプレビューができ、最終レンダリングは CLI から行います。 - レンダリングの自動化
動的なプロパティ（例: JSON で指定したタイトル、説明など）を受け取り、コマンドラインで動画を生成できます。これをスクリプト化すれば自動生成ワークフローも作れます。
AI と連携する流れ（Codex / Claude Code / Antigravity）
最近の注目は、AI側で Remotion の Agent Skills を読み込ませるケースです。
Remotion公式が提供する Agent Skills を導入すると、Codex や Claude Code、Antigravity のような AIツールが Remotion のベストプラクティスを理解した状態でコード生成〜レンダリングまで支援してくれます。簡単なプロンプト（例: 「このテキストと画像で解説動画をつくって」）を生成すると、AIが適切な React/Remotion コードを出力し、動画ファイルまで作成することが可能です。
Codexアプリなどにプロジェクトフォルダを読ませて、Remotion関連のスキルを有効にしておくと、プロンプトベースの動画生成体験が現実的になります。これは「プロンプトで動画を作る」という未来像に近い形です。
向いているユースケース
プログラム的な動画制作は、特に以下のような用途で効果を発揮します：
- テンプレ化＋大量生成: マーケティング動画、パーソナライズド動画、定期更新動画。
- データ連携: API から取った値をモーションやテロップに反映。
- 構造化アニメーション: React のコンポーネント構造をそのまま動画の構成要素に。
- 自動化ワークフロー: スクリプトや CI から動画生成タスクを起動。
何を用意すれば始められるか
最低限必要なのは以下の環境です：
- Node.js（最新版推奨）
- npm / Yarn
- React / TypeScript の基本知識
- FFmpeg（Remotion のレンダリングで内部的に使われる）
公式ドキュメントにはステップバイステップのガイドがあり、セットアップから動画生成までの流れが詳述されています。
