mcpField
D
docs-demo

docs-demo

github.com/remotion-dev开发68.6k2.5k 次安装今天更新
代码仓库

关于 docs-demo

用于在文档中添加 Remotion 交互式合成的仓库技能，面向贡献者，指导创建 React 演示组件、登记播放设置与控件，并嵌入 MDX。

主要功能

  1. 01创建 React 演示组件
  2. 02登记演示元数据
  3. 03配置交互控件选项
  4. 04将演示加入列表
  5. 05在 MDX 中嵌入

适用场景

  1. 01在文档中添加可播放合成
  2. 02将演示参数设为交互控件
  3. 03在 MDX 中嵌入已登记演示

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remotion-dev/remotion --skill docs-demo

安装后在 Claude Code 中输入/docs-demo确认已加载。

详细介绍

在文档中添加交互式演示

交互式演示使用 @remotion/player 在文档页面中内嵌渲染 Remotion 合成。它们位于 packages/docs/components/demos/。

特效演示是独立的：使用 <EffectsDemo type="effects-..." />，并在 packages/docs/components/effects-demos/registry.ts 中通过实际的特效 schema 注册，而不是使用通用 <Demo> 选项数组。

步骤

  1. 创建组件，放在 packages/docs/components/demos/ 中（例如 MyDemo.tsx）。它应是一个标准的 React 组件，使用 useCurrentFrame() 和 useVideoConfig() 等 Remotion 钩子。

  2. 注册演示，在 packages/docs/components/demos/types.ts 中：

    • 导入组件
    • 导出一个包含以下字段的 DemoType 对象：
      • id：用于 <Demo type="..." /> 的唯一字符串
      • comp：React 组件
      • compWidth / compHeight：画布尺寸（例如 1280x720）
      • fps：帧率（通常为 30）
      • durationInFrames：动画时长
      • autoPlay：是否自动播放
      • options：交互式控件数组（可以为空 []）

  3. 添加到演示数组，在 packages/docs/components/demos/index.tsx 中：

    • 从 ./types 导入演示常量
    • 将其添加到 demos 数组中

  4. 在 MDX 中使用 <Demo type="your-id" />

选项

选项会在播放器下方添加交互式控件。每个选项都需要 name 和 optional（'no'、'default-enabled' 或 'default-disabled'）。

支持的类型：

  • type: 'numeric' — 带有 min、max、step、default 的滑块
  • type: 'boolean' — 带有 default 的复选框
  • type: 'enum' — 带有 values 数组和 default 的下拉菜单
  • type: 'string' — 带有 default 的文本输入框

选项值会作为 inputProps 传递给组件。可将它们作为常规 React 属性访问。

注册示例

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};

评论

支持 Markdown