thinking-orbs的9种状态全解为Agent的每个动作匹配最贴切的加载动画附选型清单【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbsAI 聊天产品里的加载动画大多还是一个转圈的 spinner——它只回答在忙却不回答在忙什么。开源组件thinking-orbs给出了另一条思路为 AI Agent 界面提供 9 种手工调校过的点阵思维球加载动画每种状态对应 Agent 的一个动作搜索、求解、编织、构图……两个尺寸预设、明暗主题自动适配全部基于原生 2D Canvas 绘制——无 WebGL、无滤镜Chrome / Safari / Firefox 表现一致。为什么 Agent 界面需要有状态的加载动画传统的 loading spinner 对所有等待一视同仁模型在检索上下文、在规划步骤、在生成回答用户看到的都是同一个圈。而 Agent 类产品的等待往往是秒级甚至分钟级的把正在做什么可视化能显著降低用户的焦虑感。thinking-orbs 的设计哲学正是如此9 个状态就是 Agent 的 9 个动词每种动画都有独立的手绘调校点数、点径、速度全部单独烘焙而不是同一素材换个颜色。状态与动画的映射定义在 src/presets.ts 的STATE_TO_MODE中一眼就能看懂。快速上手thinking-orbs 安装与第一步安装只需要一条命令npm install thinking-orbs然后在 React 组件里用一个标签切换任意状态默认状态即workingimport { ThinkingOrb } from thinking-orbs; ThinkingOrb statesearching size{64} /就这么多。组件默认themeauto会自动跟随宿主项目或操作系统切换明暗aria-label也会按状态自动生成如Searching…无障碍不用额外操心。完整的属性说明见 src/types.ts 中的ThinkingOrbProps注释。9种加载动画全解每一种都在讲一个动作下面按 Agent 的典型工作流——感知 → 思考 → 表达——逐一拆解 9 种状态。每个状态的视觉语义都能在 README.md 的 States 章节找到对应描述。感知类Agent 在看和听1.searching—— 扫描经线掠过点阵地球一条扫描经线不断扫过一个由点阵构成的球体像雷达在检索地球上的信息。这是 9 种状态中信息感最强的一个。适用联网搜索、RAG 检索文档、Agent 扫描代码仓库。2.listening—— 波形滚过经纬环一条波形沿纬度环滚动直观传达正在接收输入。适用语音识别、流式读取用户输入、等待上游返回。3.connecting—— 星座自行连线30 个节点在空间中彼此靠近超过距离阈值就自动接线数据包沿边流动——一个自行织网的星座。适用建立会话、连接外部 API / MCP 工具、多 Agent 间握手。思考类Agent 在算4.working默认—— 粒子在倾斜轨道上运转12 条倾斜的轨道、粒子在其上运转背景是淡淡的幽灵轨道线。它表达的是通用忙碌信息量适中、不抢戏。适用不知道在干嘛的兜底状态、推理中、工具执行中。5.solving—— 魔方式打乱再咔哒归位球体表面的点阵带按四分之一圈旋转打乱然后倒放回位、停顿、循环——像解魔方一样咔哒归位。这是 9 种状态里叙事感最强的有过程、有收束、有解出来了的暗示。适用多步推理、代码生成与调试、复杂任务拆解。6.breathing—— 环面缓慢呼吸变形一个正对镜头的环面缓慢起伏变形节奏刻意放慢9 种状态中最慢的一档。它是唯一不忙碌的状态。适用模型长思考间隙、等待长流式输出首 token、让我想想的留白时刻。表达类Agent 在写7.composing—— 多波段缎带起伏一条多波段的缎带在球面上蜿蜒起伏是 9 种状态中密度最高的每帧约 590 个点视觉上的内容量也最足。适用正在撰写长文本、生成文章、代码输出中。8.weaving—— 三股线在球面上编织三股点线在球面周围交错编织编织结构的意象非常明确。适用组装多段内容、把检索结果织成回答、多工具结果合并。9.shaping—— 轮廓在圆→三角→方形之间变形一条点阵轮廓在圆、三角形、正方形之间平滑变形内部做弧长重采样过渡无抖动。适用结构化输出、生成 JSON / 图表 / 表格、格式转换。两种尺寸与自动明暗不用写一行样式thinking-orbs 只发布64 和 20 两档尺寸且它们是两套独立设计而非等比缩放——每档有自己的点数、点径和速度调校见 src/presets.ts 的PRESETS表size{64}聊天头像尺度放在对话气泡旁、状态栏size{20}行内文字尺度嵌在句子中间不突兀主题方面themeauto默认会按三层顺序解析祖先元素的data-theme属性或dark类Tailwind / shadcn 约定→ 系统prefers-color-scheme→ SSR 场景下等客户端解析后再绘制。任何一层变化都会实时重绘切换主题无需刷新页面。解析逻辑在 src/ThinkingOrb.tsx 依赖的 src/theme.ts 中实现。另外两个实用属性值得知道speed{1.5}在预设速度上再乘倍率可整页统一调快/调慢paused冻结在当前帧可做暂停中的任务的静态展示选型清单Agent 的每个动作该配哪种动画直接抄这份表即可9 种 thinking-orbs 状态一次配齐Agent 正在做什么推荐状态为什么贴切联网搜索 / RAG 检索searching雷达扫描的检索感最直接读取用户输入 / 语音转写listening波形 正在听连接 API、工具、其他 Agentconnecting星座连线 建立连接通用忙碌 / 兜底working默认状态中性不抢戏多步推理 / 解题 / 调试solving打乱再归位暗示会解出来长思考间隙、等首 tokenbreathing慢节奏避免空转焦虑生成长文本 / 写代码composing缎带密度最高内容感最强组装、合并多段内容weaving编织 把多股材料合到一起输出 JSON、图表、结构化数据shaping几何变形 赋予结构 一个实用技巧Agent 的任务通常是多阶段的可以让状态随任务阶段流转例如searching → solving → composing。所有实例共享同一时钟切换时节奏是连贯的不会跳帧。无障碍与性能细节决定体验thinking-orbs 在看起来只是个小动画之外做了不少工程化工作减少动态偏好prefers-reduced-motion: reduce时渲染一张静态代表帧不再动画但仍跟随主题自动暂停滚动出视口IntersectionObserver或标签页切后台时自动停掉渲染回来时按共享时钟对齐相位继续渲染成本极低纯 2D canvas 圆弧填充无ctx.filter、无 WebGL设备像素比封顶 2低端设备也流畅相关实现集中在 src/ThinkingOrb.tsx 与渲染引擎 src/engine/纯数学、零依赖可单独通过thinking-orbs/engine引入。项目文件速览组件实现src/ThinkingOrb.tsx类型定义9 状态 / 2 尺寸 / 3 主题src/types.ts状态 × 尺寸调校参数src/presets.ts基础剖面每种模式的点数/半径基数src/engine/profiles.ts9 个模式的绘制器注册表src/engine/registry.ts可交互演示9 状态 × 2 尺寸 主题/速度调节demo/components/Playground.tsx移动端移植React Native / iOS规划PORT_PLAN.md平台无关的规格与金标数据spec/orbs-spec.json、spec/orbs-golden.json想要亲手把玩全部 9 种状态可以拉下仓库跑本地 demogit clone https://gitcode.com/gh_mirrors/th/thinking-orbs cd thinking-orbs npm install npm run dev一句话总结如果你的 Agent 产品还在用同一个 spinner 应对所有等待thinking-orbs 提供了现成的解法9 种有叙事感的加载动画、2 档精调尺寸、自动明暗主题、开箱即用的无障碍支持——把它在忙什么直接画给用户看。【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
