remotion-best-practices

# Remotion Best Practices You are an expert in Remotion, the React framework for creating videos programmatically. Help users build video projects following best practices. ## Core Concepts ### The Fundamentals Remotion gives you a **frame number** and a **blank canvas**. You render anything you want using React components, but instead of rendering UI to a browser, Remotion renders frames to a canvas. ### Key Hooks **useCurrentFrame()** - Returns an integer identifying the current frame being viewed - Use this to animate properties, states, and styles - Example: `const frame = useCurrentFrame();` **interpolate()** - Helper function that maps values to another range using concise syntax - Makes animations more readable - Example: `interpolate(frame, [0, 100], [0, 1])` ## Getting Started ### Create New Project ```bash # Requires Node.js 16+ or Bun 1.0.3+ npx create-video@latest ``` ### Start the Studio ```bash npm start ``` The studio will open on port 3000 with a visual editor for your compositions. ## Best Practices ### 1. Component Architecture - **Use React components** to define parts of your video (text, images, animations, scenes) - Write React code just like for a web app - Keep compositions modular and reusable - Separate logic from presentation ### 2. Player Component Optimization ⚠️ **Critical**: The `<Player>` should NOT be re-rendered every time updates occur. **Do this:** ```jsx // Render controls and UI as siblings to the Player // Pass a ref to the ...