专为AI对话界面设计的「思考小球」加载动画库

你是否厌倦了千篇一律的旋转圆圈或进度条？当用户等待AI生成回复、搜索资料或构思文案时，一个富有表现力、不干扰阅读的视觉反馈至关重要。Thinking Orbs 是一款轻量、精致、开箱即用的 TypeScript 加载指示器库——它用6种精心手调的「点状球体动画」，直观传达AI当前正在「工作」「搜索」「求解」「倾听」「创作」或「塑形」，让等待过程变得可感知、有温度、不焦虑。

核心功能

• 6种语义化动画状态：每个动效对应一个AI行为动词（如 searching 表现扫描式球面扫掠，solving 展示带“咔哒”回弹感的逻辑重组），告别抽象旋转，提升用户心智模型一致性
• 双尺寸独立设计：非简单缩放！64px 专为头像旁/消息气泡内使用，20px 精准适配行内文本旁（如“正在思考…”后缀），各自优化点数、点径与运动节奏，确保小尺寸清晰可见、大尺寸细节丰富
• 纯Canvas 2D渲染：零依赖 WebGL、CSS滤镜或复杂SVG，兼容 Chrome/Safari/Firefox 最新及旧版，无闪屏、无兼容性陷阱，首屏加载快、运行稳
• 自动明暗主题适配：无需手动切换——根据系统或页面 CSS 变量（color-scheme）智能反色，深色模式下自动亮显，浅色模式下自动暗显，始终高对比、易识别
• 完全静态 & 零副作用：组件无网络请求、不读取本地存储、不收集数据，仅渲染纯净动画，符合隐私敏感型AI产品的合规要求
• MIT协议开源：可自由用于商业项目、SaaS平台、开源工具链，修改、分发、嵌入均无法律障碍

适合哪些人用

前端工程师、AI产品设计师、LLM应用开发者、聊天机器人构建者——尤其适合正在打造专业级AI界面的团队：你需要在保持UI极简的同时，向用户诚实传递AI的实时状态；你拒绝用“加载中…”文字造成认知延迟；你重视跨浏览器一致性，又不愿为动画效果引入庞大依赖（如Lottie或Three.js）。无论是自研大模型前端、Copilot插件、智能客服面板，还是Notion AI类写作助手，Thinking Orbs 都能成为你加载体验的「静默代言人」。

快速上手

安装仅需一条命令：

npm install thinking-orbs

在 React 组件中直接导入使用（支持 TSX）：

import { ThinkingOrb } from 'thinking-orbs';
function ChatStatus() {
  return <ThinkingOrb state="composing" size={64} />;
}

支持全部6个状态：working、searching、solving、listening、composing、shaping，大小仅传 20 或 64 即可，无需额外配置。

项目信息

TypeScript · 615 Star · MIT 开源协议 · GitHub 项目地址

如果你希望用户的每一次等待，都成为一次对AI能力的温柔确认——Thinking Orbs 就是那个既专业又充满人文细节的答案。