Remotion - 用React写视频

Remotion - 用 React 编程式制作视频

用你熟悉的 React 组件来创建视频，让视频制作像写前端代码一样优雅。

核心特性

• React 驱动：用 JSX/TSX 编写视频，复用 React 生态（组件、Hooks、状态管理）
• 编程式控制：每一帧都是一个 React 渲染，可以精确控制动画、布局、数据绑定
• 批量渲染：通过参数化输入，批量生成成千上万个个性化视频
• 实时预览：开发时实时预览视频效果，支持快进、逐帧调试
• 服务端渲染：支持 Headless Chrome / AWS Lambda 渲染，集成到 CI/CD 流水线
• AI 集成：官方支持 AI 工作流，可结合 LLM 动态生成视频内容

技术栈

层级	技术
框架	React / TypeScript
渲染引擎	Chrome (Puppeteer)
包管理	npm / yarn / pnpm
云渲染	Remotion Lambda (AWS)
视频编码	FFmpeg

代码示例

import {useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = frame / 30;
  
  return (
    <div style={{opacity, fontSize: 80}}>
      Hello, Remotion!
    </div>
  );
};

使用场景

1. 短视频批量生成：配合 AI 脚本，批量生产抖音/小红书视频内容
2. 数据可视化视频：动态图表、数据报告视频化
3. 个性化营销视频：根据用户数据生成定制化推广视频
4. 产品演示动画：自动化生成产品介绍、功能演示视频
5. 社交媒体自动化：与 social-auto-upload 等工具联动，实现从视频生成到发布的全自动化

项目数据

指标	数据
Stars	48.2k+
Forks	3.4k+
Commits	33,000+
许可证	Remotion License（个人/开源免费，企业需授权）

安装

npx create-video@latest

注意事项

• Remotion License 对企业使用有特殊要求，年收入超过一定阈值需购买商业许可
• 渲染依赖 Chrome，服务器部署建议使用 Remotion Lambda
• 与 MoneyPrinterTurbo 互补：MPT 偏向全自动生成，Remotion 偏向精细化编程控制