Remotion 视频构建器
你的 Remotion 知识可能已经过时。当确切的 API 行为很重要时,首选官方 remotion-documentation MCP 服务器或 remotion.dev 上的文档。
从这里开始
- 如果项目尚不存在,使用
npx create-video@latest搭建框架,并首选空白模板。 - 确保所有
remotion和@remotion/*包保持完全相同的版本,并避免使用 caret 范围。 - 标准入口结构:
src/index.ts调用registerRoot()src/Root.tsx使用<Composition>或<Still>注册所有视频
构建顺序
- 首先建模输入合同:
- 顶级属性模式
- 时间线或事件数据
- 渲染配置
- 使用
zod定义共享属性,并将模式传递给每个<Composition>。 - 使用
calculateMetadata派生durationInFrames、width、height、转换后的属性和defaultOutName。 - 使用
<Series>构建叙事顺序的场景结构,使用<Sequence>构建叠加层、入场效果、素材窗口和标注。 - 在 Remotion v4.x 项目中,明确在需要在出现前加载资源的
<Sequence>元素上设置premountFor。 - 在完善动画之前添加样本数据和渲染脚本。
默认值和规则
- 默认使用
fps={30}和1920x1080横向模式,除非需求另有说明。 - 使用
AbsoluteFill进行图层叠加。 - 对来自
public/的任何内容使用staticFile()。 - 使用
useCurrentFrame()和useVideoConfig()实现基于帧的逻辑。 - 偏好微妙的动画:
- 使用高阻尼的
spring() - 使用带钳位的
interpolate()
- 使用高阻尼的
- 不要使用
Math.random()。使用remotion中的random(seed)。 - 保持文本动画简单且易读。
- 保持横向和纵向输出使用相同的业务逻辑,除非需求确实要求分叉。
参数化视频检查清单
- 一个共享的顶级
z.object()模式 defaultProps匹配组件属性形状calculateMetadata在输入需要时返回动态时长或尺寸- 用于本地预览的示例 JSON 或 TypeScript 数据
- 每个目标输出的渲染脚本
素材策略
当素材是可选的时,支持至少以下模式:
noneplaceholderreal
当没有真实素材时,时间线和叠加层仍应渲染。
Millrace 发布视频
如果请求与 Millrace 或发布视频管线相关,请在实现之前阅读 references/millrace-launch-video.md。
参考资料
来源: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md