用 React 写视频：Agent 时代的视频工具
更新于 2026-07-29
← 返回汇总React 代码是视频的唯一真相源
用 React 程序化制作视频——把组件、状态、props 当作视频的「帧」。三种工作流随时切换：Agentic（让 coding agent 把想法变成视频）、Interactive（拖拽编辑动画）、Programmatic（连数据、用代码管复杂度）。视频即代码，React 是 source of truth，任何节点都能切换模式。
Monorepo（Bun + Turbo）· Rust compositor 加速 · 深度集成多个 AI coding agent
AfterEffect/Premiere 是黑盒：版本控制难、参数化难、批量生成难、与数据联动难。一个字幕样式改一遍要重渲染几百个片段。
视频是 React 组件树——享受 git 版本控制、props 参数化、map 批量生成、接 API 数据。100 万个个性化视频只是一个 .map()。
# 需 Node.js npx create-video@latest # 选模板后进入项目 cd my-video npm install npm run dev # 打开 Studio 实时预览 npm run build # 渲染成 mp4
模板涵盖：blank/helloworld/tiktok/audiogram/music-visualization/three/skia/prompt-to-video 等 20+ 种。
import { Composition, useCurrentFrame, interpolate } from 'remotion'; const Hello = () => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <div style={{ opacity, fontSize: 80 }}>Hello</div>; }; export const RemotionRoot = () => ( <Composition id="Hello" component={Hello} durationInFrames={150} fps={30} width={1920} height={1080} /> );
| 集成 | 用途 |
|---|---|
claude-code-plugin | Claude Code 原生插件，Agent 直接操作视频项目 |
codex-plugin / kimi-code-plugin | Codex / Kimi coding agent 集成 |
| MCP server | Model Context Protocol，任何支持 MCP 的 Agent 可调用 |
Agent Skills 文档 | 专门教 Agent 如何用 Remotion 的技能文档 |
system-prompt / prompts | 给 Agent 的系统提示词与 prompt 模板 |
template-prompt-to-video | 从 prompt 直接到视频的模板 |
elevenlabs / whisper-web | AI 语音合成 + 语音识别（自动字幕） |
为组织建动画资产库，统一样式，组件化复用。
自有基础设施上渲染百万级视频。Lambda/Cloud Run 并行，props 驱动个性化。
发布简单工具或复杂视频编辑器（Editor Starter / Mediabunny）。
商用制作视频也免费
两轨制：保项目可持续 funding，同时源码开放、大多数人免费
⚠ 5.0 许可证将微调，使用前务必读 LICENSE.md 确认条款。
「视频即代码」范式的定义者。主动拥抱 Agent 时代（多 coding agent 插件 + MCP + prompt-to-video）是关键赌注——当 AI 能直接生成视频，「用 React 写视频」就是最自然的中间表示。Rust compositor + 多云渲染保证工程纵深。55k stars + 1000 页文档，生态成熟度高。