remotion

name

remotion

description

Comprehensive guide for programmatically creating videos with React using the Remotion framework. Use this skill when the user wants to: (1) Create or edit motion graphics and videos using React code, (2) Handle video rendering pipelines, (3) Implement complex animations like text effects, transitions, or 3D scenes, (4) Manage media assets like audio, images, GIFs, and Lottie animations, (5) Automate video generation based on data.

Remotion Video Creation

Remotion is a powerful framework for creating videos programmatically with React. This skill provides the essential knowledge and rules for building professional-quality motion graphics.

Quick Start

1. Initialize a Project: Use npx create-remotion@latest to start a new project.
2. Define a Composition: Every Remotion project starts with a composition that defines the dimensions, duration, and FPS.
3. Animate with Code: Use useCurrentFrame() and useVideoConfig() to drive your animations based on the current frame number.

Core Reference Modules

This skill includes detailed reference files for various Remotion features. Each file contains specific patterns and code examples:

Animation & Timing

• animations.md - Fundamental animation skills.
• timing.md - Interpolation curves (linear, easing, spring).
• text-animations.md - Typography and text animation patterns.
• transitions.md - Scene transition patterns.

Media & Assets

• assets.md - Importing images, videos, audio, and fonts.
• audio.md - Advanced audio handling (trimming, volume, pitch).