remotion-best-practices-zh by liandyao/remotion

何时使用

当你处理 Remotion 代码并需要领域特定知识时，请使用本技能（中文版）。

如何使用

阅读 rules 目录下的各个规则文件以查看详细说明和代码示例：

rules/3d.md - 在 Remotion 中使用 Three.js 和 React Three Fiber 的 3D 内容
rules/animations.md - Remotion 的动画基础
rules/assets.md - 在 Remotion 中导入图片、视频、音频和字体
rules/audio.md - 音频使用与处理：导入、裁剪、音量、速度、音高
rules/calculate-metadata.md - 在渲染前动态设置 composition 的时长、尺寸和 props
rules/can-decode.md - 使用 Mediabunny 检查视频是否可被浏览器解码
rules/charts.md - 图表与数据可视化模式
rules/compositions.md - 定义 Composition、静帧、文件夹、默认 props 和动态元数据
rules/display-captions.md - 在 Remotion 中显示字幕（例如 TikTok 风格）并高亮单词
rules/extract-frames.md - 使用 Mediabunny 在指定时间点提取视频帧
rules/fonts.md - 在 Remotion 中加载 Google 字体或本地图标
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 - 在 Remotion 中嵌入图片（使用 Img 组件）
rules/import-srt-captions.md - 使用 @remotion/captions 导入 .srt 字幕
rules/lottie.md - 在 Remotion 中使用 Lottie 动画
rules/measuring-dom-nodes.md - 测量 DOM 元素尺寸
rules/measuring-text.md - 测量文本尺寸、适配文本与检查溢出
rules/sequencing.md - 时间序列（Sequencing）模式：延迟、裁剪、限制时长
rules/tailwind.md - 在 Remotion 中使用 TailwindCSS
rules/text-animations.md - 文本动画模式
rules/timing.md - 时间插值曲线：线性、缓动、弹簧
rules/transcribe-captions.md - 将音频转录为字幕
rules/transitions.md - 场景过渡模式
rules/trimming.md - 剪辑/裁剪模式
rules/videos.md - 嵌入视频的注意事项：裁剪、音量、速度、循环、音高
rules/parameters.md - 使用 Zod schema 使视频可参数化
rules/maps.md - 使用 Mapbox 添加并动画化地图

（以上为中文索引，代码示例保留原文以便直接复制）

默认视频尺寸（竖屏 9:16）

本技能集合默认针对竖屏视频（纵向 9:16）。推荐的默认分辨率为 1080 x 1920（宽 x 高）。

建议做法：

在 src/Root.tsx 或你项目的根 Remotion 配置中，统一将 Composition 的 width 设置为 1080，height 设置为 1920，以保证所有示例与组件默认使用竖屏尺寸。
将本规则文件的说明也放入 rules/portrait.md（已在本包中提供），便于团队成员查阅。

示例（在 src/Root.tsx 中）:

import {Composition} from 'remotion';
import {MyComposition} from './MyComposition';

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={300}
      fps={30}
      width={1080}
      height={1920}
    />
  );
};