remotion-best-practices

用途\n本技能适用于处理 Remotion 代码的场景，目标是提供 Remotion（在 React 中创建视频）的领域专属知识与最佳实践。当你在编写或修改 Remotion 相关代码时，可借助该技能获取对应的规则说明与代码示例。\n\n主要能力\n该技能以一组独立的规则文件组织内容，覆盖 Remotion 使用中的多个方面。各规则文件及主题如下：\n\nrules/3d.md：在 Remotion 中使用 Three.js 与 React Three Fiber 制作 3D 内容。\nrules/animations.md：Remotion 的基础动画技能。\nrules/assets.md：向 Remotion 导入图片、视频、音频与字体。\nrules/audio.md：在 Remotion 中使用音频，包括导入、裁剪、音量、速度、音高。\nrules/calculate-metadata.md：动态设置合成的时长、尺寸与 props。\nrules/can-decode.md：使用 Mediabunny 检查浏览器能否解码某个视频。\nrules/charts.md：Remotion 中的图表与数据可视化模式。\nrules/compositions.md：定义合成、静帧、文件夹、默认 props 与动态元数据。\nrules/display-captions.md：在 Remotion 中显示字幕，含 TikTok 风格页面与逐词高亮。\nrules/extract-frames.md：使用 Mediabunny 在指定时间戳从视频中提取帧。\nrules/fonts.md：在 Remotion 中加载 Google Fonts 与本地字体。\nrules/get-audio-duration.md：使用 Mediabunny 获取音频文件的秒数时长。\nrules/get-video-dimensions.md：使用 Mediabunny 获取视频文件的宽高。\nrules/get-video-duration.md：使用 Mediabunny 获取视频文件的秒数时长。\nrules/gifs.md：显示与 Remotion 时间轴同步的 GIF。\nrules/images.md：使用 Img 组件在 Remotion 中嵌入图片。\nrules/import-srt-captions.md：使用 @remotion/captions 将 .srt 字幕文件导入 Remotion。\nrules/lottie.md：在 Remotion 中嵌入 Lottie 动画。\nrules/measuring-dom-nodes.md：在 Remotion 中测量 DOM 元素的尺寸。\nrules/measuring-text.md：测量文本尺寸、让文本适配容器并检查溢出。\nrules/sequencing.md：Remotion 的排序模式，包括延迟、裁剪、限制元素时长。\nrules/tailwind.md：在 Remotion 中使用 TailwindCSS。\nrules/text-animations.md：Remotion 的排版与文本动画模式。\nrules/timing.md：Remotion 中的插值曲线，包括线性、缓动、弹簧动画。\nrules/transcribe-captions.md：转写音频以在 Remotion 中生成字幕。\nrules/transitions.md：场景转场模式。\nrules/trimming.md：裁剪模式，裁掉动画的开头或结尾。\nrules/videos.md：在 Remotion 中嵌入视频，包括裁剪、音量、速度、循环、音高。\n\n使用方式\n根据当前需要处理的具体问题，读取对应的规则文件即可获得详细说明与代码示例。资料未提供额外的安装命令或统一入口说明。\n\n适用场景\n适用于任何需要编写或调整 Remotion 代码的场合，例如制作动画、导入与处理音视频素材、动态计算合成元数据、添加字幕与转场、嵌入 3D 内容与图表等。\n\n限制\n本技能面向 Remotion 代码场景。部分规则依赖特定库（如 Mediabunny、Three.js、React Three Fiber、@remotion/captions、TailwindCSS、Lottie）。资料未提供版本要求、收费信息、平台限制或具体使用步骤之外的细节，这些内容暂未提供。