---
name: Remotion Best Practices
description: Best practices for Remotion - Video creation in React
---

# Remotion Best Practices

Best practices for Remotion - Video creation in React

# Remotion Best Practicesby Remotion
Best practices for Remotion - Video creation in React

`npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices`Download ZIPGitHub

## When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

## New project setup

When in an empty folder or workspace with no existing Remotion project, scaffold one using:

```
`npx create-video@latest --yes --blank --no-tailwind my-video
`
```

Replace `my-video` with a suitable project name.

## Designing a video

Animate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation.

```
`import { useCurrentFrame, Easing } from "remotion";

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

const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});

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

CSS transitions or animations are FORBIDDEN - they will not render correctly.

Tailwind animation class names are FORBIDDEN - they will not render correctly.

Place assets in the `public/` folder at your project root.

Use `staticFile()` to reference files from the `public/` folder.

Add images using the `<Img>` component:

```
`import { Img, staticFile } from "remotion";

export const MyComposition = () => {
return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
`
```

Add videos using the `<Video>` component from `@remotion/media`:

```
`import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};
`
```

Add audio using the `<Audio>` component from `@remotion/media`:

```
`import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
`
```

Assets can be also referenced as remote URLs:

```
`import { Video } from "@remotion/media";

export const MyComposition = () => {
return <Video src="https://remotion.media/video.mp4" />
};
`
```

To delay content wrap it in `<Sequence>` and use `from`.
To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
`<Sequence>` by default is an absolute fill. For inline content, use `layout="none"`.

```
`import { Sequence } from "remotion";

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

const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});

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

export const Subtitle = () => {
return <div>Subtitle</div>;
};

const Main = () => {
const {fps} = useVideoConfig();

return (
<AbsoluteFill>
<Sequence>
<Background />
</Sequence>
<Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
<Title />
</Sequence>
<Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
<Subtitle />
</Sequence>
</AbsoluteFill>
);
}
`
```

The width, height, fps, and duration of a video is defined in `src/Root.tsx`:

```
`import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
/>
);
};
`
```

Metadata can also be calculated dynamically:

```
`import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
MyCompositionProps
> = async ({ props, abortSignal }) => {
const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
signal: abortSignal,
}).then((res) => res.json());

return {
durationInFrames: Math.ceil(data.duration * 30),
props: {
...props,
videoUrl: data.url,
},
width: 1080,
height: 1080,
};
};

export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
fps={30}
width={1080}
height={1080}
defaultProps={{ videoId: "abc123" }}
calculateMetadata={calculateMetadata}
/>
);
};
`
```

## Starting preview

Start the Remotion Studio to preview a video:

```
`npx remotion studio
`
```

## Optional: one-frame render check

You can render a single frame with the CLI to sanity-check layout, colors, or timing.

Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.

```
`npx remotion still [composition-id] --scale=0.25 --frame=30
`
```

At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).

## Captions

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

## Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.

## Silence detection

When needing to detect and trim silent segments from video or audio files, load the ./rules/silence-detection.md file.

## Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.

## Sound effects

When needing to use sound effects, load the ./rules/sfx.md file for more information.

## 3D content

See rules/3d.md for 3D content in Remotion using Three.js and React Three Fiber.

## Advanced audio

See rules/audio.md for advanced audio features like trimming, volume, speed, pitch.

## Dynamic duration, dimensions and data

See rules/calculate-metadata.md for dynamically set composition duration, dimensions, and props.

## Advanced compositions

See rules/compositions.md for how to define stills, folders, default props and for how to nest compositions.

## Google Fonts

Is the recommended way to load fonts in Remotion. See rules/google-fonts.md for how to load Google Fonts.

## Local fonts

See rules/local-fonts.md for how to load local fonts.

## Getting audio duration

See rules/get-audio-duration.md for getting the duration of an audio file in seconds with Mediabunny.

## Getting video dimensions

See rules/get-video-dimensions.md for getting the width and height of a video file with Mediabunny.

## Getting video duration

See rules/get-video-duration.md for getting the duration of a video file in seconds with Mediabunny.

## GIFs

See rules/gifs.md for how to display GIFs synchronized with Remotion's timeline.

## Advanced Images

See rules/images.md for sizing and positioning images, dynamic image paths, and getting image dimensions.

## Light leaks

See rules/light-leaks.md for light leak overlay effects using `@remotion/light-leaks`.

## Lottie animations

See rules/lottie.md for embedding Lottie animations in Remotion.

## HTML in canvas

See rules/html-in-canvas.md if you need to render HTML into a `<canvas>` to apply 2D or WebGL effects via `<HtmlInCanvas>`.

## Measuring DOM nodes

See rules/measuring-dom-nodes.md for measuring DOM element dimensions in Remotion.

## Measuring text

See rules/measuring-text.md for measuring text dimensions, fitting text to containers, and checking overflow.

## Advanced sequencing

See rules/sequencing.md for more sequencing patterns - delay, trim, limit duration of items.

## TailwindCSS

See rules/tailwind.md for using TailwindCSS in Remotion.

## Text animations

See rules/text-animations.md for typography and text animation patterns.

## Advanced timing

See rules/timing.md for advanced timing with `interpolate` and Bézier easing, and springs.

## Transitions

See rules/transitions.md for scene transition patterns.

## Transparent videos

See rules/transparent-videos.md for rendering out a video with transparency.

## Trimming

See rules/trimming.md for trimming patterns - cutting the beginning or end of animations.

## Advanced Videos

See rules/videos.md for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.

## Parameterized videos

See rules/parameters.md for making a composition parametrizable by adding a Zod schema.

## Maps

For simple maps with little flyovers, consider using static map images.
For complex maps with animated routes or flyovers, load the maps rule: rules/maplibre.md

## Voiceover

See rules/voiceover.md for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.

## Related Skills
vercel-composition-patternsby vercelReact composition patterns that scale. Use when refactoring components withPDFby AnthropicComprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
license: Proprietary. LICENSE.txt has complete termsvitessby planetscaleVitess best practices, query optimization, and connection troubleshooting for PlanetScale Vitess databases. Load when working with Vitess databases, sharding,…browser-navigationby factory-aiComprehensive browser automation for testing, data extraction, and web interaction.contentstack-vibe-docsby contentstackThis skill contains ~13,500 lines across 30+ reference files. Read the routing table, pick the 1-3 files you actually need, and stop. Never read everything.slack-developmentby sentryImplement Slack bot behavior with correct Slack-documented message formats, inbound mention/event routing, and long-running task UX. Use when asked to "format…generate-mcp-app-uiby microsoftGenerate an MCP App widget (self-contained HTML) for an MCP tool. Describe the visual you want and paste your tool's test output. Use when user asks to create…slackby vercelEmulated Slack API for local development and testing. Use when the user needs to interact with Slack API endpoints locally, test Slack integrations, emulate…

---

**Source**: https://github.com/remotion-dev/skills/tree/main/skills/remotion
**Author**: Remotion
**Discovered via**: mcpservers.org