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

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

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 静态帧

orb favicon

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），仅通过点的大小和灰度来表达深度信息。这种极简主义带来了三个核心优势：

零兼容性问题：Chrome、Safari、Firefox 渲染效果完全一致
极低 bundle 体积：核心引擎仅约 200 行数学代码
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

Jakub Antalik

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

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

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

thinking-orbs 动画预览

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

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

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

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

图2：favicon 中的 orb 静态帧

orb favicon

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

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

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

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

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

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

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

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

为什么不用 WebGL？

零兼容性问题：Chrome、Safari、Firefox 渲染效果完全一致
极低 bundle 体积：核心引擎仅约 200 行数学代码
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} />

争议与局限：它不做什么

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

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

图3：项目作者 Jakub Antalik

Jakub Antalik

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