bloub 是一个用 Vue 3、TypeScript 和 SVG 实现的 x.ai 机器人头像复刻项目。核心特点是不用动画库，通过一个黑色 SVG 形状在 14 个状态之间变形，并用两个白色眼睛形状独立变形来模拟头像表情与动画。项目提供可视化自定义、时间线动画编辑、导出 SVG/PNG/GIF/MP4、多语言界面，并且核心动画引擎是与框架无关、无时钟依赖的纯函数设计，便于测试、暂停、跳转和导出。
适用领域
SVG 动画 / 前端交互 / Vue 组件 / TypeScript / 头像生成 / 形状变形 Morphing / 动态图导出 / UI 动效复刻
配置难度
中等。普通 Vue 开发者可以较快运行和使用组件，但如果要深入修改动画引擎、SVG 形状插值、导出流程或测量数据，需要具备较强的 SVG、几何计算、动画时间轴和 TypeScript 能力。
商业价值
该项目适合用作 SVG 动效、机器人头像、品牌吉祥物或交互式 UI 组件的技术参考。对中国开发者而言，它的价值主要在于学习无动画库的高质量 SVG Morphing 实现、确定性动画引擎设计、前端导出 GIF/MP4 的方案，以及可配置头像组件的产品化思路。不过由于它复刻了 x.ai 的视觉设计，商业落地时更适合作为技术原型或学习资料，而不应直接使用原始外观。
01
技术亮点
- 不依赖动画库，使用 SVG 与 TypeScript 手写实现形状变形
- 核心引擎 src/bot 是 framework-free 和 clock-free，engine.sample(t) 是时间的纯函数，方便测试和确定性渲染
- 支持 14 个测量自参考视频的动画状态，强调高度还原
- 支持 8 种身体形状、12 种颜色、16 种静态表情，并可持久化用户选择
- 内置动画时间线编辑器，可排列状态、设置停留时间并保存结果
- 支持导出 SVG、PNG、GIF、MP4，适合生成设计资产
- 提供 #planche 和 #etat=orbit&stop 等调试 URL，便于查看冻结状态和单状态画面
- 文档较完整，包含架构、测量方法、导出、界面和国际化说明
- MIT 许可证，代码层面使用较宽松
02
目标用户
- 前端开发者
- Vue 3 开发者
- 对 SVG 动画和形状插值感兴趣的开发者
- 需要可定制头像或动效组件的产品团队
- 学习复杂 UI 动效实现的工程师
- 设计工程师和 Creative Coding 爱好者
03
配置要求
- 运行环境需要 Node.js 与 pnpm
- 项目使用 Vue 3、Vite、TypeScript、Tailwind 4
- 没有 ESLint 和 Prettier，主要质量门禁是 vue-tsc，因此提交前应运行 pnpm build
- 视频导出编码器在首次导出视频时才会加载，相关功能可能依赖浏览器能力和网络环境
- 组件可配置 props 包括 size、shape、color、expression、paper、frozenAt、cycle、follow、gaze
- 组件支持 v-model:block、v-model:state、v-model:playing、v-model:elapsed
- 界面语言支持法语、英语和中文
04
适用场景
- 学习如何用原生 SVG 和 TypeScript 实现复杂形状变形动画
- 将 BloubBot 作为 Vue 组件嵌入到网站、仪表盘或交互式页面中
- 生成静态头像 SVG/PNG 或动态 GIF/MP4 资源
- 研究基于时间采样的纯函数动画引擎设计
- 制作可配置的聊天机器人、助手或品牌吉祥物头像
- 参考其时间线编辑器、导出逻辑和国际化实现
05
部署与配置
- 确保本地已安装 Node.js 和 pnpm
- 克隆仓库：git clone https://github.com/jeremy-prt/bloub.git
- 进入项目目录：cd bloub
- 安装依赖：pnpm install
- 启动开发服务器：pnpm dev
- 打开浏览器访问：http://localhost:5190
- 运行测试：pnpm test
- 构建生产版本：pnpm build
06
风险与注意事项
- 该项目复刻 x.ai 机器人头像视觉行为，README 明确说明未获得 x.ai 关联、认可或授权；代码为 MIT，但被复刻的设计本身可能涉及商标、版权或商业外观风险
- 如果用于商业产品或品牌资产，可能存在与 x.ai、Grok 等相关标识混淆的法律风险
- 项目重点是视觉复刻与动效实验，不一定适合作为通用头像系统直接大规模商用
- 没有 ESLint 和 Prettier，团队协作时需要自行补充代码规范工具
- MP4/GIF 等导出功能可能受浏览器性能、编码器加载和资源大小影响
- 动画常量来自逐帧测量，不适合随意重构或四舍五入，否则可能破坏原始视觉效果
2026-08-20
第29名
新收录 · github_search
