制作产品演示视频通常是一个持续一周的项目：在编辑器中摆弄淡入淡出、擦除和动态标题，与关键帧搏斗，反复导出十几次才能达到满意的效果。
Remocn 的存在就是为了把它变成一天就能完成的任务。它是一个用于 Remotion ↗（基于 React 的视频框架）的复制粘贴组件库，提供生产就绪的动画、转场、背景和场景，一条命令即可添加，之后完全归你所有。
Remocn 是什么？#
Remocn 是一个用于在 Remotion 中构建视频的复制粘贴组件库。与其从零编写每一个淡入淡出、擦除和动态标题，不如用 npx shadcn add 将一个精美的原语添加到你的项目中，代码就是你的了。
它为需要今天（而不是下周）发布产品演示视频的独立开发者和小型团队而设计。
为什么选择 Remocn？#
生产就绪的代码#
每个组件都正确使用 useCurrentFrame()、interpolate() 和 spring()。没有会在帧变化时破坏渲染的 Math.random() 陷阱。这些组件经过精心设计，可在 Remotion 的确定性渲染管线中可靠工作。
拥有你的代码#
组件是复制到你的项目中的，而不是作为依赖安装。没有黑盒——你可以随心所欲地调整它们。更改颜色、时间、缓动、布局——一切都直接在你的代码库中。
实时预览#
每个组件页面都挂载了一个真实的 @remotion/player，你可以逐帧拖动。在添加之前就能准确看到动画的效果——安装后不会有惊喜。
安装#
Remotion 是前置条件。如果没有，请先设置 Remotion 项目：
npx create-video@latest然后从注册表添加任何组件：
npx shadcn@latest add @remocn/blur-reveal组件及其依赖项会被直接复制到你的项目中，随时可以调整。
使用 AI 设置#
Remocn 被设计为与 AI 编码代理配合使用。你需要两样东西：一个 AI 编码代理和一个空文件夹。
- 获取一个代理（Claude Code、ChatGPT、OpenCode 等都可以）
- 在空文件夹中打开代理，粘贴：
Set up a new Remotion video project in this folder, then install the remocn agent skill:
npx skills add Remocn/remocn --yes. When you’re done, start the preview studio so I can watch the video while we work
当浏览器标签页打开并显示空的视频播放器时，你就准备好了。选择一个指南，让它成为你的作品。
这个工作流是现代”AI 原生”开发循环的绝佳示例：代理搭建项目、安装技能、启动预览工作室，并在你实时观看的同时迭代视频。
库中包含什么#
Remocn 注册表包含以下生产就绪组件：
- 转场 — 淡入淡出、擦除和场景过渡
- 动画 — 动态标题、揭示和运动原语
- 背景 — 动画背景场景
- 场景 — 可复用的完整场景模板
每一个都是 shadcn 风格的注册表条目：添加它、拥有它、自定义它。
对比#
| 方面 | Remocn | 从零编写 | After Effects |
|---|---|---|---|
| 到第一个视频的时间 | 当天 | 数天到数周 | 数周到数月 |
| 代码所有权 | ✅ 完整（复制粘贴） | ✅ 完整 | ❌ 二进制项目 |
| 确定性渲染 | ✅ Remotion 原生 | ⚠️ 取决于你 | ❌ 关键帧地狱 |
| 版本控制 | ✅ 对 Git 友好 | ✅ 对 Git 友好 | ❌ 二进制差异 |
| 对 AI 友好 | ✅ 附带代理技能 | ⚠️ 视情况 | ❌ |
| 成本 | ✅ 免费、开源 | ✅ 免费 | ❌ 订阅 |
为什么重要#
视频是营销中转化率最高的媒介，但制作产品演示视频一直很慢、很贵且难以迭代。Remocn 消除了这些摩擦：
- 当天发布 — 无需一周关键帧工作即可获得精美的演示视频
- 完全拥有代码 — 没有依赖锁定，一切皆可调整
- 确定且可测试 — 视频即代码，可以版本化、审查和重建
- AI 原生工作流 — 附带的代理技能让”帮我做一个产品演示”只需一个提示词
对于产品团队、创始人和独立开发者来说，Remocn 将视频制作从项目变成了任务。