AI 語音球
Siri 式語音球：待機呼吸、聆聽波動、思考旋轉、說話脈動四態。
以 canvas 2d 繪製的有機 blob 語音球：多層正弦擾動輪廓疊加漸層與光暈，由 state 驅動四種型態——待機時緩慢呼吸、聆聽時隨模擬音量劇烈波動、思考時環繞粒子雙向旋轉、說話時依類音節節奏脈動，狀態切換以指數趨近平滑過渡，適合語音助理與 AI 對話介面。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
220
<AiVoiceOrb />
安裝
npx shadcn@latest add https://webberui.com/r/ai-voice-orb.json或在 components.json 設定 registries 後，改用 @webberui/ai-voice-orb 安裝。
安裝依賴後，從 registry JSON（/r/ai-voice-orb.json 的 files[0].content）複製 ai-voice-orb.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { AiVoiceOrb } from "@/components/ui/ai-voice-orb";
<AiVoiceOrb state="listening" palette="aurora" size={200} showLabel />搭配語音辨識或串流回覆時，把辨識與回覆的生命週期映射到 state 即可：
const [state, setState] = React.useState<VoiceOrbState>("idle");
// 開始收音 → setState("listening")
// 等待模型 → setState("thinking")
// 播放回覆 → setState("speaking")Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
state | "idle" | "listening" | "thinking" | "speaking" | "idle" | 語音球目前狀態，切換時動畫參數平滑過渡 |
palette | "aurora" | "sunset" | "ocean" | "mint" | "aurora" | 內建配色主題 |
colors | [string, string, string] | — | 自訂三色漸層（主色、輔色、點綴色），優先於 palette |
size | number | 220 | 畫布尺寸（px），光暈與粒子皆繪製在此範圍內 |
showLabel | boolean | false | 是否在球體下方顯示目前狀態文字 |
labels | Partial<Record<VoiceOrbState, string>> | — | 覆寫各狀態的顯示文字（同時用於 aria-live 播報） |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，改渲染靜態漸層圓與狀態文字，完全不啟動 canvas 動畫迴圈
- canvas 具
role="img"與描述性aria-label（例如「AI 語音球：聆聽中」） - 狀態變化透過
aria-live="polite"的 sr-only 區域向螢幕閱讀器播報 - 元件滾出可視範圍時以 IntersectionObserver 暫停 rAF，回到畫面自動恢復，節省效能與電量