Remotion Best Practices Skill Reference
Reference guide for Remotion (React-based video creation framework) domain-specific knowledge. Covers captions, FFmpeg integration, audio visualization, and composition patterns. Related to Code-as-Video Compiler research and Streaming Control Center pipeline.
When to Use
Apply this knowledge whenever working with Remotion code for video generation, animation, or multimedia composition.
Core Capabilities
Captions & Subtitles
Synchronized caption rendering, subtitle timing, and text overlay patterns for video compositions.
FFmpeg Integration
Video operations requiring FFmpeg: trimming, silence detection, format conversion, and transcoding workflows.
Audio Visualization
Spectrum bars, waveforms, bass-reactive effects, and audio-synchronized visual elements.
Composition Patterns
| Rule Category | Description |
|---|---|
| 3D Content | Three.js and React Three Fiber integration |
| Animations | Fundamental animation skills (interpolation, spring, easing) |
| Assets | Importing images, videos, audio, fonts |
| Audio | Sound import, trimming, volume, speed, pitch control |
| Calculate Metadata | Dynamic composition duration, dimensions, props |
| Charts | Bar, pie, line, stock chart data visualization |
| Compositions | Defining compositions, stills, folders, default props |
| Fonts | Google Fonts and local font loading |
| GIFs | Timeline-synchronized GIF display |
| Images | Img component embedding |
| Light Leaks | Overlay effects via @remotion/light-leaks |
| Lottie | Lottie animation embedding |
| DOM Measurement | Element dimension measurement |
| Text Measurement | Text fitting, overflow detection |
| Sequencing | Delay, trim, duration limiting |
| Tailwind | TailwindCSS integration |
| Text Animations | Typography and text animation patterns |
| Timing | Interpolation curves (linear, easing, spring) |
| Transitions | Scene transition patterns |
| Transparent Video | Rendering with transparency |
| Trimming | Cut beginning/end of animations |
| Videos | Embedding, trimming, volume, speed, looping, pitch |
| Parameters | Zod schema for video parametrization |
| Maps | Mapbox integration with animation |
Key Packages
remotion— Core framework@remotion/light-leaks— Light leak overlay effects@remotion/lottie— Lottie animation support- Mediabunny — Frame extraction, duration/dimension detection, decode checking