3分钟上手thinking-orbs：React项目中添加AI加载动画的完整快速开始教程

3分钟上手thinking-orbsReact项目中添加AI加载动画的完整快速开始教程【免费下载链接】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-orbsthinking-orbs是一款专为 AI 与 Agent 界面打造的点阵「思考球」加载动画组件库。它内置 9 种精心调校的动画状态、2 种独立设计的尺寸并自动适配深色/浅色主题——只需在 React 项目中放入一个组件就能让你的 AI 助手拥有会动的思考状态。 thinking-orbs 是什么想象你的 AI 聊天机器人正在回复用户。普通的转圈 loading 只能告诉用户在忙而 thinking-orbs 能区分具体在干什么searching搜索中扫描线扫过点阵地球solving求解中条纹打乱后又咔哒归位listening聆听中波形滚过经纬环️connecting连接中星座般的节点自动连线还有 working / weaving / composing / breathing / shaping 等 9 种状态所有动画基于纯 2D Canvas绘制——不用 WebGL、不用滤镜在 Chrome、Safari、Firefox 中渲染效果完全一致低端设备也流畅。项目核心组件实现在 src/ThinkingOrb.tsx。 三步安装与运行前提你的 React 项目版本 ≥ 18见 package.json 中的 peerDependencies。第 1 步安装依赖npm install thinking-orbs第 2 步引入组件import { ThinkingOrb } from thinking-orbs;第 3 步渲染第一个 AI 加载动画function Status() { return ThinkingOrb statesearching size{64} /; }就这么简单——一个组件零配置跑起来了。 9 种状态怎么选每种状态对应 Agent 工作流中的一个动词让动画成为状态说明的一部分状态动画描述适用场景working粒子沿倾斜轨道运行通用忙碌中searching扫描线扫过点阵地球检索文档/网络solving条纹打乱后归位推理计算listening波形滚过环带语音/输入监听connecting星座自动连线调用外部工具weaving三股线绕球编织多步任务编排composing多带飘带波动生成内容breathing圆环缓慢形变空闲/等待shaping圆→三角→方形变形结果整形9 种状态与动画模式的完整对应关系定义在 src/types.ts每格动画的调校参数速度、点数、点径则烘焙在 src/presets.ts 中。 两个尺寸不是缩放是两套设计thinking-orbs 只内置64和20两个尺寸但它们不是简单缩放而是各自独立的调校方案size{64}聊天头像尺度——点更密、细节更丰富size{20}行内文字尺度——点更粗、速度更快小尺寸下依然清晰ThinkingOrb stateworking size{64} / {/* 头像位 */} ThinkingOrb stateworking size{20} / {/* 嵌在句子里 */} 深浅色主题自动跟随无需操心这是很多组件库的痛点thinking-orbs 直接解决themeauto默认值按三层逻辑实时解析主题祖先元素上的data-themedark|light属性或dark/lightclassTailwind / shadcn 惯例通过 MutationObserver 实时监听否则跟随系统prefers-color-schemeOS 切换主题时立即响应SSR 安全——画布只在客户端渲染主题解析后才落笔。想固定配色时也可以显式指定themedark浅色点配深色背景或themelight深色点配浅色背景。主题解析逻辑见 src/theme.ts。⚙️ 进阶属性速查除了state、size、theme还有几个实用属性ThinkingOrb statesolving size{20} speed{1.5} // 速度倍率 paused{false} // 冻结在当前帧 aria-label正在分析仓库… // 覆盖默认无障碍标签 /其余canvas属性className、style、data-*全部透传方便融入现有布局。完整属性签名见 src/types.ts。✅ 内置的无障碍与性能细节这些免费能力自己手写往往要费一番功夫♿roleimg 按状态自动生成的aria-label 尊重prefers-reduced-motion减弱动效用户看到静态代表帧且仍跟随实时主题⚡ 滚出视口IntersectionObserver或标签页隐藏时自动暂停回到视野再续播——所有实例共享一个时钟相位始终对齐 纯 2D 圆弧绘制无滤镜设备像素比上限 2内存与 GPU 占用极低 自己跑一个交互 Playground想直观感受全部效果仓库自带基于 Vite 的 demo 站源码在 demo/其中 demo/components/Playground.tsx 实现了状态/尺寸/速度三合一的实时调参面板git clone https://gitcode.com/gh_mirrors/th/thinking-orbs cd thinking-orbs npm install npm run dev # 打开本地开发服务 常见场景示例聊天机器人状态行const stateMap { idle: breathing, retrieving: searching, reasoning: solving, generating: composing, } as const; ThinkingOrb state{stateMap[agentPhase]} size{20} /按钮内嵌小尺寸指示器button ThinkingOrb stateworking size{20} / 正在生成回复… /button 项目结构与延伸阅读路径说明README.md官方完整文档src/ThinkingOrb.tsxReact 组件入口时钟、暂停、主题src/presets.ts9 状态 × 2 尺寸的全部调校参数src/engine/Canvas 绘制引擎轨道/地球/魔方/波形等 9 种模式src/theme.ts深浅色自动解析与实时监听spec/orbs-spec.json动画规格导出供原生端移植用ports/react-native/React Native / CanvasKit 移植版小结3 分钟回顾一下npm install thinking-orbs→ 导入ThinkingOrb→ 传state和size你就拥有了一个能区分搜索/推理/聆听的 AI 加载动画并且自动适配深浅色主题、自带无障碍与性能优化。从转圈升级到会思考的指示器只需要一行代码。【免费下载链接】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），仅供参考