SuperAPI AI 工具集

docs-demo

写作与研究

查看项目

更新于 10-16 07:58

技能介绍

用途:为 Remotion 文档页面添加内嵌交互式演示(Demo)。演示通过 @remotion/player 在文档中直接渲染 Remotion 合成,放置在 packages/docs/components/demos/ 目录下,并在 MDX 中以 <Demo type="your-id" /> 方式使用。效果类演示(Effects Demo)是独立机制,需使用 <EffectsDemo type="effects-..." /> 并在 packages/docs/components/effects-demos/registry.ts 中按真实 effect schema 注册,而非通用 <Demo> 的 options 数组。

主要能力与使用步骤:先在 packages/docs/components/demos/ 中创建标准 React 组件(如 MyDemo.tsx),可使用 useCurrentFrame()、useVideoConfig() 等 Remotion 钩子;再在 packages/docs/components/demos/types.ts 中导入该组件并导出 DemoType 对象,字段包括 id(<Demo type="..." /> 使用的唯一字符串)、comp、compWidth/compHeight(画布尺寸,如 1280x720)、fps(通常 30)、durationInFrames、autoPlay、options(可为空数组 []);随后在 packages/docs/components/demos/index.tsx 的 demos 数组中导入并加入该演示常量;最后在 MDX 中使用 <Demo type="your-id" />。

交互选项:options 在播放器下方添加控件,每项需要 name 与可选 ('no'、'default-enabled'、'default-disabled')。支持类型:numeric(滑块,含 min、max、step、default)、boolean(复选框,含 default)、enum(下拉框,含 values 与 default)、string(文本输入,含 default)。选项值以 inputProps 传给组件,可当作普通 React props 访问。

限制:资料未提供其他限制、收费或平台信息。