remotion-best-practices

SKILL.md

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

When to use

Use this skill 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.