remotion-best-practices
npx machina-cli add skill guanyang/antigravity-skills/remotion --openclawWhen to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
Captions
When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.
Using FFmpeg
For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.
Audio visualization
When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.
Sound effects
When needing to use sound effects, load the ./rules/sound-effects.md file for more information.
How to use
Read individual rule files for detailed explanations and code examples:
- rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
- rules/animations.md - Fundamental animation skills for Remotion
- rules/assets.md - Importing images, videos, audio, and fonts into Remotion
- rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
- rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
- rules/charts.md - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
- rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
- rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
- rules/fonts.md - Loading Google Fonts and local fonts in Remotion
- rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
- rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
- rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
- rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
- rules/images.md - Embedding images in Remotion using the Img component
- rules/light-leaks.md - Light leak overlay effects using @remotion/light-leaks
- rules/lottie.md - Embedding Lottie animations in Remotion
- rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
- rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
- rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
- rules/tailwind.md - Using TailwindCSS in Remotion
- rules/text-animations.md - Typography and text animation patterns for Remotion
- rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
- rules/transitions.md - Scene transition patterns for Remotion
- rules/transparent-videos.md - Rendering out a video with transparency
- rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
- rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
- rules/parameters.md - Make a video parametrizable by adding a Zod schema
- rules/maps.md - Add a map using Mapbox and animate it
- rules/voiceover.md - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS
Source
git clone https://github.com/guanyang/antigravity-skills/blob/main/skills/remotion/SKILL.mdView on GitHub Overview
Guidance for organizing Remotion projects in React, with a focus on best practices and domain-specific rules. It points you to individual rule docs—captions, FFmpeg, audio visualization, and sound effects—to implement features consistently across projects.
How This Skill Works
The skill serves as a structured map to the Remotion rule set. You read detailed rule documents under rules/ (such as 3d, animations, assets, audio, calculate-metadata, and others) to implement features, then apply the corresponding patterns for captions, FFmpeg operations, audio visualization, and sound effects in your compositions.
When to Use It
- You are working on a Remotion project and need domain-specific guidance.
- You need to implement captions or subtitles following the subtitles rules.
- You perform video operations like trimming or silence detection with FFmpeg.
- You want to visualize audio with spectrum bars, waveforms, or bass-reactive effects.
- You need to incorporate sound effects and synchronize them with the timeline.
Quick Start
- Step 1: Open the rules/ directory and review key files (subtitles.md, ffmpeg.md, audio-visualization.md, sound-effects.md, calculate-metadata.md).
- Step 2: Pick a feature to implement (e.g., captions or audio visualization) and follow the corresponding rule.md for code patterns.
- Step 3: Render a test composition, verify timing, audio, and metadata, and iterate based on results.
Best Practices
- Start by reading the individual rule files (e.g., 3d.md, animations.md, assets.md, audio.md) before implementing features.
- Use the dedicated rules for captions (subtitles.md), FFmpeg, audio visualization, and sound effects to keep patterns consistent.
- Leverage calculate-metadata.md to dynamically set composition duration, dimensions, and props.
- Modularize assets and timelines so that each rule governs a clear concern (assets, audio, visuals).
- Test renders end-to-end with representative media to validate timing, audio, and metadata.
Example Use Cases
- Add captions to a video using the subtitles rules and verify timing with the Remotion timeline.
- Trim a clip or detect silence using FFmpeg rules to manage exact segment boundaries.
- Visualize audio with spectrum bars or waveforms via the audio-visualization rules.
- Incorporate and synchronize sound effects using the sound-effects rules for realism.
- Create a dynamic composition by calculating metadata and applying appropriate props and dimensions.
