# Remotion Best Practices

> Remotion 视频创建最佳实践。当处理 Remotion 代码、创建视频动画、使用 React 制作视频、处理视频合成、动画、音频、字幕、图表、3D 内容，或提到「remotion」「视频制作」「react 视频」「动画视频」时使用。提供 Remotion 领域专业知识。

- Skill: `majiayu000/remotion-best-practices-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/remotion-best-practices-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/remotion-best-practices-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/remotion-best-practices-2

---


# Remotion 最佳实践

本技能提供 Remotion 视频创建的专业知识和最佳实践。

## 何时使用

在处理 Remotion 代码时使用本技能，以获取领域专业知识。

## 如何使用

阅读各个规则文件以获取详细说明和代码示例。根据任务需要，按需加载相应的规则文件：

### 核心概念

- **Compositions（合成）**：定义视频合成、静态帧、文件夹、默认属性和动态元数据
- **Animations（动画）**：Remotion 的基础动画技能
- **Timing（时间）**：插值曲线 - 线性、缓动、弹簧动画
- **Sequencing（序列）**：Remotion 的序列模式 - 延迟、修剪、限制项目时长

### 媒体资源

- **Assets（资源）**：在 Remotion 中导入图像、视频、音频和字体
- **Images（图像）**：使用 Img 组件在 Remotion 中嵌入图像
- **Videos（视频）**：在 Remotion 中嵌入视频 - 修剪、音量、速度、循环、音调
- **Audio（音频）**：在 Remotion 中使用音频和声音 - 导入、修剪、音量、速度、音调
- **GIFs**：在 Remotion 的时间轴上同步显示 GIF

### 文本与字幕

- **Text Animations（文本动画）**：Remotion 的排版和文本动画模式
- **Measuring Text（测量文本）**：测量文本尺寸、将文本适配到容器、检查溢出
- **Display Captions（显示字幕）**：在 Remotion 中显示字幕，支持 TikTok 风格页面和单词高亮
- **Import SRT Captions（导入 SRT 字幕）**：使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
- **Transcribe Captions（转录字幕）**：将音频转录以在 Remotion 中生成字幕

### 高级功能

- **3D Content（3D 内容）**：使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
- **Charts（图表）**：Remotion 的图表和数据可视化模式
- **Lottie**：在 Remotion 中嵌入 Lottie 动画
- **Maps（地图）**：使用 Mapbox 添加地图并为其添加动画
- **Transitions（过渡）**：Remotion 的场景过渡模式
- **Trimming（修剪）**：Remotion 的修剪模式 - 剪切动画的开头或结尾

### 工具与实用功能

- **Fonts（字体）**：在 Remotion 中加载 Google Fonts 和本地字体
- **Tailwind**：在 Remotion 中使用 TailwindCSS
- **Measuring DOM Nodes（测量 DOM 节点）**：在 Remotion 中测量 DOM 元素尺寸
- **Calculate Metadata（计算元数据）**：动态设置合成时长、尺寸和属性
- **Parameters（参数）**：通过添加 Zod schema 使视频可参数化

### Mediabunny 集成

- **Can Decode（可解码）**：使用 Mediabunny 检查浏览器是否可以解码视频
- **Extract Frames（提取帧）**：使用 Mediabunny 在特定时间戳从视频中提取帧
- **Get Audio Duration（获取音频时长）**：使用 Mediabunny 获取音频文件的时长（秒）
- **Get Video Dimensions（获取视频尺寸）**：使用 Mediabunny 获取视频文件的宽度和高度
- **Get Video Duration（获取视频时长）**：使用 Mediabunny 获取视频文件的时长（秒）

## 规则文件索引

详细规则和代码示例请参考 `references/` 目录下的文件：

### 核心规则
- `references/compositions.md` - 定义合成、静态帧、文件夹、默认属性和动态元数据
- `references/animations.md` - Remotion 的基础动画技能
- `references/timing.md` - 插值曲线：线性、缓动、弹簧动画
- `references/sequencing.md` - 序列模式：延迟、修剪、限制时长

### 媒体资源规则
- `references/assets.md` - 导入图像、视频、音频和字体
- `references/images.md` - 使用 Img 组件嵌入图像
- `references/videos.md` - 嵌入视频：修剪、音量、速度、循环、音调
- `references/audio.md` - 使用音频和声音：导入、修剪、音量、速度、音调
- `references/gifs.md` - 同步显示 GIF

### 文本与字幕规则
- `references/text-animations.md` - 排版和文本动画模式
- `references/measuring-text.md` - 测量文本尺寸、适配文本、检查溢出
- `references/display-captions.md` - 显示字幕，支持 TikTok 风格和单词高亮
- `references/import-srt-captions.md` - 导入 .srt 字幕文件
- `references/transcribe-captions.md` - 音频转录生成字幕

### 高级功能规则
- `references/3d.md` - 使用 Three.js 和 React Three Fiber 创建 3D 内容
- `references/charts.md` - 图表和数据可视化模式
- `references/lottie.md` - 嵌入 Lottie 动画
- `references/maps.md` - 使用 Mapbox 添加和动画化地图
- `references/transitions.md` - 场景过渡模式
- `references/trimming.md` - 修剪模式：剪切动画开头或结尾

### 工具与实用功能规则
- `references/fonts.md` - 加载 Google Fonts 和本地字体
- `references/tailwind.md` - 使用 TailwindCSS
- `references/measuring-dom-nodes.md` - 测量 DOM 元素尺寸
- `references/calculate-metadata.md` - 动态设置合成元数据
- `references/parameters.md` - 使用 Zod schema 使视频可参数化

### Mediabunny 集成规则
- `references/can-decode.md` - 检查视频是否可解码
- `references/extract-frames.md` - 从视频中提取帧
- `references/get-audio-duration.md` - 获取音频时长
- `references/get-video-dimensions.md` - 获取视频尺寸
- `references/get-video-duration.md` - 获取视频时长

## 使用建议

1. **按需加载**：根据当前任务，只加载相关的规则文件到上下文
2. **查看示例**：每个规则文件都包含代码示例，可直接参考
3. **组合使用**：多个规则可以组合使用，例如：动画 + 过渡 + 字幕
4. **性能优化**：注意视频渲染性能，合理使用修剪和序列化

## 常见任务模式

### 创建基础视频
1. 定义 Composition（`references/compositions.md`）
2. 添加动画（`references/animations.md`）
3. 导入资源（`references/assets.md`）

### 添加字幕
1. 导入或转录字幕（`references/import-srt-captions.md` 或 `references/transcribe-captions.md`）
2. 显示字幕（`references/display-captions.md`）

### 处理视频
1. 获取视频信息（`references/get-video-duration.md`、`references/get-video-dimensions.md`）
2. 嵌入和修剪（`references/videos.md`）
3. 添加过渡（`references/transitions.md`）

### 创建 3D 内容
1. 设置 Three.js（`references/3d.md`）
2. 添加动画和过渡

---

**注意**：本技能使用渐进式披露原则。SKILL.md 提供概览和索引，详细规则和代码示例在 `references/` 目录中，按需加载。