Remotion Best Practices

by Remotion

Best practices for Remotion - Video creation in React npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices Download ZIPGitHub3.9k

When to use

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

Designing a video

Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load rules/video-layout.md for video-first layout and text sizing guidance.

Animate properties using useCurrentFrame() and interpolate(). Prefer interpolate() over spring() unless physics-based motion is explicitly needed. Use Easing.bezier() to customize timing, including jumpy or overshooting motion.

For animations that should be editable in Remotion Studio, keep the interpolate() call inline in the style prop and use individual CSS transform properties (scale, translate, rotate) instead of composing a transform string.

import { useCurrentFrame, Easing, interpolate, useVideoConfig } 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 Hello World!
;
};

Prefer:

style={{
 scale: interpolate(frame, [0, 100], [0, 1]),
 translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
 rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

Over:

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

style={{
 transform: `scale(${scale})`,
}}

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

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

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

export const MyComposition = () => {
 return ;
};

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

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

export const MyComposition = () => {
 return ;
};

Assets can be also referenced as remote URLs:

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

export const MyComposition = () => {
 return 
};

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

export const Subtitle = () => {
 return Subtitle
;
};

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

 return (
 
 
 
 
 
 
 
 
 
 
 
 );
}

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

Metadata can also be calculated dynamically:

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

const calculateMetadata: CalculateMetadataFunction = 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 (
 
 );
};

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.

Visual and pixel effects

When creating a visual effect, prefer: 1. normal Remotion/HTML/CSS/SVG/filter/blend/mask animation, 2. a listed effect via rules/effects.md, including on HTML rendered through <HtmlInCanvas>, 3. a custom createEffect() via rules/effects.md when the user asks for a reusable/project-specific effect, 4. custom <HtmlInCanvas onPaint> via rules/html-in-canvas.md only if no effect fits.

For light leak overlays, see rules/light-leaks.md. Docs: https://www.remotion.dev/docs/effects

Available effects: brightness(), contrast(), colorKey(), duotone(), grayscale(), hue(), invert(), saturation(), tint(), thermalVision(), blur(), linearProgressiveBlur(), zoomBlur(), dropShadow(), glow(), lightTrail(), evolve(), mirror(), scale(), uvTranslate(), xyTranslate(), barrelDistortion(), chromaticAberration(), fisheye(), cornerPin(), wave(), burlap(), emboss(), dotGrid(), halftone(), noise(), noiseDisplacement(), pattern(), pixelate(), pixelDissolve(), scanlines(), speckle(), shine(), shrinkwrap(), vignette(), contourLines(), checkerboard(), halftoneLinearGradient(), gridlines(), whiteNoise(), tvSignalOff(), lines(), rings(), waves(), zigzag(), lightLeak(), starburst().

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.

Lottie animations

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

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

azure-cloud-migrate microsoft

Assess and migrate cross-cloud workloads to Azure with migration reports and code conversion guidance. Supports AWS, GCP, and other providers. WHEN: migrate… official

fix-knip-unused-exports factory-ai

Fix knip "Unused exports" violations. There are several categories of violation, each with a different fix strategy. official

eval-driven-dev github

You're building an automated evaluation pipeline that tests a Python-based AI application end-to-end — running it the same way a real user would, with real inputs — then scoring the outputs using evaluators and producing pass/fail results via pixie test . official

lsp-setup github

Enable code intelligence (go-to-definition, find-references, hover, type info) for any programming language by installing and configuring an LSP server for… official

firecrawl-search firecrawl

Web search with optional content scraping. Returns search results as JSON, optionally with full page content. official

integrations-index dagster-io

Comprehensive index of 82+ Dagster integrations organized by official tags.yml taxonomy including official

dd-audit-key-compromise datadog-labs

Investigate a potentially compromised Datadog API key — timeline of actions, geo/IP breakdown, endpoints called, anomaly flags, and remediation steps. official

relight runcomfy-com

Relight a still image — change the lighting setup, color temperature, direction, or mood — on RunComfy via the runcomfy CLI. Routes to Qwen Edit 2509's dedicated relight LoRA endpoint for purpose-built relighting, with fallback to identity-preserving edit endpoints (Nano Banana 2 Edit, GPT Image 2 Edit, FLUX Kontext Pro) when prose lighting language is enough. Use for product relighting (studio softbox → window light), portrait mood shift (overcast → golden hour), or color-grade change.... creative image media