docs-demo_skill

Overview

This skill helps you add an interactive Remotion demo to the documentation site by creating a new <Demo> component and registering it with the docs demo registry. It streamlines the process of embedding a playable Remotion composition using @remotion/player so readers can interact with live examples. The result is an inline demo with optional interactive controls that pass values to your component as props.

How this skill works

You create a standard React component that uses Remotion hooks like useCurrentFrame and useVideoConfig, then register it as a DemoType object with metadata (id, comp, dimensions, fps, duration, autoplay). The registry exports a demos array consumed by the documentation <Demo /> component; selecting the id in MDX renders the player. Options defined in the demo registration become interactive controls whose values are supplied as inputProps to your component.

When to use it

• Demonstrate an animated snippet or feature directly inside a docs page.
• Provide hands-on examples where readers can tweak parameters and see results immediately.
• Show performance or visual behavior for components that depend on frame/time.
• Teach Remotion APIs with live, editable examples tied to documentation text.

Best practices

• Keep demos small and focused; limit durationInFrames and comp size to avoid heavy CPU usage.
• Choose sensible compWidth/compHeight and fps so the player loads quickly on typical devices.
• Use options sparingly and give good default values so the demo works without user input.
• Name the demo id clearly and consistently to make MDX usage intuitive (e.g., 'video-loop', 'text-animate').
• Access option values via inputProps and provide fallbacks to avoid runtime errors.

Example use cases

• Add a tiny looping animation to illustrate useCurrentFrame and easing functions.
• Show a text animation where a dropdown selects different fonts and a slider controls speed.
• Embed a color or image compositing demo with boolean toggles for effects.
• Demonstrate an export-related API by providing controls for resolution and frame range.