remotion

name	remotion
description	Remotion video — programmatic video in React: compositions, sequences, animations, audio, rendering, FFmpeg.
allowed-tools	Read, Write, Edit, Bash, Glob, Grep

Remotion — Programmatic Video in React

Domain expertise for building videos with Remotion. Covers the full surface area: compositions, animations, timing, sequencing, audio, captions, 3D, charts, transitions, and rendering.

When to Use

Use this skill whenever dealing with Remotion code to obtain domain-specific knowledge.

Reference Files

Read individual reference files for detailed explanations and code examples. All references are in references/ relative to this skill.

Core Concepts

• references/compositions.md — Defining compositions, stills, folders, default props
• references/animations.md — Fundamental animation patterns
• references/timing.md — Interpolation curves: linear, easing, spring
• references/sequencing.md — Delay, trim, limit duration of items
• references/trimming.md — Cut the beginning or end of animations
• references/transitions.md — Scene transition patterns
• references/parameters.md — Make videos parametrizable with Zod schema
• references/calculate-metadata.md — Dynamic duration, dimensions, props

Media

• references/assets.md — Importing images, videos, audio, fonts
• references/images.md — Embedding images with Img component
• references/videos.md — Video embedding: trimming, volume, speed, looping
• references/audio.md — Audio: importing, trimming, volume, speed, pitch
• references/gifs.md — GIFs synchronized with timeline
• references/fonts.md — Google Fonts and local fonts
• references/light-leaks.md — Light leak overlay effects
• references/transparent-videos.md — Rendering with transparency

Text & Typography

• references/text-animations.md — Typography and text animation patterns
• references/measuring-text.md — Measuring text, fitting to containers, overflow
• references/measuring-dom-nodes.md — Measuring DOM element dimensions

Captions & Audio

• references/subtitles.md — Caption display and styling
• references/display-captions.md — Displaying captions
• references/import-srt-captions.md — Importing SRT caption files
• references/transcribe-captions.md — Transcribing audio to captions
• references/voiceover.md — AI-generated voiceover with ElevenLabs TTS
• references/audio-visualization.md — Spectrum bars, waveforms, bass-reactive
• references/sfx.md — Sound effects

Advanced

• references/3d.md — 3D content with Three.js and React Three Fiber
• references/charts.md — Chart and data visualization (bar, pie, line, stock)
• references/lottie.md — Lottie animations
• references/maps.md — Maps with Mapbox
• references/tailwind.md — TailwindCSS in Remotion

Tools & Utilities

• references/ffmpeg.md — FFmpeg for trimming, silence detection
• references/can-decode.md — Check video decode capability with Mediabunny
• references/extract-frames.md — Extract frames at specific timestamps
• references/get-audio-duration.md — Get audio duration with Mediabunny
• references/get-video-dimensions.md — Get video dimensions
• references/get-video-duration.md — Get video duration