Remotion Bits
使用此技能时，应首先基于现有的 Remotion Bits 示例进行构建，仅在示例不足时回退到使用底层图元。
默认工作流程
- 使用
find_remotion_bits，依据用户的视觉目标、动画风格或场景描述进行搜索。 - 使用
fetch_remotion_bit获取最佳的一到两个匹配项。 - 在从图元组合之前，先尝试适配最接近的示例。
- 如果匹配到多个示例，优先选择能满足需求的最简单的一个。
- 如果需求是多步骤的、由摄像机驱动的或类似演示的，则偏向于选择
Scene3D示例。 - 在适配文档中的 bits 时，保留响应式尺寸、主题颜色用法和自包含的示例结构。
将文档中的 bits 视为可工作模式的主要库。只有在检查现有 bit 是否已提供所需的合成形状、时间模型和布局结构之后，才应使用图元。
回退链
- 优先使用 MCP。
使用
find_remotion_bits进行发现，使用fetch_remotion_bit获取完整源代码。 - 其次使用 CLI。
使用
npx remotion-bits find "hero intro" --tag scene-3d --json和npx remotion-bits fetch bit-fade-in --json。 - 最后直接查看文档。
查阅
docs/src/bits/catalog.ts和docs/src/bits/examples/**，然后手动适配最接近的示例。
如果 MCP 接口可用，则优先使用它。如果 CLI 可用，则在使用直接读取文件之前使用它。
CLI 和 MCP 设置
当您不希望使用本地仓库工作流时，可直接使用已发布的包：
# 无需安装
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json
# 全局安装
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json
以相同方式从已发布的包启动 MCP 服务器：
# 无需安装
npx remotion-bits mcp
# 全局安装
remotion-bits mcp
当 Agent 或 MCP 客户端需要 stdio 命令时，将其指向以下之一：
{
"command": "npx",
"args": ["-y", "remotion-bits", "mcp"]
}
{
"command": "remotion-bits",
"args": ["mcp"]
}
在此仓库内，与仓库本地等价的命令仍然是：
npm run bits:find -- --query "hero intro" --tag scene-3d --json
npm run bits:fetch -- bit-fade-in --json
npm run mcp:bits
如何有效搜索
- 根据视觉结果进行搜索：
flying camera through cards,counter with confetti,typewriter terminal,gradient background,staggered grid reveal。 - 当形状明确时添加标签：
scene-3d,text,particles,gradient,code,counter。 - 当请求不明确时，获取一个强匹配项和一个备选匹配项。
- 优先选择能在满足需求的同时包含最少活动部件的示例。
适配规则
- 保留
useViewportRect的尺寸设置。优先使用rect.vmin、rect.vmax、rect.width和rect.height，而不是硬编码的像素值。 - 保留
docs/src/styles/custom.css中的主题颜色。不要随意替换为任意颜色，除非用户要求新的调色板。 - 确保文档 bit 的
Component函数完全自包含。如果示例将用于文档的 playground 路径，不要将辅助函数、常量或数据数组保留在模块作用域。 - 文档 bits 为显示而预先包装。如果您要将其转换为独立的 Remotion 合成，请添加您自己的外部布局和背景。
- 对于分阶段进入和离开的动画，优先使用
StaggeredMotion的序列编排，而不是手动计算帧相位。 - 对于演示流程，首先保留示例的步骤结构，然后更改内容、摄像机目标和时间。
图元快速参考
AnimatedText：淡入、滑动、按词拆分、按字符拆分和文本循环的入口点。当动画主要是文本揭示时使用它。避免手动重建文本交错。AnimatedCounter：支持前缀和后缀的数字插值。用于 KPI、定价和统计数据揭示。避免自己格式化数字字符串的动画。TypeWriter：带光标行为的打字和删除文本。用于终端、CLI 和顺序标题效果。避免在密集代码布局中使用它，因为CodeBlock才是真正的图元。CodeBlock：带行交错、焦点和高亮区域的语法高亮代码揭示。用于编辑器和代码演示场景。除非布局故意自定义，否则避免手动渲染代码行。MatrixRain：现成的矩阵风格文字雨。当请求明确是矩阵或黑客雨主题时使用。避免将其用作通用粒子背景。GradientTransition：动画 CSS 渐变背景和过渡。当动画主要是背景颜色和渐变演变时使用。除非效果不是渐变过渡，否则避免用手动颜色插值替换它。StaggeredMotion：用于重复子元素的共享序列编排图元。用于列表、网格、卡片堆叠和多元素入场。当动画只是交错的变换和不透明度时，避免对每个子元素进行帧计算。Particles和粒子系统图元：使用Particles、Spawner和Behavior来营造环境运动、喷泉、雪、萤火虫和场效果。避免将它们用于文本序列编排或布局过渡。Scene3D：摄像机、步骤和 3D 空间组合。当请求感觉像是演示、飞越、多步骤演练或摄像机驱动的展示时使用。如果摄像机移动是核心，避免使用普通序列重建它。useViewportRect：尺寸和布局基础。在几乎所有响应的 bit 中使用它。除非您有意匹配固定的渲染目标，否则避免硬编码像素尺寸。
常见决策规则
- 需要在重复子元素上应用相同的动画：使用
StaggeredMotion。 - 需要文本特定的揭示行为：从
AnimatedText开始。 - 需要计数：使用
AnimatedCounter。 - 需要打字效果：使用
TypeWriter。 - 需要在屏幕上显示代码：使用
CodeBlock。 - 需要环境发射器或粒子：使用粒子系统图元。
- 需要场景到场景的摄像机运动：使用
Scene3D。
示例优先模式
- 文本请求：找到文本 bit，获取它，然后替换内容、时间和拆分模式。
- 计数器请求：找到计数器示例，然后调整数值、标签和粒子点缀。
- 代码请求：找到代码块或打字机示例，然后调整代码示例和高亮区域。
- 背景请求：找到渐变或粒子示例，然后调整调色板、密度和持续时间。
- 演示请求：首先找到
Scene3D示例，然后调整步骤位置、标题和卡片内容，然后再引入任何新的图元。
最小操作示例
# MCP
find_remotion_bits {"query":"camera flythrough product showcase","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}
# CLI
npx remotion-bits find "camera flythrough product showcase" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json
参考文档
references/components.mdreferences/utilities.mdreferences/patterns.md