1---
2name: remotion-best-practices
3description: Best practices for Remotion - Video creation in React
4metadata:
5  tags: remotion, video, react, animation, composition
6---
7 
8## When to use
9 
10Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
11 
12## New project setup
13 
14When in an empty folder or workspace with no existing Remotion project, scaffold one using:
15 
16```bash
17npx create-video@latest --yes --blank --no-tailwind my-video
18```
19 
20Replace `my-video` with a suitable project name.
21 
22## Designing a video
23 
24Animate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation.
25 
26```tsx
27import { useCurrentFrame, Easing } from "remotion";
28 
29export const FadeIn = () => {
30  const frame = useCurrentFrame();
31  const { fps } = useVideoConfig();
32 
33  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
34    extrapolateRight: "clamp",
35    extrapolateLeft: "clamp",
36    easing: Easing.bezier(0.16, 1, 0.3, 1),
37  });
38 
39  return <div style={{ opacity }}>Hello World!</div>;
40};
41```
42 
43CSS transitions or animations are FORBIDDEN - they will not render correctly.  
44Tailwind animation class names are FORBIDDEN - they will not render correctly.
45 
46Place assets in the `public/` folder at your project root.
47 
48Use `staticFile()` to reference files from the `public/` folder.
49 
50Add images using the `<Img>` component:
51 
52```tsx
53import { Img, staticFile } from "remotion";
54 
55export const MyComposition = () => {
56  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
57};
58```
59 
60Add videos using the `<Video>` component from `@remotion/media`:
61 
62```tsx
63import { Video } from "@remotion/media";
64import { staticFile } from "remotion";
65 
66export const MyComposition = () => {
67  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
68};
69```
70 
71Add audio using the `<Audio>` component from `@remotion/media`:
72 
73```tsx
74import { Audio } from "@remotion/media";
75import { staticFile } from "remotion";
76 
77export const MyComposition = () => {
78  return <Audio src={staticFile("audio.mp3")} />;
79};
80```
81 
82Assets can be also referenced as remote URLs:
83 
84```tsx
85import { Video } from "@remotion/media";
86 
87export const MyComposition = () => {
88  return <Video src="https://remotion.media/video.mp4" />
89};
90```
91 
92To delay content wrap it in `<Sequence>` and use `from`.
93To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
94`<Sequence>` by default is an absolute fill. For inline content, use `layout="none"`.
95 
96```tsx
97import { Sequence } from "remotion";
98 
99export const Title = () => {
100  const frame = useCurrentFrame();
101  const { fps } = useVideoConfig();
102 
103  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
104    extrapolateRight: "clamp",
105    extrapolateLeft: "clamp",
106    easing: Easing.bezier(0.16, 1, 0.3, 1),
107  });
108 
109  return <div style={{ opacity }}>Title</div>;
110};
111 
112export const Subtitle = () => {
113  return <div>Subtitle</div>;
114};
115 
116const Main = () => {
117  const {fps} = useVideoConfig();
118 
119  return (
120    <AbsoluteFill>
121      <Sequence>
122        <Background />
123      </Sequence>
124      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
125        <Title />
126      </Sequence>
127      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
128        <Subtitle />
129      </Sequence>
130    </AbsoluteFill>
131  );
132}
133```
134 
135The width, height, fps, and duration of a video is defined in `src/Root.tsx`:
136 
137```tsx
138import { Composition } from "remotion";
139import { MyComposition } from "./MyComposition";
140 
141export const RemotionRoot = () => {
142  return (
143    <Composition
144      id="MyComposition"
145      component={MyComposition}
146      durationInFrames={100}
147      fps={30}
148      width={1080}
149      height={1080}
150    />
151  );
152};
153```
154 
155Metadata can also be calculated dynamically:
156 
157```tsx
158import { Composition, CalculateMetadataFunction } from "remotion";
159import { MyComposition, MyCompositionProps } from "./MyComposition";
160 
161const calculateMetadata: CalculateMetadataFunction<
162  MyCompositionProps
163> = async ({ props, abortSignal }) => {
164  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
165    signal: abortSignal,
166  }).then((res) => res.json());
167 
168  return {
169    durationInFrames: Math.ceil(data.duration * 30),
170    props: {
171      ...props,
172      videoUrl: data.url,
173    },
174    width: 1080,
175    height: 1080,
176  };
177};
178 
179export const RemotionRoot = () => {
180  return (
181    <Composition
182      id="MyComposition"
183      component={MyComposition}
184      fps={30}
185      width={1080}
186      height={1080}
187      defaultProps={{ videoId: "abc123" }}
188      calculateMetadata={calculateMetadata}
189    />
190  );
191};
192```
193 
194## Starting preview
195 
196Start the Remotion Studio to preview a video:
197 
198```bash
199npx remotion studio
200```
201 
202## Optional: one-frame render check
203 
204You can render a single frame with the CLI to sanity-check layout, colors, or timing.  
205Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
206 
207```bash
208npx remotion still [composition-id] --scale=0.25 --frame=30
209```
210 
211At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).
212 
213## Captions
214 
215When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
216 
217## Using FFmpeg
218 
219For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
220 
221## Silence detection
222 
223When needing to detect and trim silent segments from video or audio files, load the [./rules/silence-detection.md](./rules/silence-detection.md) file.
224 
225## Audio visualization
226 
227When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
228 
229## Sound effects
230 
231When needing to use sound effects, load the [./rules/sfx.md](./rules/sfx.md) file for more information.
232 
233## 3D content
234 
235See [rules/3d.md](rules/3d.md) for 3D content in Remotion using Three.js and React Three Fiber.
236 
237## Advanced audio
238 
239See [rules/audio.md](rules/audio.md) for advanced audio features like trimming, volume, speed, pitch.
240 
241## Dynamic duration, dimensions and data
242 
243See [rules/calculate-metadata.md](rules/calculate-metadata.md) for dynamically set composition duration, dimensions, and props.
244 
245## Advanced compositions
246 
247See [rules/compositions.md](rules/compositions.md) for how to define stills, folders, default props and for how to nest compositions.
248 
249## Google Fonts
250 
251Is the recommended way to load fonts in Remotion. See [rules/google-fonts.md](rules/google-fonts.md) for how to load Google Fonts.
252 
253## Local fonts
254 
255See [rules/local-fonts.md](rules/local-fonts.md) for how to load local fonts.
256 
257## Getting audio duration
258 
259See [rules/get-audio-duration.md](rules/get-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.
260 
261## Getting video dimensions
262 
263See [rules/get-video-dimensions.md](rules/get-video-dimensions.md) for getting the width and height of a video file with Mediabunny.
264 
265## Getting video duration
266 
267See [rules/get-video-duration.md](rules/get-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.
268 
269## GIFs
270 
271See [rules/gifs.md](rules/gifs.md) for how to display GIFs synchronized with Remotion's timeline.
272 
273## Advanced Images
274 
275See [rules/images.md](rules/images.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.
276 
277## Light leaks
278 
279See [rules/light-leaks.md](rules/light-leaks.md) for light leak overlay effects using `@remotion/light-leaks`.
280 
281## Lottie animations
282 
283See [rules/lottie.md](rules/lottie.md) for embedding Lottie animations in Remotion.
284 
285## HTML in canvas
286 
287See [rules/html-in-canvas.md](rules/html-in-canvas.md) if you need to render HTML into a `<canvas>` to apply 2D or WebGL effects via `<HtmlInCanvas>`.
288 
289## Measuring DOM nodes
290 
291See [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.
292 
293## Measuring text
294 
295See [rules/measuring-text.md](rules/measuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.
296 
297## Advanced sequencing
298 
299See [rules/sequencing.md](rules/sequencing.md) for more sequencing patterns - delay, trim, limit duration of items.
300 
301## TailwindCSS
302 
303See [rules/tailwind.md](rules/tailwind.md) for using TailwindCSS in Remotion.
304 
305## Text animations
306 
307See [rules/text-animations.md](rules/text-animations.md) for typography and text animation patterns.
308 
309## Advanced timing
310 
311See [rules/timing.md](rules/timing.md) for advanced timing with `interpolate` and Bézier easing, and springs.
312 
313## Transitions
314 
315See [rules/transitions.md](rules/transitions.md) for scene transition patterns.
316 
317## Transparent videos
318 
319See [rules/transparent-videos.md](rules/transparent-videos.md) for rendering out a video with transparency.
320 
321## Trimming
322 
323See [rules/trimming.md](rules/trimming.md) for trimming patterns - cutting the beginning or end of animations.
324 
325## Advanced Videos
326 
327See [rules/videos.md](rules/videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.
328 
329## Parameterized videos
330 
331See [rules/parameters.md](rules/parameters.md) for making a composition parametrizable by adding a Zod schema.
332 
333## Maps
334 
335For simple maps with little flyovers, consider using static map images.
336For complex maps with animated routes or flyovers, load the maps rule: [rules/maplibre.md](rules/maplibre.md)
337 
338## Voiceover
339 
340See [rules/voiceover.md](rules/voiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.
341