--- name: remotion-dev description: Create videos programmatically using Remotion (React-based video framework). Best practices for composition, rendering, and deployment. metadata: {"moltbot":{"emoji":"🎬","requires":{"bins":["npx"]}}} --- # Remotion Video Creation Remotion lets you create videos programmatically using React. Use this skill when building video content, animations, or dynamic video generation for MENTORINGBASE or marketing. ## Quick Start ### Install Remotion (project-local) ```bash npm install remotion @remotion\/cli ``` ### Create Basic Composition ```jsx \/\/ src\/Video.jsx import { useCurrentFrame, useVideoConfig } from 'remotion'; export const MyVideo = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = Math.min(1, frame \/ 30); return (

Frame {frame} - {(frame \/ fps).toFixed(2)}s <\/h1> <\/div> ); }; ``` ### Register Composition ```jsx \/\/ src\/Root.jsx import { Composition } from 'remotion'; import { MyVideo } from '.\/Video'; export const RemotionRoot = () => { return ( ); }; ``` ## Common Patterns ### Text Animation ```jsx import { spring, useCurrentFrame, useVideoConfig } from 'remotion'; const scale = spring({ frame, fps, from: 0, to: 1, config: { damping: 100, stiffness: 200 } }); ``` ### Image Sequences ```jsx import { Img, staticFile } from 'remotion'; ``` ### Audio Sync ```jsx import { Audio, useCurrentFrame } from 'remotion';