为什么需要
AI Agent 的用户界面最怕什么？用户不知道 Agent 在干什么——是死循环了？还是在认真思考？Thinking Orbs 用可视化动画告诉你答案，让 AI Agent 的每一步状态都清晰可见。
怎么用
bash
npm install thinking-orbs
typescript
import { ThinkingOrbs } from 'thinking-orbs';
// 六种状态：thinking | booting | paused | stopped | error | resumed
<ThinkingOrbs state="thinking" size="lg" darkMode="auto" />
支持两种视觉风格（dotted orb / solid orb），两种尺寸，自动跟随系统明暗模式。
界面
Thinking Orbs 的核心是六种语义化状态动画，每种状态有独特视觉语言：
- Thinking：持续旋转/脉动，表示 Agent 正在推理
- Booting：启动动画，表示 Agent 初始化
- Paused：暂停状态
- Stopped：停止
- Error：错误提示
- Resumed：恢复运行
每个状态可自定义颜色、尺寸、动画速度。
使用案例
- AI Chat 界面：在消息发送后显示 Thinking Orbs，用户知道 Agent 正在响应而不是卡死
- Agent 监控面板：显示多个 Agent 实例的实时状态运维人员一目了然
注意事项
- 定价：MIT 许可证，完全免费开源
- 局限：仅适用于 AI Agent 类产品的 UI 场景，通用加载指示器请用 SpinKit
- 技术栈：TypeScript，支持所有主流前端框架