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