BoopFace GitHub

v0.8.0MIT 开源协议

BoopFace

一个轻量、富表现力的机器人头像组件，适用于 AI Bot、智能体和交互式应用。 基于 SVG 的原生 Web Component，运行时零依赖。

体验完整演示 接入你的项目

可以拖动、按压头像，
或拉一下天线

轻如无物，动如有灵。

45KB超轻量，完整的表情与交互，网络传输只有 45 KB。
0依赖原生 Web Component，任何前端框架都能立刻使用。
188款全部皮肤传输体积 70 KB，用到才加载。
SVG原生 JavaScript 纯矢量渲染，适应不同尺寸界面需求。

更少加载，
更多感情。

只需几十 KB，就能给智能体带来丰富的表情与状态。

  • 对话助手

    类似 ChatGPT、Claude、Gemini、Grok、DeepSeek

  • 编程智能体

    类似 Codex、Claude Code、Cursor、Gemini CLI、OpenCode

  • 常驻智能体

    类似 Grok Bot、ChatGPT dots、Meta Muse、OpenClaw、Hermes Agent

  • 具身智能机器人

    人形机器人、服务机器人、陪伴机器人的脸部屏幕

也适合桌面伙伴、虚拟宠物、数字吉祥物、聊天机器人头像，或者作为 AG-UI 风格界面的视觉反馈层。

让每次等待，都有一点回应。

小表情，大不一样。

把系统状态，变成拟人化的回应。 眼神跟随、弹性拖拽、长按挤压，交互已经内置，轻轻一碰就有回应。 一行代码 avatar.play('success') 就能播放。 点下面任意一个试试。

idle正常

你的界面，有很多面。

从纯色到材质，从安静到活泼。 更多颜色与皮肤，适应更多对话主题。 188 款皮肤，17 个系列，从糖果玻璃到金属、木头、毛毡，各有质感。 纯 SVG 绘制，光线跟随眼动。 一个 skin="705" 就可以换上它的另一面。

逛逛皮肤美术馆

一点代码，一见如故。

01

安装

npm install boopface

也可以从发布页下载 zip，离线使用。

02

放上头像

// 在你的脚本里
import 'boopface';

<!-- 在页面里 -->
<boop-face id="avatar"></boop-face>

不用写初始化代码，它会自己眨眼、待机。

03

跟着智能体变表情

avatar.startWaiting();
// runAgent() 换成你的智能体调用
const ok = await runAgent();
avatar.play(ok ? 'success' : 'failure');

完整用法见 GitHub 上的说明文档。

BoopFace嵌入式设备版v0.1.0

轻巧的 C++ 表情引擎，保留网页版的全部表情、动作与节奏。 现成的固件支持 28 种开发板和屏幕组合。

  • ESP32通用的嵌入式
    开发平台
  • ESP32-S3适合更高性能
    应用场景
  • STM32经典的 32 位
    嵌入式平台
  • 树莓派 Pico小巧灵活的
    开发平台
  • 圆形 TFT常见的圆形
    彩色显示屏
  • AMOLED高对比度的
    彩色显示屏
  • 单色 OLED简洁高效的
    单色显示屏
查看全部支持组合 →

没有板子也能先看效果。 模拟器在浏览器里运行同一套 C++ 引擎，可以预览 32 种屏幕，调好后直接导出设置用于编译。

打开模拟器 查看开发板例程

一点代码，一次新生。

01

安装库

# PlatformIO
lib_deps = BoopFace Embedded

Arduino IDE 在库管理器里搜索 BoopFace Embedded。也可以从发布页下载 zip 导入。

02

调好效果

eyes_settings.h

在模拟器里选好屏幕，调好布局和颜色，导出这个设置文件。

03

编译烧录

// 示意，完整代码见开发板例程
#include <BoopFace.h>
#include "eyes_settings.h"

void loop() {
  eyes.update(millis());
}

现成固件已写好这些，选对应的开发板例程，编译上传就能看到眼睛。

Say hello