Remotion

Remotion Skill

使用 Remotion 以 React 组件方式生成视频，适合数据可视化、动态图表、产品演示、教学短视频等场景。

何时使用

• 用户要求「用这些数据生成一个 XX 秒的视频」
• 需要「动态图表视频」「数据可视化视频」「产品演示视频」「教学/口播视频」
• 需要将表格/图表/文案转成带动画的短视频

前置条件

• Node.js（建议 v18+）与 npx
• 用户环境需已安装 Remotion：npm init video 或 bun create video 创建项目，或现有项目内 npm install remotion

工作流程

1. 确认环境：在用户项目或工作目录中确认存在 Remotion 项目（含 remotion.config.ts 或 remotion.config.js 及入口如 src/Root.tsx）。
2. 生成或修改 Composition：根据用户需求编写或修改 React 组件（Composition），可接收 getInputProps() 传入的数据（如图表数据、文案）。
3. 渲染视频：在项目根目录执行：

   npx remotion render <entry-point> <composition-id> <output-path>
   

   • entry-point：入口文件，如 src/index.tsx 或 src/Root.tsx
   • composition-id：在入口中注册的 Composition 的 id
   • output-path：输出视频路径，如 ./out/video.mp4
4. 传参与时长：需传入动态数据时使用 --props='{"key":"value"}' 或 --props=./props.json；时长由 Composition 的 durationInFrames / fps 决定。

使用示例

• 「用这份销售数据生成一个 30 秒的动态柱状图视频」
• 「把这三页产品要点做成一个 15 秒的演示视频」
• 「根据 CSV 生成趋势变化的折线图视频」

输出

• 默认输出为 MP4（H.264）；可用 --codec 指定其他编码。
• 输出路径由用户指定或放在项目 out/ 目录。

限制

• 需用户本机已具备 Remotion 项目或同意新建项目；无 Remotion 时需先引导 npm init video。
• 复杂动画与长视频渲染耗时较长，可提示用户或使用 --concurrency 调整并行度。