docs-demo
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
ソース情報
- リポジトリ
- remotion-dev/remotion
- ソースの最終更新活動
- 2026年5月31日 19:59
- 検出された SKILL.md の言語
- 英語
- スター
- 70,964
- フォーク
- 5,852
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- docs-demo
- description
- Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
# Adding an Interactive Demo to Docs
Interactive demos render a Remotion composition inline in documentation pages using `@remotion/player`. They live in `packages/docs/components/demos/`.
Effect demos are separate: use `<EffectsDemo type="effects-..." />` and register them in `packages/docs/components/effects-demos/registry.ts` with the real effect `schema`, not the generic `<Demo>` options array.
## Steps
1. **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()`.
2. **Register the demo** in `packages/docs/components/demos/types.ts`:
- Import the component
- Export a `DemoType` object with these fields:
- `id`: unique string used in `<Demo type="..." />`
- `comp`: the React component
- `compWidth` / `compHeight`: canvas dimensions (e.g. 1280x720)
- `fps`: frame rate (typically 30)
- `durationInFrames`: animation length
- `autoPlay`: whether it plays automatically
- `options`: array of interactive controls (can be empty `[]`)
3. **Add to the demos array** in `packages/docs/components/demos/index.tsx`:
- Import the demo constant from `./types`
- Add it to the `demos` array
4. **Use in MDX** with `<Demo type="your-id" />`
## Options
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`, `default`
- `type: 'boolean'` — checkbox with `default`
- `type: 'enum'` — dropdown with `values` array and `default`
- `type: 'string'` — text input with `default`
Option values are passed to the component as `inputProps`. Access them as regular React props.
## Example registration
```ts
export const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};
```
GitHubで見る