3种状态、18个造型：用Libraries.dev的bot-avatars为你的AI Agent做一张会眨眼的脸

3种状态、18个造型用Libraries.dev的bot-avatars为你的AI Agent做一张会眨眼的脸【免费下载链接】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 Agent 产品界面里那个转圈圈的加载图标是不是已经看腻了Libraries.dev 开源库中的bot-avatars组件就是来解决这个问题的它为 React 提供了一组会眨眼的机器人头像——18 种 3D 质感的造型、3 种状态空闲、忙碌、睡觉眼睛会眨、会偷看还能转头、跳跃、翻跟头。全程基于 2D Canvas 绘制不需要 WebGL也没有任何运行时依赖一行组件代码就能接入。为什么你的 AI Agent 需要一张会动的脸AI Agent 的大部分时间里用户看不到它在干什么。bot-avatars 把 Agent 的运行状态变成了一张有生命力的脸状态可视化忙碌时它会开心地蹦跳每跳第三下还会转一圈、咧嘴笑空闲时会转头张望、眨眼没任务时就低头睡觉、缓慢呼吸。交互反馈鼠标靠近时它的眼睛和头会跟着你转点一下它它会原地跳起并翻一个完整的跟头。低成本纯 2D canvas 填充绘制一整屏头像同时跑都轻松流畅服务端渲染也友好画布在挂载后客户端绘制。对新手来说最大的好处是不需要会动画设计也不需要调参默认值就很好看。快速开始一行代码接入 bot-avatars先安装组件npm install bot-avatars然后在你的 React 应用里按 Agent 的忙碌程度切换状态即可import { BotAvatar } from bot-avatars; function Agent({ busy }: { busy: boolean }) { return BotAvatar typeclover state{busy ? working : default} /; }就这么多。默认 64px 大小想放大缩小改size即可想让它开口说话再加一个facemouth属性嘴巴会随状态变化。18 种造型一览总有合你产品的脸bot-avatars 内置 18 种身体造型每一种都自带专属配色完整定义见 packages/bot-avatars/src/presets.ts造型风格造型风格clover三叶草天蓝droid小机器人浅灰、天线圆球flower花朵翠绿mech机甲石板蓝、双天线triangle三角形品红alien外星人青柠色、宽眉square方形天蓝hexagon六边形橙红螺母blob圆点绿色cat猫咪黄油色、双耳ghost幽灵白色cloud云朵浅天空色circle圆形薰衣草紫pill胶囊靛蓝drop水滴青色pebble卵石蜜桃色star星星明黄puddle水洼鲑鱼红不喜欢默认配色color、ink、brightness、saturation四个属性可以把身体改成任意颜色深色身体上眼睛会自动换成浅色不用担心看不清。3 种状态详解空闲、忙碌、睡觉类型定义在 packages/bot-avatars/src/types.ts状态共 3 种default空闲——看向某个角落停几秒再慢慢甩到对面偶尔蹦一个带翻转的大跳。working忙碌——不停蹦跳每第三跳转一圈配上咧嘴笑和偶尔的咯咯大笑。sleeping睡觉——头低下去、眼睛闭上缓慢呼吸偶尔点点头。每个状态其实是一个静止姿势 专属动作内部是一个小骨架偏航、俯仰、翻滚、位置、压扁、眼睛切换状态时会在时间曲线上从旧目标平滑过渡到新目标——永远不会生硬跳变。用户系统开启了减弱动态效果时会自动只画静态姿势尊重无障碍偏好。4 种光照质感让 2D 看起来像真塑料bot-avatars 最有特色的部分实现见 packages/bot-avatars/src/plastic.ts是默认plastic光照把身体轮廓烘焙成一个枕头状高度场每帧按头部姿态求一个受光球面——漫反射、高光热点、天空下的菲涅尔边缘、窗光反射、压饱和的阴影全部逐像素算出来再贴到身上。另外还有三种风格可切换crisp边缘干净利落的高光环矢量风smooth柔和的阴影高光无边缘flat保留厚度但不打光扁平风。光源方向light角度、阴影强度、高光范围等都可以微调但默认值已经调得很甜新手完全可以忽略。细节打磨性能、无障碍与多实例这个组件在生产环境里也够格几个关键设计详见 packages/bot-avatars/README.md全页面所有头像共享一个动画帧循环滚出视口或标签页隐藏时自动暂停像素比封顶 2自带roleimg和按状态的aria-label如 Clover bot, working一行放一排头像时每个实例用自己的 id 派生眨眼随机种子永远不会整齐划一地齐眨想让它们同步给两个实例传同一个seed就行组件本质是canvasclassName、style、onClick等属性全部透传。仓库里自带一个可交互 demopackages/bot-avatars/demo/main.tsx能点击切换状态、观察 18 种造型在三种状态下的完整动画本地跑npm run dev就能看。不止 React还有 iOS 与 React Native 端口如果你的 Agent 产品是全平台的好消息是同一套骨架已经被移植了两次iOSSwiftpackages/bot-avatars/ports/ios/BotAvatarsKit/附 SwiftUI Demo 工程可用 XcodeGen 直接生成构建React Nativepackages/bot-avatars/ports/react-native/bot-avatars-native/同样内置示例工程。想研究造型数据本身18 种身体的矢量路径由 packages/bot-avatars/scripts/gen-shapes.mjs 生成并固化在 packages/bot-avatars/src/shapes.ts。动画引擎 packages/bot-avatars/src/engine.ts 还把模拟器和逐帧绘制函数完整导出想做雪碧图、海报帧都可以直接复用。适合谁、怎么上手做 AI 对话 / Agent 面板的开发者把头像挂在工作区侧边栏或聊天列表state直接绑定任务状态零动画成本需要吉祥物但不会画动画的团队挑一个造型、换个color就是一套统一视觉语言想学习 canvas 动画的人从组件封装 packages/bot-avatars/src/BotAvatar.tsx 一路读到塑料着色器是一份质量很高的学习材料。组件采用 MIT 协议。想动手试试把仓库克隆下来看看 demogit clone https://gitcode.com/gh_mirrors/bo/Libraries.dev进入packages/bot-avatars目录安装依赖、启动 demo你的 AI Agent 的第一张会眨眼的脸三分钟内就能上线 【免费下载链接】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），仅供参考