remotion

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/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/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 模式实现视频参数化
rules/maps.md - 使用 Mapbox 添加并动画化地图