Remotion Video

When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge for programmatic video creation.

Core Principles

Remotion allows you to create videos using React components. Key concepts:

1. Compositions: Define video compositions with duration, fps, width, and height
2. Frame-based Animation: Use useCurrentFrame() and useVideoConfig() for animations
3. Interpolation: Use interpolate() for smooth transitions and animations
4. Sequencing: Use <Sequence> to control timing of components

Best Practices

Animations

• Use interpolate() for smooth value transitions
• Leverage spring animations for natural motion
• Apply easing functions (linear, ease-in, ease-out, cubic-bezier)
• Synchronize animations with the timeline using useCurrentFrame()

Assets

• Import images, videos, audio using ES6 imports or staticFile()
• Use <Img>, <Video>, and <Audio> components from Remotion
• Ensure assets are in the public/ folder for staticFile() usage

Performance

• Optimize heavy computations with useMemo()
• Use delayRender() and continueRender() for async operations
• Keep component trees shallow for better rendering performance

Typography & Text

• Load fonts using @remotion/google-fonts or local font files
• Measure text dimensions with measureText() for dynamic layouts
• Animate text with character-by-character reveals or word highlighting

Audio

• Trim audio using <Audio> component props
• Control volume, playback speed, and pitch
• Get audio duration with getAudioDurationInSeconds()

Video Embedding

• Use <OffthreadVideo> for better performance
• Trim videos with startFrom and endAt props
• Control playback speed, volume, and looping

Common Patterns

Fade In/Out:

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

Scale Animation:

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

Sequencing Multiple Scenes:

<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>
<Sequence from={90} durationInFrames={120}>
  <Scene2 />
</Sequence>

Resources

For detailed rules and examples, refer to the Remotion documentation and the remotion-dev/skills repository for comprehensive guides on:

• 3D content, charts, captions, transitions
• Lottie animations, GIFs, fonts
• Audio/video manipulation, trimming, transcription