1---
2name: remotion
3description: 'Best practices for Remotion - Video creation in React. Use when creating programmatic videos with Remotion, adding animations or transitions, working with audio/captions, rendering compositions, embedding 3D content, building charts, or using Mapbox maps in video.'
4license: MIT
5metadata:
6 author: oakoss
7 version: '1.0'
8 source: 'https://www.remotion.dev/docs'
9user-invocable: false
10---
11
12# Remotion
13
14## Overview
15
16Remotion enables programmatic video creation using React components. Compositions define renderable videos with explicit width, height, fps, and duration. All animations must be driven by `useCurrentFrame()` -- CSS animations and Tailwind animation classes are forbidden as they cause rendering artifacts. Use this skill for Remotion compositions, animations, audio, captions, transitions, media handling, or rendering. Not intended for general React UI development.
17
18## Quick Reference
19
20| Pattern | API / Approach | Key Points |
21| ----------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
22| Basic animation | `useCurrentFrame()` + `interpolate()` | Always clamp with `extrapolateRight: 'clamp'` |
23| Spring animation | `spring({ frame, fps })` | `{ damping: 200 }` for smooth, no-bounce motion |
24| Composition | `<Composition id, component, durationInFrames, fps, width, height>` | Always set explicit dimensions |
25| Dynamic metadata | `calculateMetadata` on `<Composition>` | Set duration, dimensions, props before render |
26| Sequencing | `<Sequence from, durationInFrames>` | `useCurrentFrame()` returns local frame (starts at 0) |
27| Series | `<Series>` with `<Series.Sequence>` | Sequential playback; negative offset for overlaps |
28| Transitions | `<TransitionSeries>` with `fade()`, `slide()`, `wipe()` | Total duration = sum of scenes minus transition durations |
29| Audio/Video | `<Audio>` / `<Video>` from `@remotion/media` | Use `staticFile()` for local assets |
30| Captions | `createTikTokStyleCaptions()` | Token-level word highlighting via `page.tokens` |
31| Images | `<Img>` from `remotion` | Never use native `<img>` or Next.js `<Image>` |
32| GIFs | `<AnimatedImage>` from `remotion` | Synced with timeline; `playbackRate` for speed control |
33| Fonts | `@remotion/google-fonts` or `@remotion/fonts` | Call `loadFont()` at top level; blocks rendering until ready |
34| 3D content | `<ThreeCanvas>` from `@remotion/three` | Must set `width`/`height`; `useFrame()` from R3F is forbidden |
35| Text measurement | `measureText()`, `fitText()` from `@remotion/layout-utils` | Load fonts first; match properties for measurement and render |
36| Parameters | Zod schema on `<Composition schema>` | Top-level must be `z.object()`; exact Zod version required (check Remotion docs) |
37| Transparent video | `--pixel-format=yuva420p --codec=vp9` | WebM for browser; ProRes 4444 for editing software |
38| Maps | Mapbox with `useCurrentFrame()` | Set `interactive: false`, `fadeDuration: 0`; render with `--gl=angle --concurrency=1` |
39
40## Common Mistakes
41
42| Mistake | Correct Pattern |
43| --------------------------------------------------------------- | -------------------------------------------------------------------------- |
44| Using CSS animations or `setTimeout` | Use `interpolate()` and `useCurrentFrame()` for timeline-synced animations |
45| Using native `<img>`, `<video>`, `<audio>` tags | Use `<Img>`, `<Video>`, `<Audio>` from Remotion for proper preloading |
46| Hardcoding video duration | Use `calculateMetadata` to dynamically set duration from content |
47| Not specifying width/height on compositions | Always define explicit dimensions to avoid rendering issues |
48| Using `useFrame()` from React Three Fiber | Use `useCurrentFrame()` from Remotion inside `<ThreeCanvas>` |
49| Forgetting `premountFor` on sequences | Always premount sequences to preload components before playback |
50| Not clamping `interpolate()` output | Set `extrapolateRight: 'clamp'` to prevent values exceeding target range |
51| Placing `<Sequence>` in `<ThreeCanvas>` without `layout="none"` | Set `layout="none"` on any `<Sequence>` inside `<ThreeCanvas>` |
52
53## Delegation
54
55- **Discover available Remotion components and their props**: Use `Explore` agent to search the codebase for composition definitions and asset usage
56- **Build a multi-scene video with transitions and audio**: Use `Task` agent to compose sequences, transitions, and audio tracks step by step
57- **Plan a video generation pipeline with dynamic data**: Use `Plan` agent to design the architecture for parametrized compositions and rendering workflow
58
59## References
60
61- [Animations and Timing](references/animations-and-timing.md) -- Interpolation, springs, easing, and frame-driven animation patterns
62- [Compositions and Sequencing](references/compositions-and-sequencing.md) -- Defining compositions, stills, folders, sequences, series, and trimming
63- [Media and Assets](references/media-and-assets.md) -- Audio, video, images, GIFs, fonts, and static file handling
64- [Captions and Text](references/captions-and-text.md) -- Transcription, SRT import, TikTok-style captions, and text animations
65- [Transitions](references/transitions.md) -- Scene transitions with fade, slide, wipe, flip, and duration calculation
66- [Advanced Features](references/advanced-features.md) -- 3D content, charts, maps, parameters, transparent video, and DOM measurement
oakoss