在 Codex 里用 Remotion 做一条动态图形视频

这篇教程最后会得到一条真正能播放的动态图形视频：画面先出现品牌标题，随后切换到图片、卖点和结束画面，背景音乐从头播放到结尾。它不是在剪辑软件里拖时间线，而是让 Codex 写 Remotion 代码，再由 Remotion 预览和导出视频。

示例品牌叫 NORTH/01。你可以直接换成自己的 Logo、颜色、字体和图片。第一次练习不必先写完整脚本，照下面的顺序逐段加内容即可。

最终效果

做完后，Remotion Studio 里会出现一条由多个场景组成的视频：

品牌名称从暗色背景中淡入。
产品图片进入画面，旁边出现一句短文案。
两到三个卖点依次出现。
Logo 和行动文案收尾。
一段音乐贯穿整条视频。

最终文件是一个 MP4。这里不锁死时长，先把短片做通，再按内容增加场景。

看懂 Remotion 怎么工作

Remotion 用 React 组件描述画面。文字、图片、背景和动画都写在代码里；Studio 负责预览时间线；渲染命令把这些画面输出成视频。

这意味着你接下来不会手动画每一帧。你要告诉 Codex“画面里有什么、怎样出现、前后场景是什么关系”，Codex 修改项目后，你回到 Studio 看结果。看到问题就描述具体位置，例如“第二个场景的标题挡住了图片”，然后继续修改。

完成这一步后，你应该知道接下来有三个窗口：Codex 对话、项目文件和 Remotion Studio 预览。

在 Codex 中启用 Remotion

打开 ChatGPT 桌面版的 Plugins 页面，搜索 Remotion 并安装。然后新建一个 Codex 任务，在输入框中键入：

$remotion

Codex 提示使用 Remotion 插件时，点击接受。接着发送：

创建一个空白的 Remotion 项目，使用 TypeScript。
项目名称叫 north-motion。
创建后启动 Remotion Studio，并告诉我项目目录和启动命令。

插件会为 Codex 提供创建、预览和渲染 Remotion 项目所需的技能。若你使用的是独立 Codex CLI，也可以在终端安装官方 Agent Skills，再创建项目：

npx -y skills@latest add remotion-dev/skills -g -y
npx create-video@latest --yes --blank north-motion
Set-Location north-motion
npm install
npm run dev

为什么先做这一步：没有可运行的项目，后面的提示词只会停在代码片段。完成后浏览器会打开 Remotion Studio，左侧能看到一个 composition，中央是预览画面。

生成第一个文字动画

先只做一行文字。把下面的要求发给 Codex：

在当前 Remotion 项目里做一个 Hello World 动画：

- 画面为 1920×1080，背景是纯黑色。
- 中间显示白色大字“HELLO, NORTH/01”。
- 文字从透明到清晰，同时从下方轻轻移到中央。
- 停留片刻后淡出。
- 保持代码简单，完成后启动 Studio 让我预览。

这一步只验证三件事：Codex 能修改当前项目，Remotion 能读取组件，Studio 能播放动画。不要急着上传所有素材。

完成后拖动 Studio 时间线。你应该看到文字入场、停留、离场，而不是一张静止页面。如果预览空白，把 Studio 的报错原样发给 Codex，让它只修复当前错误。

整理品牌素材

Hello World 能正常播放后，再把自己的素材复制进项目的 public/ 目录：

public/
  brand/
    logo.svg
    product.webp
    texture.webp
  audio/

准备一段简单说明，告诉 Codex 每个文件是什么：

品牌：NORTH/01
主色：黑色 #0A0A0A
强调色：荧光黄 #D7FF45
Logo：public/brand/logo.svg
产品图：public/brand/product.webp
纹理图：public/brand/texture.webp
风格：留白多、文字短、切换干净

文件名和用途写清楚后，Codex 才知道哪张图该放在哪个场景。完成后，public/brand/ 中能看到所有素材，Studio 不应再引用临时网址或不存在的文件。

做出第一个品牌场景

现在把测试文字换成真实品牌画面：

使用 public/brand/ 里的素材制作第一个品牌场景：

- 先显示 logo，再出现产品图。
- 标题写“MOVE WITH LESS”。
- 黑色背景，荧光黄只用于一条细线和小标签。
- 产品图从右侧进入，标题从左侧进入。
- 不添加粒子、3D 模型或额外装饰。
- 在 Remotion Studio 中保留可预览的 composition。

为什么从一个正式场景开始：你可以先判断颜色、字体、图片比例是否正确，再让 Codex 沿用这套视觉语言。完成后，Studio 中应该看到 Logo、产品图和标题组成一个完整画面，素材没有变形或超出边缘。

用 Suno 制作并加入音乐

打开 Suno，生成一段与你的视频气质相符的纯音乐。示例提示词：

Minimal electronic instrumental, clean pulse, restrained energy,
no vocals, suitable for modern brand motion graphics.

下载你有权使用的音频文件，放到：

public/audio/north-theme.mp3

再让 Codex 加入音乐：

把 public/audio/north-theme.mp3 加入当前 Remotion composition。
音乐从视频开头播放，在结束前平滑淡出。
不要改动现有画面布局。完成后启动 Studio，让我同时检查画面和声音。

音乐让你更容易判断场景切换是太快还是太慢。完成后点击 Studio 的播放按钮，应该能同时看到品牌场景并听见音乐；如果没有声音，先检查文件路径和浏览器静音状态。

继续加入更多场景

不要一次要求 Codex 写完整视频。每次增加一个场景，预览通过后再继续。第二个场景可以这样写：

在品牌开场之后增加一个产品特写场景。
使用 product.webp，先显示产品局部，再出现文字“BUILT FOR DAILY MOTION”。
延续上一场的黑色、白字和荧光黄细线。
场景切换跟随音乐的明显节拍，避免复杂转场。

第三个场景：

增加一个卖点场景，依次显示：
LIGHTWEIGHT / WEATHER READY / ALL DAY COMFORT
每次只突出一项，背景使用 texture.webp 的局部。

最后增加结束画面：

增加结束场景：画面中央显示 logo，下面显示“EXPLORE NORTH/01”。
保持足够停留时间，音乐在结尾淡出。

每加入一段，都从头播放一次。完成后，Studio 时间线中应该有连续的开场、产品、卖点和结束画面，颜色与字体保持一致，音乐没有中途断掉。

渲染并查看 MP4

预览没有明显问题后，让 Codex 列出 composition ID 和入口文件，再运行渲染。常见命令如下，具体名称以项目实际内容为准：

npx remotion render src/index.ts NorthMotion out/north-motion.mp4

如果 Codex 已安装 Remotion 渲染技能，也可以直接输入：

用 Remotion 渲染当前动态图形视频为 MP4。
输出到 out/north-motion.mp4。渲染完成后告诉我实际文件路径。

终端结束不等于教程完成。打开 out/north-motion.mp4，从头播放到结尾，确认以下几点：

Logo、图片和文字都能正常显示。
场景顺序与 Studio 预览一致。
音乐能播放，并在结尾自然淡出。
视频没有突然黑屏或在结束前被截断。

看到问题就回到 Codex，写明“哪个场景、哪个元素、现在怎样、希望怎样”。修改后重新渲染同一个 MP4。最终结果就是一条由 Codex 编写、Remotion 预览和渲染的动态图形视频。

开始之前