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 - 使用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添加地图并制作动画