jeremy-prt/bloub

这是什么？

核心功能

• 01无需动画库，即可让一个 SVG 主体在 14 种状态间变形。
• 02两个白色眼睛图形独立动画，叠加在主体上。
• 03提供 8 种身体形状、12 种颜色和 16 种静止表情。
• 04内置时间线编辑器，可排列状态并设置停留时长。
• 05支持导出 SVG、PNG、动画 GIF，以及时间线的 MP4。
• 06任意时间点的渲染结果确定，可用于测试和缩略图。

适用场景

• 在 Vue 应用中加入动态机器人头像，无需引入动画库。
• 学习如何用纯 SVG 实现基于测量数据的形状变形。
• 生成动画 GIF 或 MP4 头像片段，用于演示或社交媒体。
• 为头像状态制作静态展示图，便于设计评审。

快速上手

1. 1

   使用 pnpm 安装依赖

   pnpm install
2. 2

   启动开发服务器，然后打开 localhost:5190

   pnpm dev

使用前须知

• !该项目是对 x.ai 机器人头像的视觉模仿，与 x.ai 无关联，也未获其认可。
• !代码采用 MIT 许可，但所模仿的设计不在该许可范围内。

标签

常见问题

bloub 是什么？

用 SVG 和 Vue 复刻 x.ai 机器人头像，一个黑色图形在 14 种状态间变形，眼睛独立动画。 bloub 用一组 SVG 图形复刻 x.ai 机器人头像：一个黑色实心主体在 14 种状态之间变形，另外两个白色眼睛图形各自独立运动。项目基于 Vue 3、Vite、TypeScript 和 Tailwind 4 构建，动画部分不依赖任何动画库。

bloub 可以免费使用吗？用的什么许可证？

bloub 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

bloub 还在维护吗？

半年内有更新。bloub 最近一次提交是在 2026年8月17日。

bloub 适合用来做什么？

在 Vue 应用中加入动态机器人头像，无需引入动画库。 学习如何用纯 SVG 实现基于测量数据的形状变形。 生成动画 GIF 或 MP4 头像片段，用于演示或社交媒体。 为头像状态制作静态展示图，便于设计评审。

bloub 怎么安装和运行？

使用 pnpm 安装依赖: pnpm install 启动开发服务器，然后打开 localhost:5190: pnpm dev

在哪里获取 bloub？

源代码和安装说明在 GitHub 上：https://github.com/jeremy-prt/bloub