3種狀態(tài)、18個(gè)造型用Libraries.dev的bot-avatars為你的AI Agent做一張會(huì)眨眼的臉【免費(fèi)下載鏈接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots項(xiàng)目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev如果你正在做 AI Agent 產(chǎn)品界面里那個(gè)轉(zhuǎn)圈圈的加載圖標(biāo)是不是已經(jīng)看膩了Libraries.dev 開源庫(kù)中的bot-avatars組件就是來(lái)解決這個(gè)問題的它為 React 提供了一組會(huì)眨眼的機(jī)器人頭像——18 種 3D 質(zhì)感的造型、3 種狀態(tài)空閑、忙碌、睡覺眼睛會(huì)眨、會(huì)偷看還能轉(zhuǎn)頭、跳躍、翻跟頭。全程基于 2D Canvas 繪制不需要 WebGL也沒有任何運(yùn)行時(shí)依賴一行組件代碼就能接入。為什么你的 AI Agent 需要一張會(huì)動(dòng)的臉AI Agent 的大部分時(shí)間里用戶看不到它在干什么。bot-avatars 把 Agent 的運(yùn)行狀態(tài)變成了一張有生命力的臉狀態(tài)可視化忙碌時(shí)它會(huì)開心地蹦跳每跳第三下還會(huì)轉(zhuǎn)一圈、咧嘴笑空閑時(shí)會(huì)轉(zhuǎn)頭張望、眨眼沒任務(wù)時(shí)就低頭睡覺、緩慢呼吸。交互反饋鼠標(biāo)靠近時(shí)它的眼睛和頭會(huì)跟著你轉(zhuǎn)點(diǎn)一下它它會(huì)原地跳起并翻一個(gè)完整的跟頭。低成本純 2D canvas 填充繪制一整屏頭像同時(shí)跑都輕松流暢服務(wù)端渲染也友好畫布在掛載后客戶端繪制。對(duì)新手來(lái)說(shuō)最大的好處是不需要會(huì)動(dòng)畫設(shè)計(jì)也不需要調(diào)參默認(rèn)值就很好看?？焖匍_始一行代碼接入 bot-avatars先安裝組件npm install bot-avatars然后在你的 React 應(yīng)用里按 Agent 的忙碌程度切換狀態(tài)即可import { BotAvatar } from bot-avatars; function Agent({ busy }: { busy: boolean }) { return BotAvatar typeclover state{busy ? working : default} /; }就這么多。默認(rèn) 64px 大小想放大縮小改size即可想讓它開口說(shuō)話再加一個(gè)facemouth屬性嘴巴會(huì)隨狀態(tài)變化。18 種造型一覽總有合你產(chǎn)品的臉bot-avatars 內(nèi)置 18 種身體造型每一種都自帶專屬配色完整定義見 packages/bot-avatars/src/presets.ts造型風(fēng)格造型風(fēng)格clover三葉草天藍(lán)droid小機(jī)器人淺灰、天線圓球flower花朵翠綠mech機(jī)甲石板藍(lán)、雙天線triangle三角形品紅alien外星人青檸色、寬眉square方形天藍(lán)hexagon六邊形橙紅螺母blob圓點(diǎn)綠色cat貓咪黃油色、雙耳ghost幽靈白色cloud云朵淺天空色circle圓形薰衣草紫pill膠囊靛藍(lán)drop水滴青色pebble卵石蜜桃色star星星明黃puddle水洼鮭魚紅不喜歡默認(rèn)配色color、ink、brightness、saturation四個(gè)屬性可以把身體改成任意顏色深色身體上眼睛會(huì)自動(dòng)換成淺色不用擔(dān)心看不清。3 種狀態(tài)詳解空閑、忙碌、睡覺類型定義在 packages/bot-avatars/src/types.ts狀態(tài)共 3 種default空閑——看向某個(gè)角落停幾秒再慢慢甩到對(duì)面偶爾蹦一個(gè)帶翻轉(zhuǎn)的大跳。working忙碌——不停蹦跳每第三跳轉(zhuǎn)一圈配上咧嘴笑和偶爾的咯咯大笑。sleeping睡覺——頭低下去、眼睛閉上緩慢呼吸偶爾點(diǎn)點(diǎn)頭。每個(gè)狀態(tài)其實(shí)是一個(gè)靜止姿勢(shì) 專屬動(dòng)作內(nèi)部是一個(gè)小骨架偏航、俯仰、翻滾、位置、壓扁、眼睛切換狀態(tài)時(shí)會(huì)在時(shí)間曲線上從舊目標(biāo)平滑過渡到新目標(biāo)——永遠(yuǎn)不會(huì)生硬跳變。用戶系統(tǒng)開啟了減弱動(dòng)態(tài)效果時(shí)會(huì)自動(dòng)只畫靜態(tài)姿勢(shì)尊重?zé)o障礙偏好。4 種光照質(zhì)感讓 2D 看起來(lái)像真塑料bot-avatars 最有特色的部分實(shí)現(xiàn)見 packages/bot-avatars/src/plastic.ts是默認(rèn)plastic光照把身體輪廓烘焙成一個(gè)枕頭狀高度場(chǎng)每幀按頭部姿態(tài)求一個(gè)受光球面——漫反射、高光熱點(diǎn)、天空下的菲涅爾邊緣、窗光反射、壓飽和的陰影全部逐像素算出來(lái)再貼到身上。另外還有三種風(fēng)格可切換crisp邊緣干凈利落的高光環(huán)矢量風(fēng)smooth柔和的陰影高光無(wú)邊緣flat保留厚度但不打光扁平風(fēng)。光源方向light角度、陰影強(qiáng)度、高光范圍等都可以微調(diào)但默認(rèn)值已經(jīng)調(diào)得很甜新手完全可以忽略。細(xì)節(jié)打磨性能、無(wú)障礙與多實(shí)例這個(gè)組件在生產(chǎn)環(huán)境里也夠格幾個(gè)關(guān)鍵設(shè)計(jì)詳見 packages/bot-avatars/README.md全頁(yè)面所有頭像共享一個(gè)動(dòng)畫幀循環(huán)滾出視口或標(biāo)簽頁(yè)隱藏時(shí)自動(dòng)暫停像素比封頂 2自帶roleimg和按狀態(tài)的aria-label如 Clover bot, working一行放一排頭像時(shí)每個(gè)實(shí)例用自己的 id 派生眨眼隨機(jī)種子永遠(yuǎn)不會(huì)整齊劃一地齊眨想讓它們同步給兩個(gè)實(shí)例傳同一個(gè)seed就行組件本質(zhì)是canvasclassName、style、onClick等屬性全部透?jìng)鳌}(cāng)庫(kù)里自帶一個(gè)可交互 demopackages/bot-avatars/demo/main.tsx能點(diǎn)擊切換狀態(tài)、觀察 18 種造型在三種狀態(tài)下的完整動(dòng)畫本地跑npm run dev就能看。不止 React還有 iOS 與 React Native 端口如果你的 Agent 產(chǎn)品是全平臺(tái)的好消息是同一套骨架已經(jīng)被移植了兩次iOSSwiftpackages/bot-avatars/ports/ios/BotAvatarsKit/附 SwiftUI Demo 工程可用 XcodeGen 直接生成構(gòu)建React Nativepackages/bot-avatars/ports/react-native/bot-avatars-native/同樣內(nèi)置示例工程。想研究造型數(shù)據(jù)本身18 種身體的矢量路徑由 packages/bot-avatars/scripts/gen-shapes.mjs 生成并固化在 packages/bot-avatars/src/shapes.ts。動(dòng)畫引擎 packages/bot-avatars/src/engine.ts 還把模擬器和逐幀繪制函數(shù)完整導(dǎo)出想做雪碧圖、海報(bào)幀都可以直接復(fù)用。適合誰(shuí)、怎么上手做 AI 對(duì)話 / Agent 面板的開發(fā)者把頭像掛在工作區(qū)側(cè)邊欄或聊天列表state直接綁定任務(wù)狀態(tài)零動(dòng)畫成本需要吉祥物但不會(huì)畫動(dòng)畫的團(tuán)隊(duì)挑一個(gè)造型、換個(gè)color就是一套統(tǒng)一視覺語(yǔ)言想學(xué)習(xí) canvas 動(dòng)畫的人從組件封裝 packages/bot-avatars/src/BotAvatar.tsx 一路讀到塑料著色器是一份質(zhì)量很高的學(xué)習(xí)材料。組件采用 MIT 協(xié)議。想動(dòng)手試試把倉(cāng)庫(kù)克隆下來(lái)看看 demogit clone https://gitcode.com/gh_mirrors/bo/Libraries.dev進(jìn)入packages/bot-avatars目錄安裝依賴、啟動(dòng) demo你的 AI Agent 的第一張會(huì)眨眼的臉三分鐘內(nèi)就能上線 【免費(fèi)下載鏈接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots項(xiàng)目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考