Embed interactive Remotion demos in MDX documentation pages.
npx skills add https://github.com/Animesh-Kr/claude-skills --skill docs-demo-animesh-kr
Please help me install this Agent Skill. Skill: docs-demo Source: https://github.com/Animesh-Kr/claude-skills/tree/main/remotion-main/.claude/skills/docs-demo Command: npx skills add https://github.com/Animesh-Kr/claude-skills --skill docs-demo-animesh-kr
Interactive demos render a Remotion composition inline in documentation pages using @remotion/player. They live in packages/docs/components/demos/.
Create a demo component in packages/docs/components/demos/, register it in packages/docs/components/demos/types.ts, include it in packages/docs/components/demos/index.tsx, and render it in MDX with <Demo type="your-id"/>.
High-intent search queries and answers about installing and using this skill.
To embed interactive Remotion demos in docs, create a React component using Remotion hooks, register it with a DemoType entry, and render it in MDX using the <Demo> tag.
Registering a Remotion demo component requires a DemoType entry specifying id, comp, compWidth, compHeight, fps, durationInFrames, autoPlay, and options to ensure consistent playback behavior.
Yes, you can configure multiple Remotion demos on a single page by adding each component to the demos array and setting the autoPlay property within their respective DemoType registrations.
The best way to integrate an interactive video demo into MDX is to wire a standard Remotion player component through a registered id and invoke it using the <Demo type="your-id" /> MDX usage tag.
You must configure fps, compWidth, and compHeight for each individual Remotion demo within the DemoType entry in types.ts to ensure consistent sizing and playback across the documentation site.
tiantangcao1980-webCompile React components into frame-by-frame video outputs.
gptmePublish HTML artifacts to web hosting and validate the public URL.
billydeeii136Create React-based programmatic videos with frame-by-frame animations.
hasnaConvert structured JSON timeline specifications into rendered Remotion video compositions.
