不想先学一堆 React？用 Codex 帮你完成第一支 Remotion 动效视频

不想先学一堆 React？用 Codex 帮你完成第一支 Remotion 动效视频

前言

我以前一直把视频制作理解成“时间轴上的工作”：剪素材、拉关键帧、调转场，再等渲染。Remotion 换了一个思路——把视频画面写成 React 组件，动画、布局和数据都交给代码控制。这个方向本身很有吸引力，但真正的门槛也很明显：如果只是把 PR、AE 的学习成本换成 React、CSS 和 JavaScript，对不会写代码的人来说并没有轻松多少。让我真正想试的是 Codex 加进来以后，能不能把“我想要什么效果”翻译成项目里的实际代码。

这次我在 Windows 上先装好 Node.js 22、FFmpeg 和 Remotion 项目，再在 VS Code 里安装 Codex 插件。项目启动后，我直接让 Codex 分析当前工程，并根据 .codex 里的 skill 生成一个 16:9 的 cpolar 宣传视频分镜特效脚本，随后继续调整，最终在 Remotion 预览页面看到动效，并通过 Render 导出 MP4。最后再用 cpolar 把本地 localhost:3000 的预览页面映射到公网。我更关心的不是“AI 能不能一句话做大片”，而是它能不能真正改项目、让页面出现结果、再顺利渲染成视频。对我来说，只有自然语言、代码修改、预览和导出这四步都接起来，AI 才算真的进入了视频制作流程，而不是停留在给创意和写脚本这一层。所以我更愿意把这看成一次完整工作流验证，而不是把 AI 神化成剪辑软件的替代品。

1. Remotion 真正改变的是什么？

Remotion 是一个用 React 编写视频的框架。它把视频里的画面、动画和时间控制放进 Web 技术栈里，让 HTML、CSS、JavaScript、React 组件以及 Canvas、SVG、WebGL、Lottie 等能力参与视频制作。

这和传统剪辑软件最大的差别，不是“有没有时间轴”，而是视频内容本身可以被代码表达。

这带来几个很有意思的方向：

• 视频画面可以参数化；
• JSON 或 API 可以驱动内容；
• 工程文件可以进入 Git；
• 动画可以按帧控制；
• 同一套组件可以重复生成不同内容；
• 代码型项目更容易和 AI 编程工具配合。

项目本身还强调分布式渲染、模板化生产等方向，但这次不展开这些能力。这里只验证一件更基础也更实际的事：

Codex 能不能在一个本地 Remotion 项目里，根据自然语言修改代码并生成可以预览、可以渲染的视频。

2. 先把 Node.js 环境准备好

2.1 安装 NVM for Windows

这次先通过 NVM 管理 Node.js 版本。

打开当前使用的 NVM 1.2.2 发布页面：

https://github.com/coreybutler/nvm-windows/releases/tag/1.2.2

下载 nvm-setup.exe 后运行安装。

安装目录这里选择：

D:\\nvm

Node.js 下载位置同样放在 nvm 文件夹中。

后面继续按当前安装流程完成。

2.2 配置 Node.js 镜像源

回到：

D:\\nvm

打开 settings.txt，加入：

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

保存以后，再打开 CMD 检查 NVM：

nvm -v

接着安装 Node.js 22，并启用当前指定版本：

nvm install 22

nvm use 22.20.0

node -v

npm -v

这里保留当前流程中的几个版本要求：

• Node.js 需要 22 版本以上；
• 安装命令使用 nvm install 22；
• 实际启用的是 22.20.0。

最后用 node -v 和 npm -v 确认环境。

3. 安装 FFmpeg

Remotion 最终需要把视频渲染输出，所以接着准备 FFmpeg。

进入当前使用的 Windows 编译版本页面：

https://www.gyan.dev/ffmpeg/builds/

在 release builds 中下载：

ffmpeg-release-essentials.zip

下载后解压。

当前目录放在：

C:\\softwares\\ffmpeg-8.0

然后打开 Windows 系统环境变量设置：

control sysdm.cpl,,3

配置完成后，在 CMD 里验证：

ffmpeg -version

能够输出版本信息以后，FFmpeg 这一层就准备好了。

4. 创建第一个 Remotion 项目

环境齐了以后，开始真正创建项目。

打开 PowerShell 或 CMD，执行：

npx create-video@latest

后面的初始化按当前流程完成基础配置。

安装结束时会询问是否用 VS Code 打开项目，这次选择：

Yes

第一次打开项目时，VS Code 会询问信任工作区。

选择信任以后，就进入真正的代码工程了。

5. 在 VS Code 里安装 Codex

打开扩展栏，搜索：

codex

并安装对应插件。

安装后，左侧会出现 Codex 入口。

到这里，我还不会急着让 AI “做大片”。

先做最重要的一步：让项目本身跑起来。

6. 先把 Remotion 项目启动

手工启动的方式是：

npm install
npm run dev

这一步可以先证明项目依赖和开发服务本身没有问题。

另一种方式，则是直接让 Codex 分析当前工程并启动：

分析一下当前项目，并且帮我启动它

等待 Codex 执行完成。

当前项目还是一个空项目，但已经可以通过下面地址访问：

http://localhost:3000

页面能打开以后，至少说明：

Node.js → Remotion 项目 → 开发服务 → localhost:3000

这条本地开发链已经成立。

7. 真正有意思的地方：直接把视频需求说给 Codex

接下来不再手写一整套 React 动画，而是直接给 Codex 一个完整需求。

这次使用的提示词是：

当前项目my-video中，有一个.codex的skill 查看一下，然后根据其中的skill给我设计一个cpolar内网穿透的宣传视频分镜特效脚本，需要16:9的画面。

这个提示里包含了几个明确约束：

• 当前项目是 my-video；
• 先查看 .codex 里的 skill；
• 主题是 cpolar 内网穿透；
• 需要宣传视频的分镜和特效；
• 画面比例必须是 16:9。

我比较喜欢这种写法，因为不是一句“帮我做个视频”就把所有判断扔给 AI，而是先告诉它工程上下文和画面要求。

Codex 开始执行任务以后，先生成了文字版内容。

随后继续调整，让结果真正落到视频画面里。

8. 从文字脚本到实际动效页面

最终效果可以在 Remotion 页面里直接看到。

这里的 GIF 做了加速处理：

这一层才是最关键的验证。

不是“Codex 给了一个视频创意”，而是：

自然语言需求 → Codex 修改项目 → React 动效代码 → Remotion 页面出现实际画面。

也就是说，AI 在这里承担的更像是“项目里的代码执行助手”，而不是传统意义上的自动剪辑按钮。

9. 预览没问题以后，再 Render 成 MP4

如果画面效果已经符合预期，可以点击右下角：

Render

继续调整相关参数并导出。

点击导出以后，右侧会进入逐帧处理。

等待渲染完成。

最终可以得到 MP4 文件。

到这里，这次本地视频制作链已经真正闭环：

需求描述 → Codex → React / Remotion → 页面预览 → Render → MP4。

对于不会写 React 的人来说，AI 确实降低了“从空项目开始写”的门槛，但后续想持续修改镜头、排版、节奏和动画，依然要学会怎样把需求说清楚，也最好能逐步看懂项目结构。

10. 为什么还要给 Remotion 预览页加公网入口？

视频已经能在本地做出来，但开发页面运行在：

localhost:3000

本机看没有问题，远处的人打不开。

如果只是想让客户、同事或朋友临时看一下当前 Remotion 页面，再加一个公网入口就够了。

这里 cpolar 只负责：

把本地 Remotion 3000 Web 预览页面提供到公网。

Codex 仍然负责代码修改，Remotion 负责视频项目和渲染，cpolar 不参与视频生成本身。

11. Windows 安装 cpolar

打开 cpolar 下载页面，下载 64-bit 版本。

解压并安装以后，在 CMD 中检查：

cpolar version

出现版本信息后，继续注册账号。

进入注册页面。

注册完成后，在浏览器访问：

http://127.0.0.1:9200

登录 cpolar Web UI。

12. 先创建随机公网地址

进入【隧道管理】，当前页面默认还能看到：

• 远程桌面隧道 → 3389 / TCP；
• website 隧道 → 8080 / HTTP。

创建新的 Remotion 隧道：

• 隧道名称：remotion
• 本地地址：3000
• 地区：中国 Top

创建以后，在在线隧道列表查看地址。

当前示例使用 HTTPS 地址：

https://1ccad265.r1.cpolar.top

外部浏览器可以正常打开 Remotion 页面。

这一步验证的是：

Remotion 3000 → cpolar 随机公网地址 → 外部浏览器访问成功。

当前流程中记录随机域名大约每 24 小时会变化一次，更适合临时预览。

13. 长期使用再换固定二级子域名

如果这个项目需要反复给别人查看，固定地址会更方便。

进入预留页面：

https://dashboard.cpolar.com/reserved

然后选择保留二级子域名。

当前记录为：

• 地区：China TOP
• 二级域名：remotion

不同账号以自己实际保留结果为准。

随后回到 cpolar 本地管理页，找到：

remotion

隧道。

点击编辑，把域名类型改成：

二级子域名

并在 Sub Domain 中填写已经保留的名称。

更新以后，在线隧道列表会切换成固定二级子域名。

最后再用固定地址访问。

页面可以正常打开。

总结

这次让我觉得最有意思的，并不是“以后完全不用学代码”，而是视频需求已经可以通过自然语言直接进入一个真实的 React 视频项目。以前要先学会项目结构、组件和动画，再开始做画面；现在可以让 Codex 先把第一版代码搭起来，自己再围绕结果继续调整。

整条实际跑通的链路是：

Windows → NVM 1.2.2 → Node.js 22 / 22.20.0 → FFmpeg → npx create-video@latest → VS Code → Codex → my-video → .codex skill → 16:9 分镜提示词 → React 动效 → Remotion 预览 → Render → MP4 → cpolar → 3000 → 随机公网 → 固定二级子域名 remotion。

几个关键技术点包括：

• NVM：1.2.2
• Node.js：22 以上，当前启用 22.20.0
• FFmpeg 路径：C:\\softwares\\ffmpeg-8.0
• Remotion 初始化：npx create-video@latest
• 项目启动：npm install、npm run dev
• 本地预览：http://localhost:3000
• Codex 提示词中要求 .codex skill 和 16:9
• cpolar Web UI：http://127.0.0.1:9200
• 隧道名称：remotion
• 本地端口：3000
• 随机 HTTPS 示例：https://1ccad265.r1.cpolar.top
• 固定二级子域名：remotion

如果只是第一次接触“视频即代码”，我更建议先像这次一样做一个短、明确、可预览的项目。先让 AI 帮你生成第一版，再逐步学会怎么看代码、怎么改提示词、怎么控制镜头和动画，比一开始就期待“一句话生成大片”更实际。