Codex + Remotion：你的视频制作大师，动嘴就出片

一、为什么是 Codex + Remotion？

传统视频制作流程繁琐：找素材、拖时间线、加特效、调音轨，往往需要数小时甚至数天。而 Remotion 颠覆了视频创作方式——它让你用 React 组件来描述每一帧画面，视频即代码。再结合 Codex 这样的 AI 编程助手，你只需用大白话说出想要的画面，AI 就能生成对应的 Remotion 代码。本文用一个完整示例，演示如何从零开始“动嘴就出片”。

二、环境准备

开始前，请确保你的电脑已安装 Node.js 18+（推荐 LTS 版本）。打开终端，执行以下命令创建一个 Remotion 项目：

npx create-video@latest my-video
cd my-video
npm install

项目创建后，目录结构类似一个标准 React 应用。你会在 src 目录下看到默认的 Composition 文件。接下来，你需要一个 AI 代码生成工具。国内开发者可以注册 OpenAI 的 API，也可以使用下文第五节介绍的国产大模型。

三、用一句话“写”出视频代码

启动 Codex（或你选择的 AI 工具），输入以下提示词。注意，提示词越具体，生成结果越准确：

请用 Remotion 编写一个 React 组件：
- 视频时长 10 秒，30fps
- 尺寸 1920x1080
- 背景从深蓝色渐变到紫色
- 中央显示标题“Codex + Remotion”
- 副标题“动嘴就出片”从底部向上移动
- 最后 1 秒标题放大并淡出

AI 会生成一个类似 MyComposition.tsx 的组件。你需要将它保存到 src 目录，然后在 src/index.ts 中注册这个 Composition。注册代码如下：

import { Composition } from 'remotion';
import { MyComposition } from './MyComposition';

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

如果你对生成的动画不满意，可以继续让 AI 调整，例如“把背景改为动态粒子效果”或“标题字体换成更粗的样式”。这种交互式修改比手动改代码高效得多。

四、渲染你的视频

完成注册后，在项目根目录运行：

npx remotion render src/index.ts MyComposition out/video.mp4

Remotion 会启动无头浏览器，按帧渲染并合成视频。你也可以运行 npx remotion studio 打开可视化编辑器，实时预览画面、调整参数，然后再渲染。

五、国内开发者的替代方案

如果你无法访问 OpenAI，完全可以使用国产大模型替代 Codex。通义千问、Kimi、智谱清言等都对代码生成有很好的支持。使用技巧是：在提示词中明确说明“请使用 Remotion 这个 React 视频渲染库”，并提供项目的基本结构。例如：

我有一个 Remotion 项目，src 目录下已有 index.ts 和 Root.tsx。请帮我写一个 MyComposition 组件，实现以下效果：……

实测通义千问生成的代码可直接运行，对于常见动画效果，国产模型的完成度已经很高。

六、进阶技巧与注意事项

1. 分步生成：不要一次性描述所有细节，先让 AI 生成基础组件，再逐步添加动画、音频和字幕，这样更容易定位问题。
2. 善用 Remotion 特性：在提示词中引入 Sequence、interpolate、spring 等 API，可以生成更专业的转场和动效。
3. 素材版权：AI 生成的代码可能引用外部图片、字体或音频，请确保你有合法使用权，商用前务必检查。
4. 渲染优化：如果渲染速度过慢，可先降低分辨率测试，或使用 Remotion Lambda 进行云渲染。

七、结语

Codex + Remotion 的组合，让视频创作从“手工时代”进入“对话时代”。现在，打开你的 AI 工具，说出你的创意，剩下的交给代码。动嘴就出片，就是这么简单。