用途:为 Remotion 文档页面添加内嵌交互式演示。交互式演示通过 @remotion/player 在文档页内联渲染 Remotion 合成,存放于 packages/docs/components/demos/。
注意:效果演示是独立的,应使用 <EffectsDemo type="effects-..." />,并在 packages/docs/components/effects-demos/registry.ts 中用真实的效果 schema 注册,而不是通用的 <Demo> options 数组。
使用步骤:
- 在 packages/docs/components/demos/ 创建组件(如 MyDemo.tsx),使用 useCurrentFrame()、useVideoConfig() 等 Remotion hooks。
- 在 packages/docs/components/demos/types.ts 注册:导入组件,导出 DemoType 对象,字段包括 id(用于 <Demo type="..." /> 的唯一字符串)、comp(React 组件)、compWidth/compHeight(画布尺寸,如 1280x720)、fps(帧率,通常 30)、durationInFrames(动画长度)、autoPlay(是否自动播放)、options(交互控件数组,可为空 [])。
- 在 packages/docs/components/demos/index.tsx 的 demos 数组中添加:从 ./types 导入 demo 常量并加入 demos 数组。
- 在 MDX 中使用 <Demo type="your-id" />。
选项:选项在播放器下方添加交互控件,每项需要 name 和 optional('no'、'default-enabled' 或 'default-disabled')。支持类型:numeric(滑块,含 min、max、step、default)、boolean(复选框,含 default)、enum(下拉框,含 values 数组与 default)、string(文本输入,含 default)。选项值以 inputProps 传入组件,按普通 React props 访问。
限制:资料未提供其他平台、收费或额外功能信息。