remotion（Remotion 视频制作）

Remotion Best Practices

Programmatic video creation using React components.

When to Use

Use this skill when dealing with Remotion code for domain-specific knowledge on:

• Video composition and sequencing
• Animations and transitions
• Audio and video asset handling
• Captions and subtitles
• Charts and data visualization
• 3D content with Three.js/R3F

Core Concepts

Compositions

import { Composition } from 'remotion';

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

Basic Animation

import { useCurrentFrame, interpolate } from 'remotion';

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

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

  const scale = interpolate(frame, [0, 30], [0.5, 1]);

  return (
    <div style={{
      opacity,
      transform: `scale(${scale})`
    }}>
      Hello World
    </div>
  );
};

Sequencing

import { Sequence, useVideoConfig } from 'remotion';

export const MyVideo = () => {
  const { fps } = useVideoConfig();

  return (
    <>
      <Sequence from={0} durationInFrames={fps * 2}>
        <Intro />
      </Sequence>
      <Sequence from={fps * 2} durationInFrames={fps * 5}>
        <MainContent />
      </Sequence>
      <Sequence from={fps * 7}>
        <Outro />
      </Sequence>
    </>
  );
};

Video and Audio

import { Video, Audio, OffthreadVideo } from 'remotion';

export const MediaExample = () => {
  return (
    <>
      {/* Use OffthreadVideo for better performance */}
      <OffthreadVideo src={staticFile('background.mp4')} />

      <Audio
        src={staticFile('music.mp3')}
        volume={0.5}
        startFrom={30}  // Start from frame 30
      />
    </>
  );
};

Spring Animations

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

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

  const scale = spring({
    frame,
    fps,
    config: {
      damping: 10,
      stiffness: 100,
      mass: 0.5,
    },
  });

  return <div style={{ transform: `scale(${scale})` }}>Bouncy!</div>;
};

Text Animations

import { useCurrentFrame, interpolate } from 'remotion';

export const TypewriterText = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame / 2);

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

Captions

import { useCurrentFrame, useVideoConfig } from 'remotion';

interface Caption {
  text: string;
  startFrame: number;
  endFrame: number;
}

export const Captions = ({ captions }: { captions: Caption[] }) => {
  const frame = useCurrentFrame();

  const currentCaption = captions.find(
    c => frame >= c.startFrame && frame < c.endFrame
  );

  return currentCaption ? (
    <div className="caption">{currentCaption.text}</div>
  ) : null;
};

Transitions

import { TransitionSeries, linearTiming, fade } from '@remotion/transitions';

export const TransitionExample = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <SlideOne />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={linearTiming({ durationInFrames: 30 })}
        presentation={fade()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <SlideTwo />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

Key Topics Reference

Best Practices

1. Use staticFile() for assets - Ensures proper bundling
2. Prefer OffthreadVideo over Video - Better performance
3. Use spring animations - More natural motion
4. Calculate metadata dynamically - For data-driven videos
5. Use sequences for organization - Keep timeline manageable
6. Test with npm run preview - Fast iteration

Attribution

Based on remotion-dev/skills remotion-best-practices - 220+ installs.