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文件以获取更多信息。

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
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/3d.md - 在Remotion中使用Three.js和React Three Fiber创建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添加地图并制作动画