name: remotion
description: Create videos programmatically in React using Remotion. Includes best practices for composition, animation, audio, and asset management.

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>;
};