remotion-best-practices

适用场景

处理 Remotion 代码时，请使用此技能获取特定领域的知识。

使用方法

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

• rules/3d.md - 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 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/display-captions.md - 在 Remotion 中显示字幕，包括 TikTok 风格的页面和词语高亮
• rules/extract-frames.md - 使用 Mediabunny 从视频的指定时间戳提取帧
• rules/fonts.md - 加载 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/import-srt-captions.md - 使用 @remotion/captions 将 .srt 字幕文件导入 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/transcribe-captions.md - 转录音频，在 Remotion 中生成字幕
• rules/transitions.md - 场景过渡模式
• rules/trimming.md - Remotion 的修剪模式：剪掉动画的开头或结尾
• rules/videos.md - 在 Remotion 中嵌入视频：修剪、音量、速度、循环和音高

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 请勿将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。

运行时与数据边界

使用已安装的项目工具和锁文件中的版本；如果缺少 CLI，使用包运行器的命令可能会下载代码。只安装已商定任务所需的依赖，并确保所有 Remotion 包使用相同版本。远程媒体、字体和转录请求会向相应提供方披露数据；请使用已获授权的素材，并确认付费或云端转录的范围。除非导出，否则示例只是部分组件代码片段；钩子应放在 React 组件内，而不是模块作用域中。using 示例需要 TypeScript 显式资源管理支持。在目标运行时验证渲染帧和音频。