# Remotion

> 使用 React 编程方式创建视频，支持动态图表、数据可视化视频、产品演示与教学视频 Use when this capability is needed.

- Skill: `tomevault-io/remotion-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/remotion-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/remotion-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/remotion-3

---


# Remotion Skill

使用 [Remotion](https://remotion.dev) 以 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. **渲染视频**：在项目根目录执行：
   ```bash
   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` 调整并行度。

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/malue-ai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->