Back to Details

vox

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vox

Vox

One photo and one idea in, a 6 to 15 second paper-collage animation out, in the look of Vox explainer documentaries. Then every change is one more prompt: another person, another place, another object, the same animation.
Talk to them in their language. 
<dir>
= 
video-agent/vox/<slug>/
in their project (slug: 2 to 4 words of the idea, kebab-case).
text
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
输入一张照片和一个创意，输出一个 6 至 15 秒的纸质拼贴动画，呈现 Vox 解释型纪录片的视觉风格。此后，每次修改只需再发一句提示：换一个人、换一个地点、添加一个物件，同时保留同一条动画。
使用用户所使用的语言与用户交流。
<dir>
= 
video-agent/vox/<slug>/
，位于用户项目中（slug：创意的 2 至 4 个单词，使用 kebab-case）。
text
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. Tools (once)

1. 工具（只需准备一次）

bash
codex --version && codex login status
ffmpeg -version | head -1
node --version
  • Codex missing: 
    npm i -g @openai/codex
    (Node 20+) or 
    brew install codex
    . Not logged in: they run 
    codex login
    themselves ("Sign in with ChatGPT"). Never ask for a key or a password in the chat.
  • ffmpeg missing: 
    brew install ffmpeg
    (macOS), 
    sudo apt install ffmpeg
    (Linux), 
    winget install Gyan.FFmpeg
    (Windows).
  • Then in 
    <dir>
    : 
    npm init -y >/dev/null && npm i puppeteer@24
    (headless Chrome for the capture, downloaded once).
bash
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：macOS 使用 
    brew install ffmpeg
    ，Linux 使用 
    sudo apt install ffmpeg
    ，Windows 使用 
    winget install Gyan.FFmpeg
    。
  • 随后在 
    <dir>
    中运行：
    npm init -y >/dev/null && npm i puppeteer@24
    （用于录制的 headless Chrome，只下载一次）。

2. The plan (one message, then their yes)

2. 方案（先发一条消息，然后等待用户确认）

From the photo and the idea, plan the collage like a page of a magazine, then the moves:
  • The hero: their photo, always the REAL photo (never redrawn by an AI: faces drift). Cut out (step 3) and printed as halftone by code in the page.
  • A background plate: one full-frame 9:16 paper scene that sets the place and the time (a sky, a city, a map, a desk, a sheet of aged paper).
  • 3 to 6 cut-outs: the objects of the story (a monument, newspapers, banknotes, a car, a building, clouds, birds). Each one is a separate layer so it can move on its own.
  • The moves (6 to 15 s): the camera pushes in slowly the whole time, layers enter one by one every 0.5 to 1.5 s (slide in, rise from below, drop from above, a torn-paper wipe), something keeps living (clouds drifting, a bird flapping with two cut-outs, notes falling), one title on a torn paper strip if the idea has one (a place and a year, a name). All on a 12 fps stop-motion clock.
Show the layers as a numbered list (name, plate or cut-out, what it shows) and the beat timeline in 4 to 6 lines. Wait for a yes: each layer is one Codex image on their plan.
根据照片和创意，先像规划杂志页面一样规划拼贴，再规划运镜：
  • 主体（hero）：始终使用用户的真实照片（绝不让 AI 重绘，因为人脸容易变形）。抠图（步骤 3），再由页面中的代码印刷成半色调效果。
  • 背景底板（plate）：一张铺满画面的 9:16 纸艺场景，用来交代地点与时间（天空、城市、地图、桌面、一张做旧纸张）。
  • 3 至 6 个剪纸（cut-out）：故事中的物件（纪念碑、报纸、钞票、汽车、建筑物、云朵、鸟）。每个物件都独立成层，因此可以单独运动。
  • 运镜（moves）（6 至 15 秒）：摄影机全程缓慢推进，图层每隔 0.5 至 1.5 秒依次进入（滑入、从下方升起、从上方落下、撕纸转场），同时让某个元素持续活动（云朵飘动、由两片剪纸构成的鸟拍动翅膀、纸片落下）。如果创意中有标题，就在一条撕纸上放置一个标题（地点和年份、人名）。全部采用 12 fps 的定格动画时钟。
以编号列表展示各个图层（名称、底板或剪纸、内容），并用 4 至 6 行列出节拍时间线。等待用户确认：方案中的每个图层都对应一张由 Codex 生成的图像。

3. Their photo: cut out, never redrawn

3. 用户的照片：抠图，绝不重绘

bash
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
comes with uv (
curl -LsSf https://astral.sh/uv/install.sh | sh
, or 
pip install uv
). The first run downloads the model (about a minute). Look at the PNG: a clean silhouette, no chunk of background left. Then:
  • Cut-out bad or no uv: keep the photo as a rectangular print instead, it is very Vox too: 
    layers/hero.jpg
    placed as a print with a white border and torn edges (see 
    references/animation.md
    , "The photo as a print").
  • A person who never had a photo (Napoleon, a painting): an engraving or painting from the public domain (Wikimedia Commons), cut out the same way.
  • Only photos of people who agreed, or public-domain images. Say it once if they send someone else's photo.
The halftone, the white scissor border and the shadow are added by the page (
references/animation.md
), so the real photo stays the real photo.
bash
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
）。首次运行会下载模型，大约需要一分钟。检查 PNG：轮廓应干净，不能残留背景块。然后：
  • 抠图效果差或没有 uv：将照片保留为矩形印刷图，这同样很有 Vox 风格：把 
    layers/hero.jpg
    作为带白色边框和撕边的印刷照片放入页面（参见 
    references/animation.md
    中的“The photo as a print”）。
  • 没有照片可用的人物（如拿破仑）或绘画作品：使用 public domain 的版画或绘画（Wikimedia Commons），并采用相同方式抠图。
  • 仅使用获得当事人同意的照片或 public domain 图像。如果用户发来他人照片，提醒一次即可。
半色调、白色剪刀边缘和阴影均由页面添加（
references/animation.md
），因此真实照片始终保持原样。

4. The layers with Codex

4. 使用 Codex 制作图层

Write 
<dir>/shots.json
and build every prompt with 
references/look.md
: the subject, plus the green-screen sentence for a cut-out, plus the style sentence. Never the word "Vox" in a prompt, never a logo, a wordmark or any readable text in an image (newspapers and notes get illegible type texture only).
Run the jobs with the command of 
references/look.md
, 3 at a time in the background, always ending with 
< /dev/null
. A job takes 1 to 3 minutes. Then for each cut-out, the chroma cut:
bash
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
Check each layer by eye: put it on red to see any green fringe (
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
), and no text or letters in it. A bad one: fix the subject and run that one again.
编写 
<dir>/shots.json
，并使用 
references/look.md
构建每个提示词：主体、用于剪纸的绿幕句子、风格句子。提示词中绝不能出现“Vox”一词，图像中绝不能出现 logo、wordmark 或任何可读文字（报纸和便笺只能带不可辨识的排版纹理）。
使用 
references/look.md
中的命令运行任务，每次在后台运行 3 个，命令末尾始终带上 
< /dev/null
。每个任务需要 1 至 3 分钟。随后对每个剪纸图层执行色度抠图：
bash
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. The animation page

5. 动画页面

Write 
<dir>/animation.html
from the template of 
references/animation.md
(the whole page is there, tested) and adapt it to the plan: the layers, their sizes and places, the timeline in 
setT
. The rules that make it look like a Vox documentary are in the same file. Keep 
setT(t)
a pure function of 
t
: the capture calls it frame by frame.
Open it in their browser to preview (it plays on its own): 
open <dir>/animation.html
(macOS), 
xdg-open
(Linux), 
start
(Windows). Fix what looks wrong before the capture.
根据 
references/animation.md
中的模板编写 
<dir>/animation.html
（模板中包含完整且经过测试的页面），并按照方案调整图层、尺寸、位置以及 
setT
中的时间线。让页面呈现 Vox 纪录片风格的规则也位于同一个文件中。保持 
setT(t)
为关于 
t
的纯函数：录制程序会逐帧调用它。
在用户的浏览器中打开预览（页面会自动播放）：macOS 使用 
open <dir>/animation.html
，Linux 使用 
xdg-open
，Windows 使用 
start
。录制前修复所有看起来不正确的部分。

6. The MP4

6. MP4

Write 
<dir>/capture.mjs
from 
references/animation.md
, then:
bash
cd <dir> && node capture.mjs animation.html <slug>.mp4
About 4 s of work per second of video. Look at 3 frames (start, middle, end) before showing it: 
ffmpeg -v error -y -ss <t> -i <slug>.mp4 -frames:v 1 -vf scale=540:-1 raw/frame-<t>.jpg
. Hand over the MP4 path. Music or a voice go on top in their editor, or with 
/short-editing
.
根据 
references/animation.md
编写 
<dir>/capture.mjs
，然后运行：
bash
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. Change it with one more prompt

7. 再用一句提示修改

Same 
<dir>
, same page, only what changes:
  • Another person ("do it with Napoleon"): a new hero (step 3), same layers, same timeline: the page swaps 
    layers/hero.png
    and is captured again.
  • Another object or place: one new Codex layer (step 4), placed in the page, the rest stays.
  • Another move or timing: only 
    setT
    . Another format: see "Formats" in 
    references/animation.md
    .
Never regenerate layers that did not change.
继续使用同一个 
<dir>
和同一个页面，只修改发生变化的部分：
  • 换一个人（“do it with Napoleon”）：使用新的主体（步骤 3），其余图层和时间线保持不变；页面替换 
    layers/hero.png
    ，然后重新录制。
  • 换物件或地点：只新增一个 Codex 图层（步骤 4）并放入页面，其余内容保持不变。
  • 更换运镜或时间安排：只修改 
    setT
    。其他格式参见 
    references/animation.md
    中的“Formats”。
绝不重新生成未发生变化的图层。

Honest limits

实际限制

  • Codex's image tool decides the details: a layer can come with letters on it or a green fringe. Always look.
  • The cut-out of a busy photo can miss hair or fingers: the print version is the safe fallback.
  • Each layer counts against their ChatGPT plan's Codex limits.
  • The look is inspired by Vox's documentaries: never their name, logo or wordmark on screen.
  • Codex 的图像工具会决定具体细节：生成的图层可能带有字母或绿色边缘，因此务必目视检查。
  • 复杂照片的抠图可能漏掉头发或手指；印刷照片版本是可靠的后备方案。
  • 每个图层都会占用用户 ChatGPT 方案中的 Codex 使用额度。
  • 视觉风格仅受 Vox 纪录片启发：画面中绝不能出现其名称、logo 或 wordmark。