av/remotion-bits

Remotion Bits

使用此技能時，應優先從現有的 Remotion Bits 範例開始建構，僅在範例不足時才回退到基礎元件。

預設工作流程

1. 使用 find_remotion_bits，根據使用者的視覺目標、動畫風格或場景描述進行搜尋。
2. 使用 fetch_remotion_bit 取得最符合的一到兩個範例。
3. 先改編最接近的範例，再考慮從基礎元件組合。
4. 若有多個範例符合條件，優先選擇最簡單且能滿足需求的範例。
5. 若需求涉及多步驟、攝影機驅動或類似簡報的場景，優先選用 Scene3D 範例。
6. 改編文件中的位元時，保留響應式尺寸、主題色彩使用，以及自我封閉的範例結構。

將文件位元視為主要的工作模式庫。只有在確認現有位元無法提供所需的組合形狀、時間模型與佈局結構後，才使用基礎元件。

回退鏈

1. MCP 優先。 使用 find_remotion_bits 進行探索，使用 fetch_remotion_bit 取得完整原始碼。
2. CLI 次之。 使用 npx remotion-bits find "hero intro" --tag scene-3d --json 和 npx remotion-bits fetch bit-fade-in --json。
3. 最後才直接檢查文件。 檢查 docs/src/bits/catalog.ts 和 docs/src/bits/examples/**，然後手動改編最接近的範例。

若 MCP 介面可用，優先使用 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.md
• references/utilities.md
• references/patterns.md