npx skills add https://github.com/remotion-dev/remotion --skill docs-demo交互式演示使用 @remotion/player 在文档页面中内嵌渲染 Remotion 合成。它们位于 packages/docs/components/demos/ 目录下。
创建组件:在 packages/docs/components/demos/ 目录下创建一个组件(例如 MyDemo.tsx)。它应该是一个使用 Remotion 钩子(如 useCurrentFrame() 和 useVideoConfig())的标准 React 组件。
注册演示:在 packages/docs/components/demos/types.ts 文件中注册:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
DemoType 对象:
id:在 <Demo type="..." /> 中使用的唯一字符串标识符comp:React 组件compWidth / compHeight:画布尺寸(例如 1280x720)fps:帧率(通常为 30)durationInFrames:动画长度(帧数)autoPlay:是否自动播放options:交互式控件数组(可以为空数组 [])添加到演示数组:在 packages/docs/components/demos/index.tsx 文件中:
./types 导入演示常量demos 数组中在 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: [],
};
每周安装量
259
代码仓库
GitHub 星标数
40.7K
首次出现时间
2026年1月31日
安全审计
已安装于
opencode219
codex217
gemini-cli213
claude-code210
github-copilot207
amp203
Interactive demos render a Remotion composition inline in documentation pages using @remotion/player. They live in packages/docs/components/demos/.
Create a component in packages/docs/components/demos/ (e.g. MyDemo.tsx). It should be a standard React component using Remotion hooks like useCurrentFrame() and useVideoConfig().
Register the demo in packages/docs/components/demos/types.ts:
DemoType object with these fields:
id: unique string used in <Demo type="..." />comp: the React componentcompWidth / compHeight: canvas dimensions (e.g. 1280x720)fps: frame rate (typically 30)durationInFrames: animation lengthautoPlay: whether it plays automaticallyoptions: array of interactive controls (can be empty )Add to the demos array in packages/docs/components/demos/index.tsx:
./typesdemos arrayUse in MDX with <Demo type="your-id" />
Options add interactive controls below the player. Each option needs name and optional ('no', 'default-enabled', or 'default-disabled').
Supported types:
type: 'numeric' — slider with min, max, step, defaulttype: 'boolean' — checkbox with defaulttype: 'enum' — dropdown with values array and defaulttype: 'string' — text input with Option values are passed to the component as inputProps. Access them as regular React props.
export const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};
Weekly Installs
259
Repository
GitHub Stars
40.7K
First Seen
Jan 31, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode219
codex217
gemini-cli213
claude-code210
github-copilot207
amp203
Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践
2,600 周安装
[]default