remotion

Original：🇺🇸 English

Translated

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.

11installs

Sourceoakoss/agent-skills

Added on2026-05-29

NPX Install

npx skill4agent add oakoss/agent-skills remotion

SKILL.md Content

View Translation Comparison →

Remotion

Overview

Remotion 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.

Quick Reference

Pattern	API / Approach	Key Points
Basic animation	`useCurrentFrame()` + `interpolate()`	Always clamp with `extrapolateRight: 'clamp'`
Spring animation	`spring({ frame, fps })`	`{ damping: 200 }` for smooth, no-bounce motion
Composition	`<Composition id, component, durationInFrames, fps, width, height>`	Always set explicit dimensions
Dynamic metadata	`calculateMetadata` on `<Composition>`	Set duration, dimensions, props before render
Sequencing	`<Sequence from, durationInFrames>`	`useCurrentFrame()` returns local frame (starts at 0)
Series	`<Series>` with `<Series.Sequence>`	Sequential playback; negative offset for overlaps
Transitions	`<TransitionSeries>` with `fade()` , `slide()` , `wipe()`	Total duration = sum of scenes minus transition durations
Audio/Video	`<Audio>` / `<Video>` from `@remotion/media`	Use `staticFile()` for local assets
Captions	`createTikTokStyleCaptions()`	Token-level word highlighting via `page.tokens`
Images	`<Img>` from `remotion`	Never use native `<img>` or Next.js `<Image>`
GIFs	`<AnimatedImage>` from `remotion`	Synced with timeline; `playbackRate` for speed control
Fonts	`@remotion/google-fonts` or `@remotion/fonts`	Call `loadFont()` at top level; blocks rendering until ready
3D content	`<ThreeCanvas>` from `@remotion/three`	Must set `width` / `height` ; `useFrame()` from R3F is forbidden
Text measurement	`measureText()` , `fitText()` from `@remotion/layout-utils`	Load fonts first; match properties for measurement and render
Parameters	Zod schema on `<Composition schema>`	Top-level must be `z.object()` ; exact Zod version required (check Remotion docs)
Transparent video	`--pixel-format=yuva420p --codec=vp9`	WebM for browser; ProRes 4444 for editing software
Maps	Mapbox with `useCurrentFrame()`	Set `interactive: false` , `fadeDuration: 0` ; render with `--gl=angle --concurrency=1`

Common Mistakes

Mistake	Correct Pattern
Using CSS animations or `setTimeout`	Use `interpolate()` and `useCurrentFrame()` for timeline-synced animations
Using native `<img>` , `<video>` , `<audio>` tags	Use `<Img>` , `<Video>` , `<Audio>` from Remotion for proper preloading
Hardcoding video duration	Use `calculateMetadata` to dynamically set duration from content
Not specifying width/height on compositions	Always define explicit dimensions to avoid rendering issues
Using `useFrame()` from React Three Fiber	Use `useCurrentFrame()` from Remotion inside `<ThreeCanvas>`
Forgetting `premountFor` on sequences	Always premount sequences to preload components before playback
Not clamping `interpolate()` output	Set `extrapolateRight: 'clamp'` to prevent values exceeding target range
Placing `<Sequence>` in `<ThreeCanvas>` without `layout="none"`	Set `layout="none"` on any `<Sequence>` inside `<ThreeCanvas>`

Delegation

Discover available Remotion components and their props: Use
```
Explore
```
agent to search the codebase for composition definitions and asset usage
Build a multi-scene video with transitions and audio: Use
```
Task
```
agent to compose sequences, transitions, and audio tracks step by step
Plan a video generation pipeline with dynamic data: Use
```
Plan
```
agent to design the architecture for parametrized compositions and rendering workflow

References

Animations and Timing -- Interpolation, springs, easing, and frame-driven animation patterns
Compositions and Sequencing -- Defining compositions, stills, folders, sequences, series, and trimming
Media and Assets -- Audio, video, images, GIFs, fonts, and static file handling
Captions and Text -- Transcription, SRT import, TikTok-style captions, and text animations
Transitions -- Scene transitions with fade, slide, wipe, flip, and duration calculation
Advanced Features -- 3D content, charts, maps, parameters, transparent video, and DOM measurement