thinking-orbs API 完整参考ThinkingOrb 组件 5 大 Propsstate、size、theme、speed、paused终极详解【免费下载链接】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 种尺寸预设、自动适配深色/浅色模式全部基于纯 2D Canvas 渲染无 WebGL 依赖在 Chrome、Safari、Firefox 中表现完全一致。本文以ThinkingOrb组件为核心逐一详解state、size、theme、speed、paused五大 props 的取值、默认值与实战用法帮你在 AI 对话、Agent 工作流中快速落地专业的加载动效。 30 秒上手一行代码接入加载动画安装后只需引入组件npm install thinking-orbsimport { ThinkingOrb } from thinking-orbs; ThinkingOrb statesearching size{64} /组件本质上渲染一个canvas因此所有 canvas 原生属性className、style、data-*等都会自动透传。核心 props 定义见 src/types.ts组件实现见 src/ThinkingOrb.tsx。 ThinkingOrb 全部 Props 一览Prop类型默认值作用stateworking \| searching \| solving \| listening \| connecting \| weaving \| composing \| breathing \| shapingworking选择 9 种动画状态之一size64 \| 2064两种调校过的尺寸预设themeauto \| dark \| lightauto单色墨点配色auto 自动跟随宿主项目speednumber1动画速度倍率pausedbooleanfalse冻结在当前帧styleCSSProperties—内联样式会与尺寸样式合并aria-labelstring按状态自动覆盖每状态默认的无障碍标签除上述外其余canvas属性className、data-*、事件等全部透传。 state9 种动画状态怎么选state决定展示哪种动画9 种状态对应 Agent 可能正在做的 9 件事每种都是独立的几何引擎映射关系定义在 src/presets.tsstate动画描述适用场景working⭐默认粒子沿倾斜轨道环绕通用忙碌、计算中searching扫描子线扫过点阵地球检索、RAG 查询solving色带打乱后咔哒归位推理、解题listening波形穿过纬度环语音输入、流式接收connecting星座自我连线工具调用、API 请求weaving三股线在球面交织多步骤编排composing起伏的多带绶带生成文本、写作breathing圆环缓慢变形思考中、idle 等待shaping点阵轮廓圆→三角→方结构化输出ThinkingOrb statesolving / 每个状态自带默认的aria-label如Working…、Thinking…定义在 src/ThinkingOrb.tsx屏幕阅读器开箱即用。 size64 与 20是两套设计而非缩放size只接受64和20两个值——它们不是简单的缩放关系而是两套独立的设计64默认聊天头像尺度适合对话气泡、状态卡片20行内文本尺度适合嵌入列表、pill 标签。每个尺寸都携带独立的点数量、点大小和速度调校参数烘焙在 src/presets.ts 中。例如working状态在 20px 下点数更少、点更粗、转速更快保证小尺寸下依然清晰ThinkingOrb stateworking size{64} / {/* 聊天区 */} ThinkingOrb stateworking size{20} / {/* 行内文本 */} themeauto 的三层解析机制thinking-orbs 采用严格的单色配色深色背景用浅色墨点浅色背景用深色墨点。theme支持三种取值ThinkingOrb themeauto / {/* 默认自动检测 */} ThinkingOrb themedark / {/* 锁定浅色墨点深色背景用 */} ThinkingOrb themelight / {/* 锁定深色墨点浅色背景用 */}auto模式按以下三层顺序解析且实时响应变化实现见 src/theme.ts祖先节点约定任一祖先的data-themedark|light属性或dark/lightclassTailwind / shadcn 惯例通过MutationObserver监听主题切换按钮生效即刻更新系统偏好回退到prefers-color-scheme订阅 OS 级主题切换事件SSR 安全无 DOM 环境下不会绘制客户端首帧先解析主题再上画布。⏩ speed速度倍率而非绝对速度speed是叠加在每个预设烘焙速度之上的乘数见 src/ThinkingOrb.tsx 中effSpeed baseSpeed * speedThinkingOrb statesolving speed{1.5} / {/* 比默认快 50% */} ThinkingOrb statebreathing speed{0.5} / {/* 更慢更沉稳 */}1默认 预设原速数值越大动画越快可传浮点数精细调节所有实例共享同一个全局时钟调速后依然全局同步、相位一致。⏸️ paused冻结在当前帧paused{true}时动画冻结在当前帧不销毁实例恢复后从原相位继续ThinkingOrb stateworking paused{isLoadingIdle} /适合「任务进入冷却期」「用户点击暂停」等交互场景。♿ 自带的无障碍与性能优化免配置这些能力不需要你传任何 prop组件默认就具备roleimg 每状态aria-label可传aria-label正在分析仓库…覆盖默认文案prefers-reduced-motion动效敏感用户看到一帧静态代表帧且仍跟随实时主题离屏自动暂停滚出视口IntersectionObserver或标签页隐藏时自动停止回到视野按相位恢复——长列表里放 20 个实例也不烧电纯 2D 圆点绘制无滤镜、无 WebGL低端设备同样流畅DPR 上限 2 控制内存。渲染循环与暂停逻辑见 src/ThinkingOrb.tsx各状态几何引擎在 src/engine/ 下按orbits、globe、rubik等模块独立实现。 快速决策清单场景推荐写法聊天消息里的 Agent 状态ThinkingOrb stateworking size{64} /行内 pill 标签ThinkingOrb size{20} /深色海报固定配色ThinkingOrb themedark /强调紧迫感ThinkingOrb statesearching speed{1.5} /任务完成定格ThinkingOrb paused /掌握state选动画、size选尺度、theme跟配色、speed调节奏、paused控开关你就用完了 thinking-orbs 的全部 API——9 种状态 × 2 种尺寸 18 套开箱即用的加载动画让 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），仅供参考