remotion-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use

适用场景

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

当你处理Remotion代码以获取领域相关知识时，即可使用本技能。

Captions

字幕处理

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

处理字幕或副标题时，可加载./rules/subtitles.md文件获取更多信息。

Using FFmpeg

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.

对于部分视频操作，如视频剪辑或静音检测，应使用FFmpeg。可加载./rules/ffmpeg.md文件获取更多信息。

Audio visualization

音频可视化

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.

当需要实现音频可视化（频谱条、波形图、低音响应效果）时，可加载./rules/audio-visualization.md文件获取更多信息。

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

阅读单个规则文件以获取详细说明和代码示例：

rules/3d.md - 使用Three.js和React Three Fiber在Remotion中创建3D内容
rules/animations.md - Remotion基础动画技能
rules/assets.md - 在Remotion中导入图片、视频、音频和字体
rules/audio.md - 在Remotion中使用音频和声音——导入、剪辑、音量、速度、音调
rules/calculate-metadata.md - 动态设置合成的时长、尺寸和属性
rules/can-decode.md - 使用Mediabunny检查浏览器是否可解码某视频
rules/charts.md - Remotion中的图表与数据可视化模式（柱状图、饼图、折线图、股票图）
rules/compositions.md - 定义合成内容、静帧、文件夹、默认属性和动态元数据
rules/extract-frames.md - 使用Mediabunny在特定时间戳从视频中提取帧
rules/fonts.md - 在Remotion中加载Google Fonts和本地字体
rules/get-audio-duration.md - 使用Mediabunny获取音频文件的时长（秒）
rules/get-video-dimensions.md - 使用Mediabunny获取视频文件的宽高
rules/get-video-duration.md - 使用Mediabunny获取视频文件的时长（秒）
rules/gifs.md - 同步Remotion时间轴显示GIF
rules/images.md - 使用Img组件在Remotion中嵌入图片
rules/light-leaks.md - 使用@remotion/light-leaks实现漏光叠加效果
rules/lottie.md - 在Remotion中嵌入Lottie动画
rules/measuring-dom-nodes.md - 在Remotion中测量DOM元素尺寸
rules/measuring-text.md - 测量文本尺寸、适配文本到容器、检查溢出
rules/sequencing.md - Remotion中的序列编排模式——延迟、剪辑、限制元素时长
rules/tailwind.md - 在Remotion中使用TailwindCSS
rules/text-animations.md - Remotion中的排版与文本动画模式
rules/timing.md - Remotion中的插值曲线——线性、缓动、弹簧动画
rules/transitions.md - Remotion中的场景过渡模式
rules/transparent-videos.md - 渲染带透明度的视频
rules/trimming.md - Remotion中的剪辑模式——裁剪动画的开头或结尾
rules/videos.md - 在Remotion中嵌入视频——剪辑、音量、速度、循环、音调
rules/parameters.md - 通过添加Zod schema使视频可参数化
rules/maps.md - 使用Mapbox添加地图并制作动画
rules/voiceover.md - 使用ElevenLabs TTS为Remotion合成内容添加AI生成的旁白