Thinking Orbs
Yogesh (yogesharc) · 程式設計
Thinking Orbs 是一套開源的 React 元件庫，用動態光球顯示 AI 代理當下在做什麼，思考、搜尋與重試各有專屬狀態。
關於 Thinking Orbs
About
什麼是 Thinking Orbs
Thinking Orbs 是一套 React 元件庫，替 AI 代理介面畫出會動的光球。每顆光球都是一團點陣，切換狀態就換一種動法。代理在思考時，一點微光會在球面上游走；上網搜尋時，一枚透鏡在球面各處跳動；出錯重試時，光球先旋轉再往回捲。
這套元件解決的是一個很具體的問題。代理介面有大半時間停在含糊的「處理中」，轉圈動畫說不出模型在做什麼，使用者分不清是回應慢還是請求卡住。這顆會動的光球把那段空白變成可讀的訊號，尺寸又小到能塞在一行文字旁邊。
作者 Yogesh 以 MIT 授權開源釋出。React 版本只需要 React，純 JavaScript 版本不吃任何依賴，SwiftUI 套件支援 iOS 17 與 macOS 14。預設以外的形狀與繪製方式都是獨立模組，專案只會打包真正匯入的部分。
安裝前先弄清楚界線。元件負責動畫，不負責追蹤你的代理：哪個狀態該出現、什麼時候切換，都由你從自己的請求流程決定。形狀與繪製方式目前只支援網頁，SwiftUI 版本能調的選項也比較少。
開始使用
- 用 npm、pnpm、yarn 或 bun 安裝：npm i @yogesharc/thinking-orbs。
- 匯入 Orb，傳入一個狀態，例如 reasoning 或 searching。
- 調整 size、speed、density 與 tilt，讓光球配合你的字級，再加 label 給螢幕閱讀器。
- 需要不同外形或筆觸時，從選用模組匯入形狀或繪製方式。
- 或者用 shadcn 指令把原始碼複製到 components/，當成自己的檔案修改。
產品資訊
快速了解 Thinking Orbs 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 正在做 AI 聊天或代理產品的 React 開發者：一行 import 就能放進既有元件樹，不必先設定主題。
- 沒有設計師的小型前端團隊：九種狀態涵蓋代理常見動作，沒人需要另外畫 loading 動畫。
- 獨自開發側專案的人：MIT 授權加上零依賴，一個人的專案維持簡單。
任務
- 在串流聊天裡區分思考與上網搜尋：代理換階段時改 state 屬性即可。
- 顯示長時間的背景工作，例如建立索引或開發伺服器類的任務：background 狀態用更少、更大的點，看起來比較安定。
- 提示正在重試或碰到用量上限：retrying 與 waiting 狀態讓使用者知道請求還活著，不必再補一句說明。
- 工具呼叫還沒回來時填滿空白面板：光球給出一個視覺焦點，小尺寸也讀得出來。
情境
- 以串流接收 token 的聊天應用，回應標題旁需要一個狀態。
- 工具呼叫一個接一個的寫程式代理或編輯器外掛，每個呼叫都要有各自的訊號。
- 想讓 iPhone 或 Mac 的 SwiftUI 應用與網頁版維持同一套視覺語言。
主要功能
每種代理動作都有對應的狀態指示
元件庫涵蓋九種狀態，沿著代理的工作循環排列：進行中的工作、思考與搜尋排在最前，接著是背景任務、瀏覽器操作、重試、上下文壓縮、等待用量重置與閒置。多數狀態另有具名變體，gyro 讓工作中的光球搖晃，lighthouse 則掃出一道搜尋光束。
用屬性調整外觀，不必寫 CSS
size、speed、density、dotSize 與 tilt 都是數字屬性，要對齊 14 px 的說明文字或 48 px 的區塊都不必另外寫樣式。paused 會把動畫停在當前影格，className 則讓光球沿用既有工具類別的文字顏色。繪製使用 currentColor，深色模式不需要額外設定。
選用的形狀與繪製方式
核心只附一種形狀與一種繪製方式。另外四種形狀（cube、octahedron、tetrahedron、torus）與七種繪製方式（dashes、squares、crosses、mesh、halftone、lines、verticalLines）放在獨立進入點。tree shaking 會移除沒匯入的部分，自訂形狀則是一個回傳單位球內座標點的函式。
四種導入方式
可以從 npm 安裝、用 shadcn 網址複製原始碼、以 mountOrb 在純 JavaScript 掛載，或在 Xcode 加入 Swift 套件。vanilla 版本提供 pause、play 與 destroy，適合自己管理生命週期的頁面。SwiftUI 版本以前景樣式繪製，加上 foregroundStyle(.blue) 就能改色。
體積小，預設就顧到無障礙
React 版本除了 React 沒有其他依賴，vanilla 版本則完全沒有。預設 20 px 正是形狀設計時的尺寸，放在密集的介面裡點陣依然清楚。label 屬性替光球提供螢幕閱讀器名稱，系統回報減少動態效果時，動畫會停住不動。
MIT 授權的開源專案
完整原始碼放在 GitHub，MIT 授權允許商業使用、修改與再散布。贊助走 Patreon，性質是支持開發，不會解鎖額外功能。團隊想 fork 一份自己維護，成本也算得出來。
優缺點
優點
- 九種狀態加變體，幾乎涵蓋代理介面需要回報的動作。
- 沒有依賴鏈，裝進 React 專案幾乎不增加重量。
- 預設 20 px 在工具列、訊息標題與側邊面板都看得清楚。
- 減少動態效果與螢幕閱讀器標籤都做在元件裡。
缺點
- 光球只負責動畫，代理事件要對應到哪個狀態仍得自己接。
- 形狀與繪製方式只支援網頁，SwiftUI 版本因此少了這些選項。
- 說明文件只有一頁，狀態切換的節奏只能自己試。
常見問題
不用。套件以 MIT 授權開源，所有狀態、形狀與繪製方式都包含在內。沒有付費方案，也不用註冊帳號。
相關內容
探索與 Thinking Orbs 相關的工具、技能與文章。
Thinking Orbs 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。