跳转到使用指南
Remotion Markup作者 remotion-dev

Remotion Markup Skill.

编写行为类似视频时间线的 React 标记,而不是使用 CSS 动画的网页。

  • 视频
  • React
  • 动态效果
来源审查 · Remotion MarkupSKILL.md
任务 视频 产出 • 帧驱动的 React 合成标记 • 具有明确时间安排和素材引用的媒体图层 • 使用受支持的效果和编辑结构、可供预览的场景 开始之前 需要与项目版本匹配的 Remotion 和特定功能软件包;链接的参考资料决定额外的媒体、效果、字体或导出要求。
编辑摘要 · 已审查来源 2026-10-07 · 并非生成的示例

01 功能说明

Remotion Markup:帧驱动视频场景

一个用于 Remotion 时间安排、媒体、可编辑场景和视觉效果的帧式创作规范与参考中心。

基于来源的工作流程并非执行性能基准测试

工作方法

Remotion Markup 专注于合成创作:根据合成帧率安排时间,由当前帧驱动动画,并让媒体元素参与视频时间线。来源明确警告,普通的 CSS 转场和动画类无法替代帧驱动渲染。

它也是更专业工作的参考中心,内容涵盖字幕、地图、文本测量、效果和音频等。其具体价值在于基础规范:让时间设置靠近所创作的元素,保留可独立编辑的目标,并使用合适的媒体或效果组件,而不是将每个视觉元素都当作任意的 DOM 包装器。

预期交付物

  • 帧驱动的 React 合成标记
  • 具有明确时间安排和素材引用的媒体图层
  • 使用受支持的效果和编辑结构、可供预览的场景
查看示例任务说明

从任务说明到审查

  1. 01
    读取合成设置

    使用现有帧率进行秒数到帧数的换算,并保留预期的时长和尺寸。

  2. 02
    创作定时图层

    将可独立编辑的媒体和场景放在不同的 JSX 节点上,并直接在支持时间设置的组件上进行设置。经审查的来源还要求在受支持的定时组件(包括嵌套项)上通过 premountFor={fps} 预挂载一秒;应用前请检查已安装的 API。

  3. 03
    添加动态效果与特效

    使用基于当前帧的插值驱动动态效果。通过相应的参考资料和兼容组件实现专门效果。

  4. 04
    检查视频帧

    检查 Studio 播放效果和有代表性的渲染帧,确认文本是否溢出、媒体是否就绪以及时间安排是否正确。

02 适用场景

适用场景

需要与项目版本匹配的 Remotion 和特定功能软件包;链接的参考资料决定额外的媒体、效果、字体或导出要求。

适合的用途

  • 产品视频在可重复使用的时间线中组合实拍素材、图像、下三分之一字幕和音频。
  • 可通过代码编辑的动态效果适合需要在源代码和 Studio 中均保持清晰易懂且可编辑的视觉图层。

需要检查的限制

  • 并非浏览器动画CSS 转场和 Tailwind 动画类被明确指出不适用于所记录的渲染模型。
  • 参考资料与版本依赖该条目链接了许多特定功能文档。必须根据已安装的 Remotion 版本检查可用组件和效果。

请提供这些输入

  • 合成任务说明说明场景顺序、时长、尺寸和预期节奏。
  • 媒体素材提供真实的图像、音频、视频和字体文件,或经批准的来源 URL。
  • 编辑需求明确初次创作完成后必须能够独立修改的图层。

03 关键决策

重要决策

  1. 感知帧率的时间安排

    使用合成的 fps,可让时间表达式与实际视频设置保持关联。

  2. 效果有其应用目标

    来源区分了可直接接受效果的组件,以及需要合适画布包装器的 DOM 内容。

04 示例任务

尝试一份聚焦的任务说明

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

检查设置

加载完整的标记参考资料集。来源中的软件包添加命令安装的是运行时模块,而不是此技能本身。

上游源文件
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md

需要与项目版本匹配的 Remotion 和特定功能软件包;链接的参考资料决定额外的媒体、效果、字体或导出要求。

从一项交付物开始

运行该技能前,请调整此任务说明中的范围、源材料和约束条件。

示例任务说明
使用 Remotion Markup 为这段素材添加一个定时显示的产品标题叠加层。保留当前帧率和场景时长。使用帧驱动的不透明度和位移动画,让标题保持可独立编辑,并在调整长副标题的适配效果前加载文本测量指南。预览开场、稳定显示和退出时的帧。

检查结果

根据以下可观察标准检查实际输出。

  • 所有必需的动态效果均不依赖 CSS 动画或转场。
  • 定时图层保留各自可编辑的源节点。
  • 文本和媒体在有代表性的渲染帧中均正确无误。

OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该技能已捆绑提供,也不表示其外部工具、凭据和软件依赖项已包含在内。

05 来源与许可证

来源和许可证

本页描述下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
remotion-dev
许可证
未确认,请在复用前审查上游条款。
已审查的快照
2026-10-07 · 32b241b97f4e
编辑来源摘要
一个用于 Remotion 时间安排、媒体、可编辑场景和视觉效果的帧式创作规范与参考中心。

由 OpenDesign 根据链接来源撰写的原创摘要。仓库星标数只是特定日期的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前需要确认的问题

可以复用 CSS 动画吗?

来源指出,应将其重构为帧驱动的 Remotion 动画,使渲染遵循时间线。

是否应使用 Sequence 包装每个组件?

不应如此。来源建议在支持的情况下优先直接使用时间属性,仅在需要有意义的共享时间安排或其他行为时使用包装器。

效果可以应用于任意 div 吗?

不能通过文档所述的效果属性直接应用。该条目标明了受支持的组件,以及针对成组 DOM 内容的 HtmlInCanvas 实现路径。

OpenDesign

为下一轮设计迭代留出空间。

将任务说明、源材料和设计工作集中保存在本地工作区中。将该技能加入工作流程前,请检查其自身的设置要求。

上游源文件
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md