102.3K+下载
跳转到使用指南
Remotion Interactivity作者 remotion-dev

Remotion Interactivity Skill.

通过调整 React 源码公开图层、时间和控件的方式，使视频可在 Studio 中编辑。

  • 视频
  • React
  • 交互
下载 OpenDesign查看使用指南
来源审查 · Remotion InteractivitySKILL.md
任务 视频 产出 • 命名且可单独编辑的视频图层 • 带有已声明内容和外观控件的自定义组件 • 拥有各自可编辑时间线的关联合成 开始之前 需要支持文档所述 Interactive API 的 Remotion 版本；所述可编辑路径插值还需要 @remotion/paths。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

Remotion Interactivity：可编辑视频图层

用于使 Remotion 图层源码可编辑的标记规则，涵盖自定义模式、内联动画值和关联合成注册。

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

工作方法

Remotion Interactivity 解决一个具体的创作问题：视频可以正确渲染，但其图层可能很难或根本无法通过 Studio 编辑。来源说明了编辑器能够识别哪些标记模式，包括内联样式、命名元素、受支持的插值表达式和直接编写的 JSX 节点。

其自定义组件方法使用交互模式来公开有意义的实例级控件。拥有自身时间线的组件还可以注册为关联合成。这里讨论的是源代码与视频编辑器之间的关系，而不是给已发布的视频添加可点击按钮。

预期交付成果

  • 命名且可单独编辑的视频图层
  • 带有已声明内容和外观控件的自定义组件
  • 拥有各自可编辑时间线的关联合成
查看示例任务说明

从任务说明到审查

  1. 01
    确定编辑单元

    列出必须分别修改的剪辑、场景和图层。为每一项编写独立的 JSX 节点，而不是通过一个循环生成所有内容。

  2. 02
    公开实用控件

    为有意义的文本、颜色、媒体或数值属性添加 InteractivitySchema，并将注入的样式转发给一个视觉根节点。

  3. 03
    保持源码可编辑

    以内联方式放置受支持的关键帧和样式，保留调用方帧与局部帧的语义，并使用同一个导出组件注册可复用场景。

  4. 04
    测试 Studio 编辑

    在 Studio 中选择、移动和调整目标图层，然后检查更改是否回写到预期的源码节点。

02 适用场景

适用场景

需要支持文档所述 Interactive API 的 Remotion 版本；所述可编辑路径插值还需要 @remotion/paths。

适合的场景

  • 可复用的字幕条文本和强调色可以成为显式的实例控件，而装饰性细节仍保留在内部。
  • 可编辑场景库关联合成适合需要自身时间线且无需复制实现的大型场景。

需要检查的限制

  • 受版本影响的 API所获取的来源声明版本为 4.0.534。依赖这些交互式组件 API 之前，请核实项目的 Remotion 版本。
  • 循环生成项共享编辑目标以编程方式重复生成的元素适合共享模板，不适合独立的剪辑名称、时间设置或删除操作。

请提供这些输入

  • 当前 JSX提供合成注册代码，以及控件不可用或呈灰色的组件。
  • 编辑要求明确编辑器必须修改的属性和各个实例。
  • 时间线语义说明现有的偏移、裁剪、嵌套和帧率，以免重构导致动画移动。

03 关键决策

重要决策

  1. 代码结构很重要

    即使渲染出的图像相同，源码值所在的位置不同，也可能公开不同的编辑能力。

  2. 控件需要有意设计

    模式可让实用的实例级选项保持可见，同时避免将每个装饰性的实现细节都变成控件。

04 示例任务

尝试聚焦的任务说明

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

检查设置

将交互入口与关联引用放在一起，并在重构前检查已安装的 Remotion API。

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

需要支持文档所述 Interactive API 的 Remotion 版本；所述可编辑路径插值还需要 @remotion/paths。

从一项交付成果开始

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

示例任务说明
使用 Remotion Interactivity 重构此字幕条场景，使其可在 Studio 中编辑，同时不改变渲染时序。公开文本和强调色，将样式转发给一个根节点，并将同一个导出组件注册为关联合成。让两个实例保持可独立编辑，并验证移动其中一个不会改变另一个。

检查结果

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

  • 每个可独立编辑的图层都有自己的源码节点。
  • 模式控件会显示，并将更改保存到代码中。
  • 重构会保留偏移和渲染外观。

OpenDesign 为编码智能体提供本地设计工作区。此页面并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。

下载 OpenDesign阅读快速入门

05 来源与许可证

来源和许可证

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

来源所有者
remotion-dev
代码库
remotion-dev/skills
技能文件
skills/remotion-interactivity/SKILL.md
许可证
尚未确认——复用前请查阅上游条款。
已审查的快照
2026-10-07 · 32b241b97f4e
编辑来源摘要
用于使 Remotion 图层源码可编辑的标记规则，涵盖自定义模式、内联动画值和关联合成注册。

由 OpenDesign 根据所链接来源撰写的原创摘要。代码库星标数是带时间属性的受欢迎程度信号，并非技能使用量或质量评分。

06 开始前的问题

开始前的问题

为什么有些 Studio 字段呈灰色？

来源指出，过于复杂的标记可能导致 Studio 无法解析值。它建议使用受支持的内联表达式和显式模式。

每个重复对象都应该有单独的 JSX 节点吗？

仅当它需要独立编辑源码时才需要。共享模板的条形元素或粒子仍可通过编程方式生成。

提取组件会创建关联合成吗？

不会。提取出的组件还必须使用合适的尺寸、时长、帧率和默认值进行注册。

OpenDesign

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

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

下载 OpenDesign浏览设计技能
上游源文件
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-interactivity/SKILL.md