这个项目能做什么
# thinking-orbs
为AI与代理界面设计的点状思考球加载指示器。提供九种手调动画状态，每种状态均以两种针对性尺寸发布，渲染于纯2D画布上——无需WebGL，无需滤镜，在Chrome、Safari和Firefox中表现一致。
[在线演示](https://orbs.jakubantalik.com) · [代码仓库](https://github.com/Jakubantalik/thinking-orbs) · [报告问题](https://github.com/Jakubantalik/thinking-orbs/issues)
## 安装
```bash
npm install thinking-orbs
```
## 快速开始
```tsx
import { ThinkingOrb } from 'thinking-orbs';
function Status() {
return <ThinkingOrb state="searching" size={64} />;
}
```
## 状态
代理可能正在执行的九种动作，每种对应一个独特的动画：
```tsx
<ThinkingOrb state="working" /> {/* 粒子在倾斜轨道上运动 */}
<ThinkingOrb state="searching" /> {/* 扫描子午线扫过点状球体 */}
<ThinkingOrb state="solving" /> {/* 条带打乱，然后咔嗒一声恢复解决 */}
<ThinkingOrb state="listening" /> {/* 波形在环中滚动 */}
<ThinkingOrb state="connecting" /> {/* 星座自行连线 */}
<ThinkingOrb state="weaving" /> {/* 三股线围绕球体编织 */}
<ThinkingOrb state="composing" /> {/* 起伏的多带饰带 */}
<ThinkingOrb state="breathing" /> {/* 环缓慢变形 */}
<ThinkingOrb state="shaping" /> {/* 点状轮廓：圆形 → 三角形 → 正方形 */}
```
## 尺寸
两种调校预设——独立设计，而非缩放因子。`64`用于聊天头像尺寸，`20`用于内联文本尺寸。每种预设都有各自的点数、点大小和速度调校：
```tsx
<ThinkingOrb state="working" size={64} />
<ThinkingOrb state="working" size={20} />
```
## 主题
严格单色——深色背景用浅色墨迹，浅色背景用深色墨迹——模式自动从宿主项目中选取：
```tsx
<ThinkingOrb theme="auto" /> {/* 默认——从项目中检测 */}
<ThinkingOrb theme="dark" /> {/* 固定：深色背景用浅色点 */}
<ThinkingOrb theme="light" /> {/* 固定：浅色背景用深色点 */}
```
`auto`模式分三层解析，并在任一层次变化时实时更新：
1. 祖先元素上的`data-theme="dark|light"`属性或`dark`/`light`类（Tailwind / shadcn约定），通过`MutationObserver`监听；
2. 否则使用`prefers-color-scheme`，订阅实时操作系统主题切换；
3. SSR安全——画布仅在客户端、主题解析完成后绘制。
## 其他属性
```tsx
<ThinkingOrb
state="solving"
size={20}
speed={1.5} // 预设内置速度的倍率
paused={false} // 冻结在当前帧
aria-label="正在分析仓库…" // 覆盖各状态的默认标签
/>
```
所有其他`<canvas>`属性（`className`、`style`、`data-*`等）均会透传。
## 无障碍与性能
- 开箱即用`role="img"`，并带有合理的各状态`aria-label`。
- `prefers-reduced-motion: reduce`时渲染静态代表性帧——无动画——但仍跟随实时主题。
- 每个实例在滚动出视口（`IntersectionObserver`）或标签页隐藏时自动暂停，并在相位中恢复——所有实例共享一个时钟。
- 仅使用纯2D画布弧线：无`ctx.filter`、无SVG滤镜、无WebGL——各处像素一致，在低端设备上开销低。设备像素比上限为2。
## 许可证
MIT © Jakub Antalik
评论
0 评分人数达到10人后显示
登录后参与讨论。