Bloub Bot

Bloub 头像

收藏自 bloub 的可变形 SVG 头像：纯 TypeScript 引擎 + React 壳。演示支持纯黑/纯白背景。

交互方式

默认纯黑背景 + 银色球体。可切换纯白背景（黑球）、原版形状与动画状态。眼睛为身体镂空，沿用 bloub 原版引擎。

import { BloubBot } from "@/components/ui/bloub-bot"

export function Demo() {
  return <BloubBot state="idle" size={240} />
}

参数	类型 / 默认值	说明
`size`	`number`280	显示边长（像素）。
`shape`	`string`"cercle"	外形 id：cercle、galet、squircle、capsule、triangle、hexagone、nuage、goutte。
`color`	`string`"encre"	身体颜色 id（encre、bleu 等）。
`expression`	`string`"neutre"	静息表情 id。
`paper`	`string`"#f9f9f9"	眼睛洞后面露出的纸色/背景色。
`state`	`string`"idle"	动画状态 id：idle、wink、orbit、burst 等。
`playing`	`boolean`true	是否推进时间；false 时停在当前帧。
`frozenAt`	`number`	固定到状态内某一秒，关闭动画循环（适合缩略图）。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxtailwind-merge