Remotion
用 React 组件描述每一帧，在 Studio 检查画面，再渲染成视频或图片；同一组件也能作为网页里的可交互预览。
项目演示
查看示例出处- GitHub Star
- 68,959
- 版本
- 4.0.539
- 资料核对
先完成一个六秒视频，再复用它的模板。
从纯文字信息卡开始，明确尺寸、帧率、时长和输出路径。确认 Studio 与最终 MP4 都正确后，再接 JSON 数据或嵌入网页，能更快判断问题出在内容、代码还是渲染环境。
选一个任务，开始使用
在现有项目之外选择一个父目录，确认 remotion-card 尚不存在，再执行安装区命令。完成依赖与技能配置后，从第一项开始。第三项需要已有的 React 应用，并在该应用目录配置技能；普通 Blank 工程不自带网页路由。
准备一个标题、一句说明和主色，做一张 1280×720、30 fps、6 秒的信息卡。先检查预览，再明确导出 MP4。
创建一个独立的 Blank 工程
先准备 Node.js 24、npm 与 Git，在现有项目之外执行，remotion-card 应是未占用的新目录。此命令固定创建器 4.0.539，使用 Blank，不加 Tailwind，也不会安装 Agent Skills。创建器仍会获取远端模板与当时最新的 Remotion 依赖；安装后按下方步骤检查并保存锁文件。
查看作者安装说明node --version git --version npx [email protected] --yes --blank remotion-card cd remotion-card进工程后，先确认依赖和技能
创建器会尝试自动安装 npm 依赖；若安装报错，先修复原因，再在 remotion-card 内运行 npm install。随后运行 npx remotion versions。若使用 AI 助手，在工程内运行下方技能命令，选择实际宿主、项目范围和所需技能（首次可选择全部）；确认能读取 remotion-create、remotion-markup、remotion-studio、remotion-render。最后运行 npm run dev，空白模板最初只有空画布是正常现象。只手写 React 时可以跳过技能安装。
查看官方技能说明npx [email protected] add remotion-dev/skills把这段话发给 AI
以下是本站依据作者文档编写的可执行任务示例，不是作者成片案例或本站实测结果。先完成安装，替换自己的输入，再发送给能够读写该工程的助手。
/remotion-create 在按本页安装步骤创建的 remotion-card 工程中制作一张信息卡。先读取当前工程、package.json 和已安装的 Remotion 规则，保留我的其他改动，不另建第二个工程。 这是编辑练习文案：title="每周进展，一屏讲清"，subtitle="计划、完成、下一步"，accent="#2563EB"。只用文字和几何图形，不添加配音、外部素材或生成服务。把画幅设为 1280×720，30 fps，总长 180 帧（6 秒）。标题在开头 15 帧淡入，之后保持可读到结尾；动画由 useCurrentFrame() 和 interpolate() 驱动，不用 CSS animation 或实时时钟。 将可复用的画面组件写到 src/Card.tsx，接收 title、subtitle、accent 三个 props。保留 src/index.ts 的 registerRoot 链路，在根组件中注册 id="Card" 的 Composition，显式填写尺寸、帧率、帧数和 defaultProps，替换空白 MyComp。检查中文字体是否完整显示；需要额外字体时说明缺项，使用我提供且可使用的本地字体。 在工程目录运行 npm run dev，打开终端实际打印的 Studio 地址，选择 Card，播放并拖动到第 0、15、90、179 帧，检查文字、边距、淡入和末帧。若当前助手没有浏览器能力，给出地址和检查项，等待我实际查看后继续，不声称看过。 本次明确要求导出：在另一个终端执行 npx remotion still src/index.ts Card out/card-90.png --frame=90 --overwrite=false，再执行 npx remotion render src/index.ts Card out/card.mp4 --codec=h264 --overwrite=false。已有同名文件时保留原文件并换一个输出名。打开 PNG 和 MP4，检查 1280×720、30 fps、约 6 秒以及实际画面；无音轨是本任务的预期。交付源码、锁文件、npx remotion versions 的结果、输出路径和真实检查记录。发生安装、字体或渲染错误时报告具体失败点，不以预览成功代替成片。
检查你拿到的结果
- 一个注册了 Card 的 React 工程，包含明确的画幅、帧率、时长和可变文案。
- out/card-90.png 与 out/card.mp4（成功执行后），以及实际预览、文件规格和播放检查记录。
- 锁文件、安装版本和复跑命令，便于继续修改。
进一步了解这个 Skill
Remotion 把视频当作可以运行的 React 工程：组件定义画面，帧号决定动画状态，Composition 注册画幅、帧率与总帧数。你可以亲自写 TypeScript，也可以让编程助手按官方规则改代码；素材、文案和视觉判断仍要由你提供或确认。
它有几种不同的入口。Studio 用来播放、拖动时间轴和修改支持编辑的内容；CLI 把指定 Composition 渲染成 MP4、静帧等文件；Player 把同一个画面组件嵌进 React 应用并接收实时输入。Player 不是一段已编码的视频，也不会仅因页面能播放就自动产生下载文件。
本页介绍 remotion-dev/remotion 工具本体。官方在主仓库的 packages/skills 维护指导文件，通过 remotion-dev/skills 提供技能安装；创建项目时也可选择安装它们。把 npm 依赖装好，不等于编程助手已经加载技能。只想选用地图、字幕等专项指导，可继续看配套 Remotion Agent Skills 页面。
来源与核验
资料核对