remotion-dev / docs-demo
Install for your project team
Run this command in your project directory to install the skill for your entire team:
mkdir -p .claude/skills/docs-demo && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/717" && unzip -o skill.zip -d .claude/skills/docs-demo && rm skill.zipProject Skills
This skill will be saved in .claude/skills/docs-demo/ and checked into git. All team members will have access to it automatically.
Important: Please verify the skill by reviewing its instructions before using it.
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
7 views
0 installs
Skill Content
---
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/`.
## 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: [],
};
```