vox

Vox

写真1枚とアイデア1つから、Voxの解説ドキュメンタリーのような雰囲気の6〜15秒のペーパーコラージュアニメーションを作成します。その後は変更するたびにプロンプトを1つ追加するだけです。別の人物、別の場所、別の物でも、同じアニメーションになります。

相手の言語で話しかけてください。<dir> はプロジェクト内の video-agent/vox/<slug>/ です（slug：アイデアを表す2〜4語をケバブケースで記述）。

video-agent/vox/<slug>/
├── photo.jpg        their photo, untouched
├── layers/          every layer of the collage (PNG with alpha, plates in JPG/PNG)
├── raw/             Codex renders before the chroma cut, and the job logs
├── shots.json       the layers asked to Codex (name, kind, ar, subject)
├── animation.html   the animation: window.setT(t), opens in any browser and plays
├── capture.mjs      frames -> MP4
└── <slug>.mp4

1. ツール（初回のみ）

codex --version && codex login status
ffmpeg -version | head -1
node --version

• Codex がない場合：npm i -g @openai/codex（Node 20+）または brew install codex を実行します。ログインしていない場合は、本人に codex login を実行してもらいます（「Sign in with ChatGPT」）。チャットでキーやパスワードを尋ねてはいけません。
• ffmpeg がない場合：brew install ffmpeg（macOS）、sudo apt install ffmpeg（Linux）、winget install Gyan.FFmpeg（Windows）を実行します。
• 次に <dir> 内で実行します：npm init -y >/dev/null && npm i puppeteer@24（キャプチャ用のヘッドレス Chrome。ダウンロードは初回のみ）。

2. プラン（メッセージを1つ送り、相手の承諾を待つ）

写真とアイデアをもとに、雑誌のページのようにコラージュを組み立て、その後に動きを計画します。

• 主役：相手の写真を必ず使います。実際の写真を使い、AIで描き直してはいけません（顔が変わってしまうため）。切り抜き（ステップ3）を行い、ページ内のコードで網点印刷風にします。
• 背景プレート：場所と時間を設定する、画面全体を覆う9:16の紙のシーン（空、街、地図、机、古びた紙など）。
• 3〜6個の切り抜き：ストーリーに登場する物（記念碑、新聞、紙幣、車、建物、雲、鳥など）。それぞれ独立したレイヤーにして、単独で動かせるようにします。
• 動き（6〜15秒）：カメラは全編を通してゆっくりズームインします。レイヤーは0.5〜1.5秒ごとに1つずつ登場します（スライドイン、下から上がる、上から落ちる、破れた紙によるワイプなど）。雲が漂う、2つの切り抜きで鳥を羽ばたかせる、紙幣が落ちるなど、何かが動き続けます。アイデアに合う場合は、破れた紙の帯にタイトルを1つ（場所と年、名前など）入れます。すべて12 fpsのストップモーションのテンポで動かします。

レイヤーは番号付きリストで表示します（名前、背景プレートまたは切り抜き、描写内容）。ビートのタイムラインは4〜6行で示します。承諾を待ってください。各レイヤーについて、プランに基づきCodexで画像を1枚生成します。

3. 写真：切り抜き、描き直しはしない

mkdir -p <dir>/layers <dir>/raw
cp "<their photo>" <dir>/photo.jpg
uvx --from "rembg[cpu,cli]" rembg i <dir>/photo.jpg <dir>/layers/hero.png

uvx は uv に付属します（curl -LsSf https://astral.sh/uv/install.sh | sh または pip install uv）。初回の実行時にモデルをダウンロードします（約1分）。PNGを確認し、輪郭がきれいで背景が残っていないことを確かめます。その後、次のようにします。

• 切り抜きがうまくいかない、または uv がない場合：代わりに写真を長方形のプリントとして使います。これもVoxらしい仕上がりです。layers/hero.jpg を白い縁と破れた端のあるプリントとして配置します（references/animation.md の「The photo as a print」を参照）。
• 写真が存在しない人物（ナポレオン、絵画など）：パブリックドメインの版画または絵画（Wikimedia Commons）を使い、同じ方法で切り抜きます。
• 写真は、本人の同意を得た人物のものか、パブリックドメインの画像のみを使います。他人の写真が送られてきた場合は、そのことを一度伝えます。

網点、白い切り抜きの縁、影はページ側で追加するため（references/animation.md）、実際の写真はそのまま保たれます。

4. Codexでレイヤーを作成

<dir>/shots.json を作成し、references/look.md に従ってすべてのプロンプトを組み立てます。内容は、被写体、切り抜きの場合はグリーンスクリーン用の文、そしてスタイル用の文です。プロンプトに「Vox」という語を使ってはいけません。また、画像にロゴ、ワードマーク、判読可能なテキストを入れてはいけません（新聞や紙幣には判読できない文字のテクスチャのみを使います）。

references/look.md に記載されたコマンドでジョブを実行します。バックグラウンドで一度に3件ずつ実行し、必ず末尾を < /dev/null にします。ジョブには1〜3分かかります。その後、切り抜きごとにクロマキー処理を行います。

ffmpeg -v error -y -i <dir>/raw/<name>.png -vf "colorkey=0x00FF00:0.30:0.10,despill=type=green:mix=0.6:expand=0,format=rgba" <dir>/layers/<name>.png

各レイヤーを目視で確認します。赤い背景に重ねて緑の縁が残っていないか確認し（ffmpeg -v error -y -f lavfi -i color=red:s=1024x1536 -i <layer> -filter_complex "[1:v]scale=1024:-1[a];[0:v][a]overlay=0:0" -frames:v 1 <dir>/raw/check-<name>.png）、文字や文字らしきものがないことも確認します。問題がある場合は被写体の内容を修正し、そのレイヤーだけを再実行します。

5. アニメーションページ

references/animation.md のテンプレートを使って <dir>/animation.html を作成し、計画に合わせて調整します。レイヤー、それぞれのサイズと配置、setT のタイムラインを設定してください。Vox のドキュメンタリーのような見た目にするルールも同じファイルにあります。setT(t) は t のみを引数とする純粋関数にしてください。キャプチャではフレームごとにこの関数が呼び出されます。

ブラウザーで開いてプレビューします（自動再生されます）。open <dir>/animation.html（macOS）、xdg-open（Linux）、start（Windows）を実行してください。キャプチャする前に、見た目のおかしいところを修正します。

6. MP4

references/animation.md をもとに <dir>/capture.mjs を作成し、次を実行します。

cd <dir> && node capture.mjs animation.html <slug>.mp4

動画の 1 秒あたり約 4 秒の処理時間がかかります。動画を見せる前に 3 フレーム（開始、中間、終了）を確認してください。ffmpeg -v error -y -ss <t> -i <slug>.mp4 -frames:v 1 -vf scale=540:-1 raw/frame-<t>.jpg を実行します。MP4 のパスを渡してください。音楽やナレーションは、編集ソフトか /short-editing で追加します。

7. もう 1 つプロンプトを使って変更する

同じ <dir>、同じページを使い、変更する箇所だけを変えます。

• 別の人物（「ナポレオンで作って」など）：新しいヒーロー画像（ステップ 3）を用意し、同じレイヤーとタイムラインを使います。ページで layers/hero.png を差し替えて、もう一度キャプチャします。
• 別のオブジェクトや場所：Codex のレイヤーを 1 つ新しく作成（ステップ 4）してページに配置し、ほかはそのままにします。
• 別の動きやタイミング：変更するのは setT のみです。別のフォーマットについては、references/animation.md の「Formats」を参照してください。

変更のないレイヤーは再生成しないでください。

正直な制約

• Codex の画像ツールが細部を決めます。レイヤーに文字が入ったり、緑色の縁が付いたりすることがあります。必ず確認してください。
• 写真が複雑だと、切り抜きで髪や指が欠けることがあります。そうした場合は、プリント版が確実な代替手段です。
• 各レイヤーは、ChatGPT プランの Codex 利用上限にカウントされます。
• 見た目は Vox のドキュメンタリーに着想を得ています。画面に Vox の名前、ロゴ、ワードマークを表示しないでください。