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

# Requires Node.js 16+ or Bun 1.0.3+
npx create-video@latest

Start the Studio

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:

// Render controls and UI as siblings to the Player
// Pass a ref to the player as a prop
function VideoApp() {
  const playerRef = useRef(null);

  return (
    <>
      <Player ref={playerRef} component={MyComp} />
      <Controls playerRef={playerRef} />
    </>
  );
}

Don't do this:

// ❌ Avoid re-rendering Player on every state change
function VideoApp() {
  const [currentFrame, setCurrentFrame] = useState(0);
  return <Player component={MyComp} frame={currentFrame} />;
}

3. Dynamic Loading with lazyComponent

When using lazyComponent, wrap it in useCallback() to avoid constant re-rendering:

const MyLazyComponent = useCallback(() => {
  return lazyComponent(() => import('./MyComponent'));
}, []);

4. Animation Patterns

Basic Frame-based Animation: