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 接口可用，优先使用 MCP 而非 CLI。如果 CLI 可用，优先使用 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
当代理或 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
如何高效搜索
- 根据视觉结果搜索：
穿过卡片飞行的摄像机、带彩纸的计数器、打字机终端、渐变背景、交错网格揭示。 - 当形状明显时添加标签：
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