remotion-bits by av/remotion-bits
npx skills add https://github.com/av/remotion-bits --skill remotion-bits使用此技能时,首先基于现成的 Remotion Bits 示例进行构建,仅当示例不足时才回退到使用基础组件。
find_remotion_bits 开始。fetch_remotion_bit 获取最佳匹配的一到两个示例。Scene3D 示例。将文档代码片段视为主要的工作模式库。只有在检查现有代码片段是否已提供所需的组合形式、时间模型和布局结构之后,才去使用基础组件。
find_remotion_bits 进行发现,使用 fetch_remotion_bit 获取完整源代码。npx remotion-bits find "hero intro" --tag scene-3d --json 和 。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npx remotion-bits fetch bit-fade-in --jsondocs/src/bits/catalog.ts 和 docs/src/bits/examples/**,然后手动调整最接近的示例。如果 MCP 接口可用,优先于 CLI 使用。如果 CLI 可用,优先于直接读取文件使用。
当您不想要仓库本地工作流时,直接使用已发布的包:
# 无需安装
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
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 的主题颜色。除非用户要求新的调色板,否则不要随意替换颜色。Component 函数完全自包含。如果示例将用于文档的演示路径,请不要将辅助函数、常量或数据数组留在模块作用域。StaggeredMotion 序列,而不是手动计算帧阶段。AnimatedText:淡入淡出、滑动、按词分割、按字符分割和文本循环的入口点。当动效主要是文本显示时使用它。避免手动重建文本交错效果。AnimatedCounter:支持前缀和后缀的数字插值。用于 KPI、定价和统计数据展示。避免自己为格式化字符串添加动画。TypeWriter:带有光标行为的打字和删除文本效果。用于终端、CLI 和顺序标题效果。对于密集的代码布局,请避免使用它,因为 CodeBlock 才是真正的基础组件。CodeBlock:具有语法高亮、行交错、聚焦和高亮区域的代码显示效果。用于编辑器和代码演示场景。除非布局是特意定制的,否则避免手动渲染代码行。MatrixRain:现成的矩阵式文本雨效果。当请求明确是矩阵或黑客雨主题时使用它。避免将其用作通用的粒子背景。GradientTransition:动画 CSS 渐变背景和过渡效果。当动效主要是背景颜色和渐变演变时使用它。除非效果不是渐变过渡,否则避免用手动颜色插值替换它。StaggeredMotion:用于重复子元素的共享序列基础组件。用于列表、网格、卡片堆叠和多元素入场效果。当动画仅仅是交错的变换和透明度时,避免为每个子元素计算帧。Particles 和粒子系统基础组件:使用 Particles、Spawner 和 Behavior 来实现环境动效、喷泉、雪花、萤火虫和场效应。避免将它们用于文本序列或布局过渡。Scene3D:摄像机、步骤和 3D 空间组合。当请求感觉像演示文稿、穿行、多步骤演练或摄像机驱动的展示时使用它。如果摄像机移动是核心,避免用普通序列重建此功能。useViewportRect:尺寸和布局的基础。几乎在每个响应式代码片段中都使用它。除非您有意匹配固定的渲染目标,否则避免使用硬编码的像素尺寸。StaggeredMotion。AnimatedText 开始。AnimatedCounter。TypeWriter。CodeBlock。Scene3D。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每周安装次数
98
仓库
GitHub 星标数
221
首次出现
2026年2月2日
安全审计
安装于
codex89
opencode89
gemini-cli86
github-copilot86
amp79
kimi-cli78
Use this skill to build from live Remotion Bits examples first, then fall back to primitives only when the examples are not enough.
find_remotion_bits using the user's visual goal, motion style, or scene description.fetch_remotion_bit.Scene3D examples.Treat the docs bits as the primary library of working patterns. Reach for primitives only after checking whether an existing bit already gives you the composition shape, timing model, and layout structure you need.
find_remotion_bits for discovery and fetch_remotion_bit for the full source.npx remotion-bits find "hero intro" --tag scene-3d --json and npx remotion-bits fetch bit-fade-in --json.docs/src/bits/catalog.ts and docs/src/bits/examples/**, then adapt the nearest example manually.If the MCP surface is available, use it before the CLI. If the CLI is available, use it before reading files directly.
Use the published package directly when you do not want a repo-local workflow:
# No install
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json
# Global install
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json
Start the MCP server from the published package the same way:
# No install
npx remotion-bits mcp
# Global install
remotion-bits mcp
When an agent or MCP client needs a stdio command, point it at one of these:
{
"command": "npx",
"args": ["-y", "remotion-bits", "mcp"]
}
{
"command": "remotion-bits",
"args": ["mcp"]
}
Inside this repository, the equivalent repo-local commands remain:
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 sizing. Prefer rect.vmin, rect.vmax, rect.width, and rect.height over hardcoded pixels.docs/src/styles/custom.css. Do not swap in arbitrary colors unless the user asked for a new palette.Component functions fully self-contained. Do not leave helpers, constants, or data arrays at module scope if the example will be used in the docs playground path.StaggeredMotion sequencing over hand-rolled frame phase math.AnimatedText: entry point for fades, slides, split-by-word, split-by-character, and text cycling. Use it when the motion is primarily text reveal. Avoid rebuilding text staggering manually.AnimatedCounter: numeric interpolation with prefix and postfix support. Use it for KPI, pricing, and stats reveals. Avoid animating formatted strings yourself.TypeWriter: typing and deleting text with cursor behavior. Use it for terminal, CLI, and sequential headline effects. Avoid it for dense code layouts where CodeBlock is the real primitive.CodeBlock: syntax-highlighted code reveal with line staggering, focus, and highlight regions. Use it for editor and code demo scenes. Avoid hand-rendering code lines unless the layout is intentionally custom.MatrixRain: ready-made matrix-style text rain. Use it when the request is explicitly matrix or hacker-rain themed. Avoid using it as a generic particle background.GradientTransition: animated CSS-gradient backgrounds and transitions. Use it when the motion is mostly background color and gradient evolution. Avoid replacing it with manual color interpolation unless the effect is not a gradient transition.StaggeredMotion.AnimatedText.AnimatedCounter.TypeWriter.CodeBlock.Scene3D.Scene3D example first, then adapt step positions, titles, and card content before introducing any new primitives.# 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.mdWeekly Installs
98
Repository
GitHub Stars
221
First Seen
Feb 2, 2026
Security Audits
Gen Agent Trust HubPassSocketFailSnykPass
Installed on
codex89
opencode89
gemini-cli86
github-copilot86
amp79
kimi-cli78
TanStack Table 中文指南:React 无头表格库,实现排序过滤分页
577 周安装
StaggeredMotion: shared sequencing primitive for repeated children. Use it for lists, grids, card stacks, and multi-element entrances. Avoid per-child frame math when the animation is just staggered transforms and opacity.Particles and particle system primitives: use Particles, Spawner, and Behavior for ambient motion, fountains, snow, fireflies, and field effects. Avoid them for text sequencing or layout transitions.Scene3D: camera, steps, and 3D spatial composition. Use it when the request feels like a presentation, flythrough, multi-step walkthrough, or camera-driven showcase. Avoid rebuilding this with plain sequences if camera movement is central.useViewportRect: sizing and layout foundation. Use it in nearly every responsive bit. Avoid hardcoded pixel sizes unless you are matching a fixed render target on purpose.