remotion-best-practices
Installation
Summary
Domain-specific knowledge base for building videos with Remotion and React.
- Covers 30+ rule files spanning animations, audio, assets, 3D content, charts, text, transitions, and composition management
- Includes specialized guidance for captions, FFmpeg operations, audio visualization, and sound effects integration
- Provides patterns for dynamic metadata calculation, media inspection (duration, dimensions, frame extraction), and parametrizable compositions
- Supports advanced features like Lottie animations, light leak effects, Mapbox integration, TailwindCSS styling, and AI-generated voiceovers
SKILL.md
When to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
New project setup
When in an empty folder or workspace with no existing Remotion project, scaffold one using:
npx create-video@latest --yes --blank --no-tailwind my-video
Replace my-video with a suitable project name.
Designing a video
Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load rules/video-layout.md for video-first layout and text sizing guidance.
Animate properties using useCurrentFrame() and interpolate(). Prefer interpolate() over spring() unless physics-based motion is explicitly needed. Use Easing.bezier() to customize timing, including jumpy or overshooting motion.