remotion-best-practices

name	remotion-best-practices
description	Remotion 最佳实践，用于在 React 中进行视频创作。处理 Remotion 代码、视频合成、动画、字幕、音频、转场或参数化视频任务时应使用本技能。
metadata	{"tags":"remotion, video, react, animation, composition"}

何时使用

凡是涉及 Remotion 代码或 Remotion 视频工作流的任务，都应优先使用本技能，以获取领域相关的实现模式和约束。

字幕

当任务涉及字幕或 caption 时，继续读取：

• ./rules/subtitles.md

使用 FFmpeg

当任务需要裁剪视频、分析音频、检测静音或执行媒体预处理时，继续读取：

• ./rules/ffmpeg.md

音频可视化

当任务需要做频谱条、波形、低频响应等音频可视化效果时，继续读取：

• ./rules/audio-visualization.md

音效

当任务需要加入音效时，继续读取：

• ./rules/sfx.md

使用方式

根据实际任务读取对应规则文件。以下是主要规则索引：

• rules/3d.md - 在 Remotion 中使用 Three.js 和 React Three Fiber
• rules/animations.md - Remotion 基础动画模式
• rules/assets.md - 导入图片、视频、音频和字体
• rules/audio.md - 音频导入、裁剪、音量、变速、变调
• rules/calculate-metadata.md - 动态设置时长、尺寸和 props
• rules/can-decode.md - 检查视频能否被浏览器解码
• rules/charts.md - 图表与数据可视化
• rules/compositions.md - composition、still、folder、default props、动态元数据
• rules/extract-frames.md - 按时间点抽取视频帧
• rules/fonts.md - 加载 Google Fonts 和本地字体
• rules/get-audio-duration.md - 获取音频时长
• rules/get-video-dimensions.md - 获取视频宽高
• rules/get-video-duration.md - 获取视频时长
• rules/gifs.md - 展示 GIF、APNG、AVIF、WebP
• rules/images.md - 使用 Img 组件嵌入图片
• rules/light-leaks.md - 光漏叠加效果
• rules/lottie.md - 使用 Lottie 动画
• rules/maps.md - 地图动画
• rules/measuring-dom-nodes.md - 测量 DOM 节点尺寸
• rules/measuring-text.md - 测量文本尺寸与溢出
• rules/sequencing.md - 序列编排、延迟、裁剪与时长控制
• rules/tailwind.md - 在 Remotion 中使用 TailwindCSS
• rules/text-animations.md - 字体与文字动画
• rules/timing.md - 插值、缓动、弹簧动画
• rules/transitions.md - 场景转场
• rules/transparent-videos.md - 透明视频渲染
• rules/trimming.md - 裁掉动画头尾
• rules/videos.md - 视频嵌入、裁剪、音量、倍速、循环、变调
• rules/parameters.md - 使用 Zod schema 做参数化视频
• rules/voiceover.md - 使用 TTS 生成 AI 配音