Remotion Bits
使用此技能時，先從現成的 Remotion Bits 範例開始建構，僅在範例不足時才回退到底層原語。
預設工作流程
- 根據使用者的視覺目標、動畫風格或場景描述，使用
find_remotion_bits搜尋。 - 使用
fetch_remotion_bit取得最符合的一或兩個範例。 - 在組合原語之前，先改編最接近的範例。
- 如果有多個範例符合，優先選擇最簡單且能滿足需求的範例。
- 如果需求涉及多步驟、攝影機驅動或類似簡報樣式，則優先選擇
Scene3D範例。 - 改編文件中的範例時，請保留響應式尺寸、主題顏色使用方式以及自包含的範例結構。
將文件中的範例視為可運作模式的主要程式庫。只有在檢查現有範例是否已經提供所需的合成形狀、時間模型和版面結構後，才使用原語。
回退鏈
- 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 可用，則優先使用它，再考慮直接讀取檔案。
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
如何有效搜尋
- 根據視覺結果搜尋：
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函式完全自包含。如果範例將在文件遊樂場路徑中使用，請勿將輔助函式、常數或資料陣列留在模組作用域中。 - 文件中的範例已預先包裝以便顯示。如果要將某個範例轉換為獨立的 Remotion 合成，請自行添加外層佈局和背景。
- 對於分階段的進出場動畫，優先使用
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