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 [])