--- id: remotion-best-practices name: "remotion-best-practices" url: https://skills.yangsir.net/skill/remotion-best-practices author: remotion-dev domain: ai-dev-tools-workflow tags: ["remotion", "video-processing", "node-js", "typescript", "motion-graphics"] install_count: 324500 rating: 4.90 (2000 reviews) github: https://github.com/remotion-dev/skills --- # remotion-best-practices > 提供Remotion代码领域的专业知识和最佳实践，尤其在处理字幕或副标题时，帮助用户高效开发视频内容。 **Stats**: 324,500 installs · 4.9/5 (2000 reviews) ## Before / After 对比 ### Remotion视频开发效率对比 ## Readme # remotion-best-practices ## When 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](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/./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](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/./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](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/./rules/audio-visualization.md) file for more information. ## Sound effects When needing to use sound effects, load the [./rules/sound-effects.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/./rules/sound-effects.md) file for more information. ## How to use Read individual rule files for detailed explanations and code examples: - [rules/3d.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber - [rules/animations.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/animations.md) - Fundamental animation skills for Remotion - [rules/assets.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/assets.md) - Importing images, videos, audio, and fonts into Remotion - [rules/audio.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch - [rules/calculate-metadata.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props - [rules/can-decode.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny - [rules/charts.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts) - [rules/compositions.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata - [rules/extract-frames.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny - [rules/fonts.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/fonts.md) - Loading Google Fonts and local fonts in Remotion - [rules/get-audio-duration.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny - [rules/get-video-dimensions.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny - [rules/get-video-duration.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny - [rules/gifs.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline - [rules/images.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/images.md) - Embedding images in Remotion using the Img component - [rules/light-leaks.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks - [rules/lottie.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/lottie.md) - Embedding Lottie animations in Remotion - [rules/measuring-dom-nodes.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion - [rules/measuring-text.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow - [rules/sequencing.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items - [rules/tailwind.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/tailwind.md) - Using TailwindCSS in Remotion - [rules/text-animations.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/text-animations.md) - Typography and text animation patterns for Remotion - [rules/timing.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations - [rules/transitions.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/transitions.md) - Scene transition patterns for Remotion - [rules/transparent-videos.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/transparent-videos.md) - Rendering out a video with transparency - [rules/trimming.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations - [rules/videos.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch - [rules/parameters.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/parameters.md) - Make a video parametrizable by adding a Zod schema - [rules/maps.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/maps.md) - Add a map using Mapbox and animate it - [rules/voiceover.md](https://github.com/remotion-dev/skills/blob/HEAD/skills/remotion/rules/voiceover.md) - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS Weekly Installs154.5KRepository[remotion-dev/skills](https://github.com/remotion-dev/skills)GitHub Stars2.2KFirst SeenJan 19, 2026Security Audits[Gen Agent Trust HubPass](/remotion-dev/skills/remotion-best-practices/security/agent-trust-hub)[SocketPass](/remotion-dev/skills/remotion-best-practices/security/socket)[SnykWarn](/remotion-dev/skills/remotion-best-practices/security/snyk)Installed ongemini-cli111.5Kclaude-code111.1Kcursor96.9Kopencode96.6Kcodex95.4Kantigravity76.4K --- *Source: https://skills.yangsir.net/skill/remotion-best-practices* *Markdown mirror: https://skills.yangsir.net/api/skill/remotion-best-practices/markdown*