Codex+Remotion真正省掉的不是剪辑：自然语言怎么一步步落成React视频工程

Codex+Remotion真正省掉的不是剪辑：自然语言怎么一步步落成React视频工程

前言

传统视频剪辑最让人疲惫的地方，往往不是“不会剪”，而是很多重复操作都得靠拖轨道、调关键帧、来回预览完成。哪怕只是做一段文字进入、卡片切换或简单转场，也可能需要不断改参数、重新看效果。

这次我换了一个完全不同的思路：用Remotion把视频写成React项目，再让Codex根据自然语言修改代码、生成分镜和动效。先在Windows里准备Node.js和FFmpeg，再用create-video初始化项目，最后从本地3000端口进入Remotion预览页面。

真正有意思的是后面的创作过程。我没有手工去写每个动画组件，而是直接告诉Codex：读取项目里的skill，帮我设计一段16:9的cpolar宣传视频。它先生成分镜，再继续修改项目，最后在Remotion里看到实际动效，并通过Render导出成MP4。

所以这篇重点不是证明“完全不懂代码也能做任何大片”，而是把自然语言需求 → Codex改React项目 → Remotion实时预览 → Render导出视频这条链真正跑通。最后再把本地预览页提供给外部设备访问，方便异地查看效果。

这套方式真正值得看的，也不是“AI替你按一个按钮做完视频”，而是把原本需要手工写React动画、反复调整组件的那部分工作，变成可以用自然语言来迭代。画面不好看，就继续描述哪里要改；节奏不对，就让它重新调整分镜和时间。

1 Remotion到底改变了什么

Remotion更适合被理解成：

一个用React代码生成视频的框架。

它和Premiere、After Effects最大的区别，不是“谁更专业”，而是工作方式不同。

传统剪辑软件更偏向：

• 时间线；
• 图层；
• 关键帧；
• 鼠标拖拽；
• 视觉化参数调整。

Remotion则更偏向：

• React组件；
• HTML / CSS / JavaScript；
• 参数；
• 数据驱动；
• 代码版本管理。

这意味着：

画面本身可以像网页组件一样被组织。

2 “视频即代码”真正适合什么场景

页面：

如果只是剪一段旅行Vlog，传统剪辑软件可能更直接。

Remotion真正有优势的地方更偏向：

• 程序化动画；
• 数据可视化视频；
• 批量生成；
• 模板化视频；
• 参数驱动内容；
• AI辅助生成组件。

材料里提到Canvas、SVG、WebGL、Lottie等Web能力，也说明它本质上是在利用Web技术组织视频画面。

3 不要把Remotion理解成“完全取消剪辑软件”

Remotion可以减少大量轨道和关键帧操作，但不代表：

• 所有视频都适合代码生成；
• 所有镜头都比AE更容易；
• 完全不需要理解画面节奏；
• 输入一句话就一定得到成熟成片。

这篇真正验证的是：

Codex能够根据自然语言参与修改Remotion项目，并生成一段实际可预览、可导出的动画视频。

4 先准备Node.js环境

本文使用NVM for Windows管理Node.js。

打开版本页面：

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

页面：

下载并运行：

nvm-setup.exe

安装页面：

5 设置NVM安装位置

本次安装到：

D:\\nvm

页面：

继续设置Node.js下载位置：

后面一路安装：

6 配置Node和npm镜像源

打开：

D:\\nvm\\settings.txt

加入：

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

页面：

这里的作用是给Node.js和npm下载配置镜像地址。

7 检查NVM是否安装成功

打开CMD执行：

nvm -v

页面：

能够正常输出版本以后，再继续安装Node.js。

8 安装并启用Node.js 22

执行：

nvm install 22

nvm use 22.20.0

node -v

npm -v

页面：

材料要求Node.js 22以上。

本次实际使用：

22.20.0

同时继续确认：

• node -v
• npm -v

都能正常输出。

9 再准备FFmpeg

Remotion最后需要真正把画面编码成视频，因此这里继续准备FFmpeg。

打开：

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

页面：

下载：

ffmpeg-release-essentials.zip

解压并整理目录：

本次放在：

C:\\softwares\\ffmpeg-8.0

10 把FFmpeg加入Windows环境变量

打开系统属性高级设置：

control sysdm.cpl,,3

页面：

配置完成以后回到CMD验证：

ffmpeg -version

结果：

能正常显示FFmpeg版本，说明视频编码环境已经准备好。

11 初始化第一个Remotion项目

打开PowerShell或CMD，执行：

npx create-video@latest

页面：

后面按照脚手架提示完成基础配置：

这一步会创建一个新的Remotion项目。

12 用VS Code打开项目

脚手架安装结束后会询问是否用VS Code打开。

页面：

进入VS Code以后确认信任项目：

做到这里，项目文件已经真正进入编辑环境。

13 安装Codex插件

进入VS Code扩展页面搜索Codex：

安装完成：

这一步以后，Codex就可以直接读取当前项目并参与修改。

14 项目可以手动启动

传统方式执行：

npm install
npm run dev

页面：

这就是正常Node项目的启动方式。

15 也可以直接让Codex分析并启动

本次直接对Codex说：

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

页面：

Codex读取项目以后开始执行相关操作。

结果：

16 浏览器确认Remotion已经运行

访问：

http://localhost:3000

页面：

到这里可以确认：

Windows → Node.js → Remotion → localhost:3000

已经跑通。

此时项目还是基础状态。

真正的视频生成从下一步开始。

17 直接把视频需求交给Codex

本次输入：

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

页面：

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

• 当前项目：my-video
• 读取.codex里的skill
• 主题：cpolar内网穿透宣传视频
• 输出：视频分镜特效脚本
• 比例：16:9

相比只说“帮我做一个视频”，这种提示更容易让AI理解要修改哪个项目、按什么规格输出。

18 Codex先生成分镜，再继续落到项目里

执行过程：

一开始得到的更接近文字版分镜。

继续让它往实际效果推进以后，就能在Remotion中看到动态画面。

演示：

GIF做了加速处理，但能够看到实际的动效结果。

19 真正跑通的不是“提示词生成文字”

这一步值得区分。

如果Codex只是输出：

• 分镜文字；
• 动画建议；
• React代码片段；

还不能算视频链完整。

本次真正继续做到了：

代码进入Remotion项目 → 浏览器能预览 → 动画能播放。

这才是“自然语言生成视频工程”真正落地的一层。

20 效果满意以后进入Render

点击右下角：

Render

页面：

这里可以继续调整导出相关参数。

21 Remotion开始逐帧处理

导出过程：

这一阶段会把React生成的画面真正编码成视频文件。

所以：

实时预览

和：

最终Render

是两回事。

前者用于快速看效果。

后者才会得到真正的视频文件。

22 最终得到MP4

导出完成：

本次最终得到：

MP4视频文件。

整条创作链到这里真正闭环：

自然语言 → Codex → React代码 → Remotion预览 → Render → MP4

23 “不会代码”要怎么理解才准确

这篇确实减少了手写代码。

很多具体React和动画实现可以交给Codex完成。

但使用者仍然需要理解：

• 项目目录；
• Node.js环境；
• npm命令；
• Remotion预览；
• 需求描述；
• 出错时的基本判断。

所以更准确的说法是：

不会手写复杂React动画，也可以借助Codex参与Remotion视频制作。

而不是：

完全不用理解任何技术就能稳定制作所有视频。

24 AI真正降低的是哪一层门槛

传统Remotion使用方式要求创作者自己写：

• React组件；
• CSS动画；
• 时间控制；
• 动效逻辑。

加入Codex以后，可以把更多注意力放到：

• 视频主题；
• 分镜结构；
• 文案；
• 画面要求；
• 节奏修改。

AI把其中一部分“怎么写代码”的工作接过去。

但“视频想表达什么”仍然需要人决定。

25 到这里，本地视频制作已经完整跑通

当前链路：

Node.js

↓

FFmpeg

↓

Remotion

↓

VS Code

↓

Codex

↓

自然语言需求

↓

React视频工程

↓

浏览器预览

↓

Render

↓

MP4

如果只是自己制作视频，到这里已经够用。

26 为什么还要把预览页提供给外部设备

Remotion本地预览地址是：

localhost:3000

这只在本机可直接访问。

如果想让：

• 客户看动效；
• 同事远程审稿；
• 朋友查看预览；
• 自己换设备继续看；

就需要再解决：

外部设备如何访问本地3000页面。

27 安装cpolar

说明图：

下载Windows版本：

安装完成以后执行：

cpolar version

页面：

能够正常显示版本以后，再进入管理页面。

28 注册并登录cpolar

注册入口：

注册页面：

浏览器访问：

http://127.0.0.1:9200

页面：

登录以后：

29 创建Remotion随机公网入口

进入隧道管理。

页面里默认可以看到现有隧道：

新建一条Remotion隧道。

本次配置：

• 隧道名称：remotion
• 本地地址：3000
• 协议：HTTP
• 地区：China Top

页面：

30 查看公网地址

进入在线隧道列表：

本次HTTPS示例：

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

访问：

能够正常看到Remotion预览页面以后，可以确认：

外部浏览器 → 公网地址 → 本地3000 → Remotion预览

已经跑通。

31 远程预览不等于真正多人协作

公网链接可以让别人：

打开你的Remotion页面。

但本文没有展示：

• 多人同时编辑；
• 评论系统；
• 权限分级；
• 版本审批；
• 在线协作文档。

所以更准确的说法是：

远程查看和演示。

而不是直接写成完整“云端协作平台”。

32 随机地址适合先测试

随机地址更适合：

• 临时展示；
• 快速验收；
• 先验证公网链路。

如果只是偶尔把预览页发给别人看，这一步已经够用。

33 需要长期收藏再配置二级子域名

进入：

https://dashboard.cpolar.com/reserved

页面：

本次保留：

remotion

实际名称以自己账号成功保留结果为准。

34 修改Remotion隧道

回到隧道列表：

编辑：

remotion

把域名类型改成：

二级子域名

填写前面保留的名称：

35 查看新的长期访问入口

进入在线隧道列表：

此时随机地址已经换成二级子域名形式。

再通过浏览器访问，就可以继续查看Remotion预览页。

这里解决的是：

长期收藏时不用频繁换入口。

而不是保证地址在任何账号和服务状态下“永久不变”。

36 把Remotion预览页放到公网也要注意内容边界

Remotion预览页可能包含：

• 客户文案；
• 未发布宣传片；
• 内部品牌素材；
• 还没定稿的项目资源。

所以公网演示时同样要考虑：

• 是否需要长期开放；
• 地址是否随意传播；
• 项目里有没有敏感素材；
• 客户是否允许公开预览。

cpolar解决的是：

网络入口。

项目内容本身是否适合公开，需要另外判断。

37 这套组合最适合什么场景

比较适合：

• 想用React做程序化视频；
• 想让AI帮忙写动效代码；
• 经常做模板化宣传视频；
• 想批量生成相似内容；
• 需要参数化画面；
• 想把视频工程放进Git管理；
• 希望远程展示本地预览。

如果真正需要：

• 大量真人素材剪辑；
• 复杂音频混剪；
• 传统多机位剪辑；
• 熟练时间线工作流；

Premiere、DaVinci Resolve等传统工具仍然有自己的优势。

Remotion不是“替代所有剪辑软件”，而是多了一种视频生产方式。

38 最后把完整技术链重新看一遍

Windows环境：

NVM → Node.js 22 → npm

视频编码：

FFmpeg

项目初始化：

npx create-video@latest

编辑器：

VS Code

AI辅助：

Codex

项目启动：

npm install → npm run dev

本地预览：

localhost:3000

视频生成：

自然语言 → Codex → React → Remotion

导出：

Render → MP4

远程预览：

cpolar → Remotion 3000

长期入口：

二级子域名

实际完成：

• NVM安装；
• Node镜像源；
• Node.js 22；
• FFmpeg；
• Remotion项目初始化；
• VS Code；
• Codex插件；
• 项目启动；
• 3000预览；
• 自然语言生成分镜；
• Codex修改项目；
• 动效预览；
• Render；
• MP4导出；
• cpolar安装；
• 随机公网预览；
• 二级子域名；
• 外部设备访问。

这样Codex + Remotion真正展示出来的，就不是一句“AI做视频”，而是一套能够把自然语言需求逐步落到React视频工程，再从浏览器预览到最终MP4的实际工作流。

总结

这次真正跑通的是一条完整的Codex + Remotion视频生成链：先在Windows里准备NVM、Node.js 22和FFmpeg，再通过npx create-video@latest初始化Remotion项目，并从localhost:3000进入预览页面。

创作部分没有停在“AI给了一段代码”。后面继续让Codex读取项目里的skill，根据自然语言需求生成16:9视频分镜并修改项目，最终在Remotion里看到实际动画，再通过Render完成帧处理并导出MP4。

这篇最需要收回的是“完全不懂代码也能一键做大片”这种结论。Codex确实降低了手写React动画的门槛，但使用者仍然需要准备Node环境、理解项目启动、描述分镜需求，并在效果不符合预期时继续调整。更准确的价值是：把大量“怎么写动画代码”的工作交给AI。

远程部分最后把本地3000预览页提供给外部设备查看，并继续切换到二级子域名作为长期入口。这适合远程演示和预览，但本文没有验证多人编辑、评论审批或完整协作权限，因此不把它写成真正的云端视频协作平台。