thinking-orbs：为 AI Agent 界面而生的思考过程动画库

图1：thinking-orbs 六种思考状态动画预览

---

背景故事：一个前端工程师的"细节强迫症"

2024 年的某天，Jakub Antalik 在调试一个基于大语言模型的对话应用时，注意到界面上那个单调的旋转圆圈加载动画——它既无法传达 AI 正在"思考"，也无法给用户任何心理预期。他开始思考：当 AI agent 在执行搜索、推理、创作等不同任务时，界面上能否有一种更直观、更具象的表达方式？

答案就是这个仅有 2000 多行代码的小型 TypeScript 库——thinking-orbs。它将 AI agent 的思考过程具象为六种独特的球形动画，用动态光点的运动轨迹来模拟不同的认知行为：粒子在倾斜轨道上旋转代表"工作中"，扫描经线划过点状球体代表"搜索中"，色带错位旋转代表"正在求解"……

这个项目在 GitHub 上线不到两周便获得超过 1200 颗星，迅速成为 AI 应用 UI 领域的热门组件。

---

核心功能：六种认知状态的视觉语言

1. 工作状态（working）—— 倾斜轨道粒子

最接近"传统"加载动画的状态，但细节更丰富。12 颗光点以固定间隔分布在一条倾斜的椭圆轨道上旋转，同时有 40 颗幽灵粒子（ghost particle）以低透明度填充轨道，增强立体感。光点的深度由半径和墨水浓度共同表达——近端大而实，远端小而淡，模拟真实的 3D 球体感。

图2：favicon 中的 orb 静态帧

2. 搜索状态（searching）—— 点状扫描球

受地球经纬线启发的动画：一条扫描经线以固定速度横切点状球体，每次扫过时路径上的点短暂高亮，然后迅速衰减。整个球体由 Fibonacci 球面均匀分布算法生成，确保每个区域密度一致。

3. 求解状态（solving）—— 魔方翻转

模拟三阶魔方的层旋转效果：15 条纬线被分为多个段落，每次随机选几条做 90° 错位旋转，然后在一定帧数后归位。配合缩放补偿算法，即使在 20px 的小尺寸下仍然清晰可辨。

4. 倾听状态（listening）—— 波形穿过纬圈

一列正弦波形从左向右穿过均匀分布的纬圈，每个交点根据波形相位呈现不同的亮度。整体效果类似示波器的频谱显示，但用纬线的深度感增加了 3D 层次。

5. 创作状态（composing）—— 多带状缎带

5 条平行的波浪带各自以不同频率振荡，带与带之间有 150 个幽灵粒子填充，制造出"能量流动"的质感。适合表示 AI 正在生成内容、编织答案的过程。

6. 塑造状态（shaping）—— 轮廓变形

一个点状轮廓在圆形、三角形和正方形之间流畅变形，采样密度为 2.4 倍，可在小尺寸下保持形状平滑锐利。最具"AI 正在思考结构"意向的状态。

---

技术架构：纯 Canvas 2D 的性能哲学

为什么不用 WebGL？

这是作者刻意选择的结果。WebGL 提供了更强大的渲染能力，但也带来了更高的复杂度和更大的 bundle 体积。thinking-orbs 的核心渲染完全依赖 HTML5 Canvas 2D API，不使用任何滤镜（ctx.filter），仅通过点的大小和灰度来表达深度信息。这种极简主义带来了三个核心优势：

1. 零兼容性问题：Chrome、Safari、Firefox 渲染效果完全一致
2. 极低 bundle 体积：核心引擎仅约 200 行数学代码
3. CPU/GPU 消耗极低：IntersectionObserver + visibilitychange 实现智能暂停

渲染引擎的分层架构

ThinkingOrb.tsx (React 组件层)
    ├── useResolvedDark()      — 主题解析（auto/dark/light 三层检测）
    ├── useReducedMotion()     — 系统减少动画偏好
    ├── rAF 动画循环            — requestAnimationFrame 驱动
    └── IntersectionObserver   — offscreen 暂停
           ↓
presets.ts (预设调参层)
    ├── STATE_TO_MODE           — 6 种状态 → 6 种绘制模式
    ├── PRESETS[mode][size]     — 每种模式的精细参数预设
    └── resolvePreset()         — 缓存 + 参数合并
           ↓
engine/ (底层绘制引擎)
    ├── registry.ts            — 模式注册表（tree-shakable）
    ├── core.ts                — 共享数学原语（投影/球面分布/z-sort）
    ├── profiles.ts            — 密度缩放 + 半径缩放工具函数
    ├── orbits.ts              — working 状态绘制器
    ├── lattice.ts             — globe/wave/rubik 三种晶格模式
    ├── morph.ts               — shaping 状态绘制器
    └── ribbon.ts              — composing 状态绘制器

性能优化：每个细节都有考量

帧冻结策略：offscreen 时自动停止 rAF 循环，用户切换 Tab 时立即暂停。相比不断重绘的实现，CPU 占用接近 0。

DPR 智能限制：devicePixelRatio 最多取 2（Retina 屏的 3x/4x 不再向上），避免在超高清屏幕上分配过多像素缓冲。

预设缓存：每种 (state, size) 组合的参数只计算一次，存入 Map，后续渲染直接读缓存数值。

无障碍支持：组件输出 <canvas role="img" aria-label="Working…" />，配合 aria-label prop，支持屏幕阅读器识别。

---

上手门槛：NPM 一行安装即可

npm install thinking-orbs

然后在 React 组件中：

import { ThinkingOrb } from 'thinking-orbs';

// 默认工作状态，64px，auto 主题
<ThinkingOrb />

// 小尺寸搜索状态
<ThinkingOrb state="searching" size={20} />

// 强制暗色主题
<ThinkingOrb state="composing" theme="dark" />

// 速度控制（0.5 = 正常速度的一半）
<ThinkingOrb state="shaping" speed={0.5} />

两种尺寸预设（20px 和 64px）各自经过独立调参，不是简单的缩放——小尺寸的点数、点大小、动画速度均有专属设计，确保在任何使用场景下都保持视觉清晰。

---

争议与局限：它不做什么

不是通用 loading spinner：它专门为 AI/Agent 场景设计，用动画语义传达认知状态。传统 CRUD 应用的加载场景使用它反而显得过于复杂。

非 React 项目门槛较高：虽然底层引擎（resolvePreset + MODE_DRAWS）理论上可以在原生 Canvas 项目中复用，但官方仅提供 React 封装，不含 React 独立使用的 TypeScript API 文档。

静态生成（SSG）兼容：组件依赖 useEffect 和 DOM API，在服务端渲染时会 fallback 到静态暗色帧，首次水合后恢复正常。如果你的框架不支持 useEffect（如纯静态生成），动画不会运行。

---

行业意义：AI 交互设计的新细节标准

随着 LLM 应用爆发式增长，AI 界面的用户体验设计正在被重新定义。传统的 spinner 正在被更具语义化的状态指示器取代：thinking-orbs 代表了一个趋势——用视觉语言表达 AI 的认知状态。

从数据看，这个项目从 2026-07-21 上线，到 2026-07-29 不到 10 天积累了 1223 颗星，增长曲线陡峭。它的成功说明：AI 应用开发者们正在追求更高品质的用户体验细节——他们愿意为"更好一点"的细节投入。

---

图3：项目作者 Jakub Antalik

---

技术总结：thinking-orbs 是一个专注于 AI agent 界面体验的 React Canvas 动画库，以 MIT 许可证开源，六种思考状态，六种认知隐喻，极低开销，零平台兼容性妥协。