remotion-best-practices

适用场景

每当处理 Remotion 代码时，都使用此技能来获取领域专属知识。

新建项目

在没有现有 Remotion 项目的空文件夹或工作区中，使用以下命令搭建项目：

npx create-video@latest --yes --blank --no-tailwind my-video

将 my-video 替换为合适的项目名称。

启动预览

启动 Remotion Studio 以预览视频：

npx remotion studio

可选：单帧渲染检查

你可以使用 CLI 渲染单帧，以快速检查布局、颜色或时序。
对于简单的编辑、纯重构，或当你已经通过 Studio 或之前的渲染结果充分确认时，可以跳过此步骤。

npx remotion still [composition-id] --scale=0.25 --frame=30

在 30 fps 下，--frame=30 对应一秒处（--frame 从 0 开始计数）。

字幕

处理字幕时，请加载 ./rules/subtitles.md 文件以了解更多信息。

使用 FFmpeg

对于某些视频操作，例如剪辑视频或检测静音，应使用 FFmpeg。加载 ./rules/ffmpeg.md 文件以了解更多信息。

静音检测

需要检测并剪除视频或音频文件中的静音片段时，请加载 ./rules/silence-detection.md 文件。

音频可视化

需要将音频可视化（频谱条、波形、低音响应效果）时，请加载 ./rules/audio-visualization.md 文件以了解更多信息。

音效

需要使用音效时，请加载 ./rules/sfx.md 文件以了解更多信息。

使用方法

阅读各规则文件，了解详细说明和代码示例：

• 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 - 动态设置合成时长、尺寸和 props
• rules/can-decode.md - 使用 Mediabunny 检查浏览器是否能解码视频
• rules/charts.md - Remotion 的图表和数据可视化模式（柱状图、饼图、折线图、股票图表）
• rules/compositions.md - 定义合成、静帧、文件夹、默认 props 和动态元数据
• 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 - 使用 interpolate 和 Bézier 缓动、弹簧进行计时
• 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 添加地图并为其制作动画
• rules/silence-detection.md - 使用 FFmpeg loudnorm 和 silencedetect 自适应检测静音
• rules/voiceover.md - 使用 ElevenLabs TTS 为 Remotion 合成添加 AI 生成的旁白