DominikScholz/open-bot-avatar

选用指南

AI 根据 README 整理 · 2026/11/3 13:06:46

使用方式

通过npm包以编程方式使用，支持DOM挂载和SVG渲染；也可通过在线编辑器生成和导入头像。

查看 README 依据

"body": { "path": "M20 20 H80 V80 H20 Z" }, "eyes": { "x": 50, "y": 46, "spacing": 15, "scale": 1 } } ``` `x`, `y`: the eyes' center; `spacing`: the distance between them; `scale`: their size. Check definitions you didn't write with `validateAvatar`, which returns `{ ok: true, value }` or `{ ok: false, errors }`. The rules are in the [contract](docs/avatar-contract.md). ## How it renders The volume is inferred from the outline as stacked cross-sections, drawn as SVG paths in a CSS 3D scene (or projected into one SVG for stills). ## Install ```sh pnpm add open-bot-avatar ```

## Mount an avatar `mountAvatar` fills a square element. ```ts import { getExample } from "open-bot-avatar"; import { mountAvatar } from "open-bot-avatar/dom"; const avatar = mountAvatar(document.querySelector("#bot")!, { definition: getExample("mug")!, color: "#ff6a1a", followPointer: true, }); avatar.update({ mood: "happy" }); // any subset of the options avatar.destroy(); ``` | Option | | | --- | --- | | `definition` | The avatar. Required. | | `color`, `eyeColor` | `#rgb` or `#rrggbb`. Default: `#ff6a1a`, `#151515`. | | `mood` | `"idle"` (default), `"thinking"` or `"happy"`. |

`renderAvatarSvg` returns an SVG string; `avatarFrame` returns the same frame as data, for drawing it yourself. Neither needs a DOM. ```ts import { avatarFrame, renderAvatarSvg, validateAvatar } from "open-bot-avatar"; const result = validateAvatar(JSON.parse(json)); if (result.ok) { const svg = renderAvatarSvg(result.value, { color: "#1fbf68", size: 256 }); const frame = avatarFrame(result.value, { color: "#1fbf68" }); } ``` Both also take `time` (seconds), `motion` (the mood) and `gaze`. ## React There's no React package; copy this component. Other frameworks work the same way.

部署要求

需要Node 22.18+和pnpm进行开发或脚本运行。

查看 README 依据

node packages/core/scripts/avatar-validate.ts --strict my-avatar.json --svg my-avatar.svg ``` Needs Node 22.18+ and pnpm. ## License [MIT](LICENSE)

已知限制

没有专门的React包，需要自行复制组件代码。

查看 README 依据

`renderAvatarSvg` returns an SVG string; `avatarFrame` returns the same frame as data, for drawing it yourself. Neither needs a DOM. ```ts import { avatarFrame, renderAvatarSvg, validateAvatar } from "open-bot-avatar"; const result = validateAvatar(JSON.parse(json)); if (result.ok) { const svg = renderAvatarSvg(result.value, { color: "#1fbf68", size: 256 }); const frame = avatarFrame(result.value, { color: "#1fbf68" }); } ``` Both also take `time` (seconds), `motion` (the mood) and `gaze`. ## React There's no React package; copy this component. Other frameworks work the same way.