remotion-video-skill
用 React 代码编程生成动态视频的框架
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：remotion-video-skill。 它的用途是：用 React 代码编程生成动态视频的框架 完整的 Skill 内容见：https://321skill.com/skills/remotion-video-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“用 Remotion 帮我做一个5秒的片头，文字‘季度报告’从左侧飞入，同时背景色渐变成蓝色。” 它会生成对应的 React 组件代码，包含使用 interpolate 实现的位移和颜色渐变动画。或者你可以说：“根据这份 JSON 数据，生成一系列展示销售趋势的短视频。” 它会协助你编写数据映射和循环渲染的逻辑。
介绍
Remotion Video Skill 解决了传统视频制作流程繁琐、难以批量化和数据驱动的问题。它允许开发者使用熟悉的 React 组件语法来定义视频的每一帧，通过编程控制动画、字幕、转场等元素，将视频创作变成了代码开发。
使用方式非常直观：开发者通过定义 Composition 来设定视频规格，利用 useCurrentFrame、interpolate 等 Hook 驱动动画，并用 Sequence 组件编排时间线。项目创建后，可在 Remotion Studio 中实时预览，最终渲染为 MP4 文件。
它非常适合前端开发者、需要制作大量程序化视频的内容团队（如数据新闻、个性化营销视频）、以及希望将复杂概念（如算法、3D模型）可视化的教育工作者。对于习惯代码创作而非传统时间线剪辑的用户来说，它提供了极高的灵活性和自动化潜力。
与 After Effects 等传统软件或简单的视频模板工具相比，Remotion 的核心区别在于其“代码即视频”的理念。它并非一个带有图形界面的视频编辑器，而是一个完整的开发框架，将视频的视觉逻辑完全交由 JavaScript 和 React 生态管理，实现了真正的版本控制、模块复用和基于数据的动态生成。
核心特点
核心区别在于将视频创作彻底“开发化”：使用 React 组件树和状态管理来构建视频逻辑，支持 npm 生态库，并能与 CI/CD 流程集成，实现真正的程序化、批量化的视频生产流水线。
注意事项
不适合需要复杂非线性编辑、大量实拍素材剪辑或追求极致艺术化视觉特效（如电影级合成）的场景。
常见问题
Remotion 和 After Effects 有什么区别？
Remotion 是用代码编程生成视频，适合自动化和数据驱动；AE 是时间线图形界面，适合手动精细创作。
需要 React 基础吗？
是的，需要基本的 React 和 JavaScript/TypeScript 知识才能高效使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/remotion-video-skill/raw/index.md 读取 remotion-video-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/remotion-video-skill/raw/index.md（查看排版版本）