Remotion

Remotion allows you to create videos programmatically using React.

When to Use This Skill

• •Creating videos with React components
• •Animating elements using frame-based timing
• •Managing audio and video assets in a timeline
• •Generating dynamic video content based on data
• •Configuring video compositions and rendering

How to Use

The knowledge in this skill is organized into specific resources:

Core Concepts

• •Compositions - Defining compositions, stills, and folder structures
• •Sequencing - Managing timeline with delays, trims, and sequences
• •Timing - Interpolation, easing, and spring animations
• •Transitions - Scene transitions and patterns

Working with Assets

• •Assets - Importing images, videos, audio, and fonts
• •Audio - Handling audio tracks, volume, and trimming
• •Videos - Embedding and manipulating video files
• •Images - Using the Img component for images
• •GIFs - Using GIFs in your timeline
• •Lottie - Embedding Lottie animations
• •Fonts - Loading custom and Google fonts

Animation & visual Effects

• •Animations - Fundamental animation patterns
• •Text Animations - Typography effects
• •3D - Using Three.js and React Three Fiber
• •Charts - Data visualization and charts
• •Tailwind - Styling with Tailwind CSS

Captions & Metadata

• •Display Captions - Rendering captions on screen
• •Import SRT - Using subtitle files
• •Transcribe - Transcribing audio to text
• •Metadata - Dynamic composition properties

Utilities

• •Get Video Duration - Measuring video length
• •Get Audio Duration - Measuring audio length
• •Get Video Dimensions - Checking video size
• •Extract Frames - Getting frames from video
• •Can Decode - Browser codec support check
• •Measure Text - Calculating text size
• •Measure DOM - Measuring elements

Best Practices

• •Use useCurrentFrame() and interpolate() for smooth seekable animations.
• •Prefer Sequence for arranging components in time over conditional rendering.
• •separate logic from presentation components.
• •Use staticFile() for referencing assets in the public folder.

Examples

Basic composition

import {Composition} from 'remotion';
import {MyVideo} from './MyVideo';

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

Simple Animation

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

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

  const scale = spring({
    frame,
    fps,
  });

  return <div style={{transform: \`scale(\${scale})\`}}>Hello Remotion</div>;
};