用途
本技能用于在编写或处理 Remotion 代码时提供领域专属知识。Remotion 是用 React/TypeScript 以编程方式制作视频并渲染为 MP4 的工具，本技能汇总了其最佳实践与规则文件索引。
主要能力
- 新项目搭建：在空文件夹或没有现成 Remotion 项目的工作区中，使用
npx create-video@latest --yes --blank --no-tailwind my-video脚手架创建项目（将 my-video 替换为合适的项目名）。 - 视频设计：设计视觉场景、布局、宣传片、动态图形或文字较多的视频前，加载 rules/video-layout.md 获取视频优先的布局与文字尺寸指导。
- 动画：使用 useCurrentFrame() 与 interpolate() 动画属性；除非明确需要基于物理的运动，优先使用 interpolate() 而非 spring()；用 Easing.bezier() 自定义时序，包括跳跃或过冲运动。
- 可编辑性：为便于在 Remotion Studio 中编辑，将 interpolate() 调用内联写在 style 属性中，并使用单独的 CSS transform 属性（scale、translate、rotate），而不是拼接 transform 字符串。
- 交互组件：让元素或自定义组件在 Studio 中可交互，参见 https://www.remotion.dev/docs/studio/make-component-interactive；使用 Interactive.* 或自定义交互组件时设置描述性 name 属性（如 name="Hero title"），不要用 name=""。
- 素材：将素材放在项目根目录的 public/ 文件夹，用 staticFile() 引用；图片用 <Img> 组件，视频用 @remotion/media 的 <Video>，音频用 @remotion/media 的 <Audio>；也可引用远程 URL。
- 序列与时间：用 <Sequence> 的 from 延迟内容，用 durationInFrames 限制元素时长；<Sequence> 默认绝对填充，内联内容用 layout="none"。
- 合成定义：视频的 width、height、fps、duration 在 src/Root.tsx 中定义；为保持 Studio 可编辑，将组件与 <Composition> 注册放在同一文件；用 defaultProps 定义合成级值并保持为内联对象字面量；元数据可动态计算（calculateMetadata）。
- 预览与检查：用
npx remotion studio启动预览；可选单帧渲染检查npx remotion still [composition-id] --scale=0.25 --frame=30（30fps 时 --frame=30 为第 1 秒，--frame 从 0 开始）。
使用方式
本技能以规则文件形式组织，按需加载对应主题：
- 字幕：./rules/subtitles.md
- FFmpeg（裁剪视频、检测静音等）：./rules/ffmpeg.md
- 静音检测与裁剪：./rules/silence-detection.md
- 音频可视化（频谱条、波形、低频响应效果）：./rules/audio-visualization.md
- 音效：./rules/sfx.md
- 视觉与像素特效：优先 1) 常规 Remotion/HTML/CSS/SVG/filter/blend/mask 动画；2) rules/effects.md 中列出的效果（含通过 <HtmlInCanvas> 渲染的 HTML）；3) 用户要求可复用/项目专属效果时用 rules/effects.md 的 createEffect()；4) 无合适效果时才用 rules/html-in-canvas.md 的自定义 <HtmlInCanvas onPaint>。光漏叠加见 rules/light-leaks.md，文档 https://www.remotion.dev/docs/effects。
- 3D 内容（Three.js 与 React Three Fiber）：rules/3d.md
- 高级音频（裁剪、音量、速度、音高）：rules/audio.md
- 动态时长、尺寸与数据：rules/calculate-metadata.md
- 高级合成（静帧、文件夹、默认 props、嵌套合成）：rules/compositions.md
- Google Fonts：rules/google-fonts.md（推荐的字体加载方式）
- 本地字体：rules/local-fonts.md
- 获取音频时长：rules/get-audio-duration.md（用 Mediabunny）
- 获取视频尺寸：rules/get-video-dimensions.md（用 Mediabunny）
- 获取视频时长：rules/get-video-duration.md（用 Mediabunny）
- GIF：rules/gifs.md（与 Remotion 时间线同步显示）
- 高级图片（尺寸定位、动态路径、获取图片尺寸）：rules/images.md
- Lottie 动画：rules/lottie.md
- 测量 DOM 节点：rules/measuring-dom-nodes.md
- 测量文本（尺寸、适配容器、检查溢出）：rules/measuring-text.md
- 高级序列（延迟、裁剪、限制时长）：rules/sequencing.md
- TailwindCSS：rules/tailwind.md
- 文字动画：rules/text-animations.md
- 高级时序（interpolate、Bézier 缓动、springs）：rules/timing.md
- 转场：rules/transitions.md
- 透明视频：rules/transparent-videos.md
- 裁剪（切掉动画开头或结尾）：rules/trimming.md
- 高级视频（裁剪、音量、速度、循环、音高）：rules/videos.md
- 参数化视频（用 Zod schema 使合成可参数化）：rules/parameters.md
- 地图（静态地图、Mapbox、MapLibre 的选择）：rules/map.md
- 配音（用 ElevenLabs TTS 添加 AI 生成配音）：rules/voiceover.md
适用场景
适用于任何涉及 Remotion 代码的编写与修改，包括项目初始化、场景与布局设计、动画与时间控制、素材与字体加载、字幕与配音、音频处理与可视化、特效、3D、转场、透明视频、参数化与动态元数据等。
限制与禁止事项
- CSS transitions 或 animations 被禁止，无法正确渲染。
- Tailwind 动画类名被禁止，无法正确渲染。
- 单帧渲染检查对琐碎修改、纯重构或已有足够信心时可跳过。
- 特效实现应遵循上述优先级顺序，仅在无合适效果时才使用自定义 <HtmlInCanvas onPaint>。
- 关于收费、价格、平台支持范围等未在资料中提供的信息，暂未提供。