Remotion Best Practices

Remotion Best Practices

Best practices for creating videos programmatically with Remotion in React.

When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about video creation, animations, and compositions in React.

Core Concepts

Compositions

Compositions are the building blocks of Remotion videos. Each composition represents a video with specific dimensions, duration, and frame rate.

import { Composition } from 'remotion';

export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="MyVideo"
        component={MyVideo}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Animations

Use useCurrentFrame() and useVideoConfig() for time-based animations:

import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const MyComponent = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return <div style={{ opacity }}>Hello World</div>;
};

Sequencing

Use <Sequence> to layout content over time:

import { Sequence } from 'remotion';

export const MyVideo = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={60}>
        <Scene1 />
      </Sequence>
      <Sequence from={60} durationInFrames={90}>
        <Scene2 />
      </Sequence>
    </>
  );
};

Key Patterns

Assets

Import assets using staticFile():

import { staticFile, Img, Video, Audio } from 'remotion';

export const MyComponent = () => {
  return (
    <>
      <Img src={staticFile('logo.png')} />
      <Video src={staticFile('video.mp4')} />
      <Audio src={staticFile('audio.mp3')} />
    </>
  );
};

Timing & Easing

import { spring, interpolate } from 'remotion';

// Spring animation
const scale = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

// Easing
const position = interpolate(frame, [0, 100], [0, 500], {
  easing: (t) => t * t, // Ease in
});

Text Animations

import { interpolate } from 'remotion';

export const TextReveal = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  
  const charsToShow = Math.floor(interpolate(
    frame,
    [0, 30],
    [0, text.length],
    { extrapolateRight: 'clamp' }
  ));

  return <div>{text.slice(0, charsToShow)}</div>;
};

Audio

import { Audio } from 'remotion';

export const MyVideo = () => {
  return (
    <>
      <Audio src={staticFile('music.mp3')} volume={0.5} />
      <Audio 
        src={staticFile('voiceover.mp3')} 
        startFrom={30} // Start at frame 30
        endAt={120} // End at frame 120
      />
    </>
  );
};

3D with Three.js

Remotion works great with Three.js and React Three Fiber:

import { ThreeCanvas } from '@remotion/three';
import { useCurrentFrame } from 'remotion';

export const ThreeDScene = () => {
  const frame = useCurrentFrame();

  return (
    <ThreeCanvas>
      <ambientLight intensity={0.5} />
      <mesh rotation={[0, frame * 0.01, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </ThreeCanvas>
  );
};

Best Practices

1. Keep components pure: Remotion renders each frame independently
2. Use interpolate() for smooth animations: Don't increment values directly
3. Leverage spring() for natural motion: Better than linear interpolation
4. Optimize asset loading: Use staticFile() for all media assets
5. Test at different frame rates: Ensure animations work at various fps
6. Use TypeScript: Better type safety for props and configurations
7. Break down into small components: Reusable, testable, maintainable

Common Patterns

Fade In/Out

const fadeIn = interpolate(frame, [0, 30], [0, 1]);
const fadeOut = interpolate(frame, [durationInFrames - 30, durationInFrames], [1, 0]);
const opacity = Math.min(fadeIn, fadeOut);

Scale Animation

const scale = spring({
  frame: frame - startFrame,
  fps,
  from: 0,
  to: 1,
  config: { mass: 0.5 },
});

Position Animation

const translateY = interpolate(
  frame,
  [0, 30],
  [100, 0],
  { extrapolateRight: 'clamp' }
);

References

• Remotion Documentation
• Remotion Examples
• Animation API
• React Three Fiber Integration

Related Skills

This skill covers Remotion fundamentals. For more specific topics, refer to:

• Three.js integration for 3D content
• Audio handling and synchronization
• Advanced animation techniques
• Dynamic composition metadata