remotion

name	remotion
description	Best practices for Remotion - video creation in React. Use when working with video compositions, animations, or subtitles.
user-invocable	true
triggers	["remotion","video","animation","subtitle"]
allowed-tools	Read, Write, Edit, Bash, Grep, Glob
model	opus

Remotion Best Practices

Video creation in React using Remotion.

When to Use

• Creating video compositions
• Adding animations to video
• Working with subtitles/captions
• Embedding media (videos, images, audio)
• Sequencing and timing

Core Concepts

Compositions

Define video dimensions, duration, and frame rate:

import { Composition } from 'remotion';

<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>

Animation with useCurrentFrame

import { useCurrentFrame, interpolate } from 'remotion';

const MyComponent = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

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

Sequencing

import { Sequence } from 'remotion';

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

Detailed Rules

Load specific rules for detailed guidance:

Rule	When to Load
rules/animations.md	Fundamental animation patterns
rules/compositions.md	Defining compositions, stills, folders
rules/subtitles.md	Captions and subtitle rendering
rules/timing.md	Interpolation, easing, springs
rules/videos.md	Embedding videos - trim, volume, speed

Quick Reference

Interpolation

// Linear interpolation
const value = interpolate(frame, [0, 100], [0, 1]);

// With easing
const value = interpolate(frame, [0, 100], [0, 1], {
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
});

// Clamped (default extrapolateLeft/Right: 'clamp')
const value = interpolate(frame, [0, 100], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

Spring Animation

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

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

Media

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

// Local file
<Video src={staticFile('video.mp4')} />

// With controls
<Video
  src={src}
  volume={0.5}
  startFrom={30}
  endAt={120}
/>

Integration Notes

• Works with React 18+
• Use staticFile() for assets in /public
• Frame-based timing (not time-based)
• SSR-compatible components

Source: remotion-dev/skills