AI加载动画怎么做？Libraries.dev的thinking-orbs：9种思考状态让等待不再无聊

AI加载动画怎么做Libraries.dev的thinking-orbs9种思考状态让等待不再无聊【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.devAI 应用的用户常常要面对漫长的等待——模型在思考界面却只有一个干巴巴的转圈。Libraries.dev 开源的thinking-orbs就是为 AI 智能体 UI 打造的一套点阵思考球加载动画它内置 9 种手工调校的思考状态动画每种状态都有独立的设计与节奏全部用原生 2D Canvas 绘制无需 WebGL、无需滤镜在 Chrome、Safari、Firefox 上像素级一致低配设备也流畅。为什么普通 Loading 圈不够用传统的圆形进度条只能表达在转但 AI 智能体其实处在不同的工作阶段正在检索资料、正在求解、正在听你说……如果加载动画能映射出智能体当前在做什么等待就从焦虑变成了进度感知。thinking-orbs 正是这样做的每个状态都是一个独立的动画设计而不只是换个图标——状态动画效果适合场景working粒子沿倾斜轨道环绕通用工作中searching扫描线掠过点阵地球搜索、检索资料solving带状粒子打乱后咔哒复位推理、求解listening声波沿纬线环滚动语音输入、语音助手connecting星座般的节点自我连线建立连接、工具调用weaving三股丝线绕球交织多任务编排composing多带缎带起伏流动生成内容中breathing正对圆环缓慢变形待机、深度思考shaping点阵轮廓在圆形→三角→方形间流转构建、塑形9 种状态的完整参数速度、点密度、点大小都在 presets.ts 中每种状态 × 每种尺寸都是独立调校过的而不是简单的等比缩放。快速上手一行代码接入 AI 加载动画安装依赖即可开始git clone https://gitcode.com/gh_mirrors/bo/Libraries.dev npm install thinking-orbsReact 中使用只需一个组件import { ThinkingOrb } from thinking-orbs; ThinkingOrb statesearching size{64} /当智能体从检索切到求解只要换一个state值动画就自动过渡到对应形态——这是它和普通 spinner 的本质区别加载动画成了状态指示器。组件的完整属性定义见 types.ts9 种状态的映射逻辑在 presets.ts。三种尺寸预设不是缩放是重新设计很多动画库把小图标当作大图标缩小结果在小尺寸下糊成一团。thinking-orbs 提供64、32、20三档尺寸其中64px头像级和 20px行内文字级是两个独立设计各自有独立的点数量、点大小和速度32px 则由两者在对数空间插值而来。ThinkingOrb stateworking size{64} / {/* 聊天头像旁 */} ThinkingOrb stateworking size{20} / {/* 嵌在文字里 */}配色上它坚持严格的单色墨点风格theme支持auto/dark/lightauto 模式会先读取祖先节点的data-theme或darkclass兼容 Tailwind / shadcn 约定再回退到系统prefers-color-scheme并且系统切换深浅色时实时跟随无需刷新页面。性能与无障碍细节决定体验这是 thinking-orbs 最工程师审美的部分全部实现在 ThinkingOrb.tsx✨离屏自动暂停每个实例滚出视口IntersectionObserver或标签页切到后台时自动暂停回到视口时相位对齐地恢复——一屏放 20 个动画也不吃 CPU。共享时钟所有实例基于performance.now()同一时钟多个球同时出现时节奏完全同步。♿无障碍就绪roleimg 每个状态默认的aria-label如 Searching…开箱即用系统开启减少动态效果时自动渲染一帧静态代表画面而不是粗暴地空白。低端友好纯 2D Canvas 圆弧绘制无ctx.filter、无 SVG 滤镜、无 WebGL设备像素比上限锁定 2像素成本可控。不止 Web同一套几何三种平台Libraries.dev 的另一个亮点是跨端像素级一致。thinking-orbs 把动画核心抽成了纯几何函数见 engine/registry.tsWeb、React Nativethinking-orbs-native和 iOSThinkingOrbsKit三个端复用同一份几何与同一份 spec 参数spec/orbs-spec.json保证三端渲染出来的点是完全相同的。Libraries.dev一套为 AI 界面而生的组件生态thinking-orbs 是 Libraries.dev 家族的一员——这个开源仓库为 AI 智能体界面提供了一系列精雕细琢的 UI 库border-beam卡片边框流光提示这里有新内容metal-fx金属质感的文字与徽章liquid-gooey液态粘连的卡片与按钮bot-avatars会呼吸的机器人头像voice-glow随语音节奏流动的发光条。每个库都配有在线 Playground 与 Agent 模式——你可以直接对界面说让它更柔和一点由 AI 替你调参再一键复制代码。小结做 AI 加载动画的关键不是转得快而是让等待可见用状态化动画替代通用转圈让界面反映智能体当前阶段为不同尺寸做独立设计而非缩放保证行内与头像级都清晰用离屏暂停 共享时钟控制多实例性能开销默认做好无障碍aria-label、减少动态效果降级一帧。thinking-orbs 把这四点都做到了开箱即用而 MIT 协议意味着你可以放心把它放进任何 AI 产品里。去 packages/thinking-orbs/README.md 查看完整文档让 AI 的思考过程从此动起来。【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考