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