feat:加上 Vue 学习站与可嵌入机芯
站点按 bloub 三栏做自定义、动画时间线和设置，支持序列导出。 形体只留常见几种并配中文名；动画页右栏拉满时间线旁空位，滚动条隐藏。 机芯补 GROK.create / <grok-bot>，以及暂停冻结。
This commit is contained in:
Edom
@@ -3,53 +3,69 @@
|
||||
Unofficial study of a spring-driven character engine.
|
||||
非官方学习项目，与 xAI / Grok 无关。本仓库只开源机芯，不含角色几何、商标或第三方应用源码。
|
||||
|
||||
登录页那种会眨眼、换情绪、被弹簧拉着走的角色，不是 GIF / Lottie，而是状态机 + 弹簧 + 多边形眼睛。这里把机芯拆开，方便阅读和改。
|
||||
The **site** follows [bloub](https://github.com/jeremy-prt/bloub)’s presentation: a left rail, one character in the middle, Customise / Animations / Settings. The **motion** is ours — springs, 39 states, polygon eyes, overlays, login wrap. Not bloub’s measured 14-state engine.
|
||||
|
||||
## 打开
|
||||
## Running it
|
||||
|
||||
用浏览器打开 [`replica/index.html`](./replica/index.html)。
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
克隆下来默认**看不到完整角色外形**。没有 `replica/geometry-data.js` 时，页面会停在说明态，不会报错崩掉。
|
||||
Then open http://localhost:5191.
|
||||
|
||||
自备几何的接口见 [`replica/geometry.schema.md`](./replica/geometry.schema.md)。把符合接口的文件放到 `replica/geometry-data.js` 即可本地预览。该路径已被 git 忽略。
|
||||
Clone the repo and the chrome still loads. Without `replica/geometry-data.js` the character stays off; the layout does not fall over. Put a file that matches [`replica/geometry.schema.md`](./replica/geometry.schema.md) at `replica/geometry-data.js` (gitignored) to see the bot.
|
||||
|
||||
不要把从商业应用抽出的几何、图标或主包提交到本仓库，也不要再分发。
|
||||
The original lab is still there:
|
||||
|
||||
## 机芯在做什么
|
||||
- [`replica/index.html`](./replica/index.html) — playground + HUD
|
||||
- [`replica/showcase.html`](./replica/showcase.html) — recording layouts
|
||||
- [`replica/embed.html`](./replica/embed.html) — `<grok-bot>`
|
||||
|
||||
- 39 个情绪 / 生命周期状态，每态有眼睛 playlist、眨眼间隔、注视节奏
|
||||
- 弹簧驱动位移、挤压、旋转、眨眼、换形
|
||||
- 眼睛是多边形 morph，不是贴图
|
||||
- 部分状态会切 overlay（thinking / orbit / writing / loading 等）
|
||||
- 登录包装带 `pose.scale`、指针跟随、onboarding 轮换
|
||||
Do not commit extracted geometry, icons, or a third-party app bundle.
|
||||
|
||||
登录页常见参数：`sizePx: 64`，`color: "black"`，`shape: "blob"`。
|
||||
`pjn(n) = n % 2 === 0 ? idle : onboarding[(n-1)/2]`，间隔 1200ms。
|
||||
playground 有几何时从 `curious` 起播；点「登录轮换」才按 `pjn(0)=idle` 重来。
|
||||
## What's on the site
|
||||
|
||||
## 目录
|
||||
The rail switches three views. **Customise** is 18 body shapes, 11 inks and the rest-face playlist. **Animations** is bloub’s timeline editor on our 39 states: drag to reorder, pull a card to set duration, save named cycles in `localStorage`. The right-hand tiles append a block. **Settings** is language (French, English, Chinese) and credits. GIF/MP4 export is not in this tree.
|
||||
|
||||
| 路径 | 内容 |
|
||||
The centre avatar is always `GrokCharacter` in `hold` mode. Tiles paint one frame and stop. Nothing from bloub’s `src/bot/` is in this tree.
|
||||
|
||||
## What the engine does
|
||||
|
||||
- 39 mood / lifecycle states, each with an eye playlist, blink cadence, gaze
|
||||
- Springs on move, squash, spin, blink, shape change
|
||||
- Eyes are polygon morphs, not sprites
|
||||
- Some states switch overlays (thinking / orbit / writing / loading / …)
|
||||
- Login wrap carries `pose.scale`, pointer follow, onboarding
|
||||
|
||||
Login-disk defaults: `sizePx: 64`, `color: "black"`, `shape: "blob"`.
|
||||
|
||||
## Layout
|
||||
|
||||
| Path | What |
|
||||
|---|---|
|
||||
| `replica/index.html` | playground。无几何时显示说明 |
|
||||
| `replica/geometry.schema.md` | `window.GROK_GEO` 接口，不含数据 |
|
||||
| `replica/src/math.js` | 弹簧、插值、多边形 |
|
||||
| `replica/src/tables.js` | 状态表、playlist、弹簧参数 |
|
||||
| `replica/src/pose.js` | 姿态 / 注视 |
|
||||
| `replica/src/tricks.js` | 转圈、跳跃等特技 |
|
||||
| `replica/src/fx.js` | overlay 与粒子 |
|
||||
| `replica/src/eyes.js` | 眨眼、wink、眼睛绘制 |
|
||||
| `replica/src/character.js` | `GrokCharacter` 编排 |
|
||||
| `replica/snap.mjs` | 可选的 headless 快照脚本 |
|
||||
| `src/` | Vue site (bloub-like chrome) |
|
||||
| `replica/index.html` | playground |
|
||||
| `replica/geometry.schema.md` | `window.GROK_GEO` contract, no data |
|
||||
| `replica/src/math.js` | springs, lerp, polygons |
|
||||
| `replica/src/tables.js` | states, playlists, spring constants |
|
||||
| `replica/src/pose.js` | pose / gaze |
|
||||
| `replica/src/tricks.js` | spin, hop |
|
||||
| `replica/src/fx.js` | overlays and particles |
|
||||
| `replica/src/eyes.js` | blink, wink, eye paint |
|
||||
| `replica/src/character.js` | `GrokCharacter` |
|
||||
| `replica/src/api.js` | `GROK.create` / `<grok-bot>` |
|
||||
|
||||
本仓库故意不含：
|
||||
This repo deliberately does not contain:
|
||||
|
||||
- 角色几何（`geometry-data.js`）
|
||||
- 官方图标 / iconset
|
||||
- 从应用包抽出的主包或切片
|
||||
- 解包脚本
|
||||
- character geometry (`geometry-data.js`)
|
||||
- official icons / iconset
|
||||
- unpacked app slices
|
||||
- unpack scripts
|
||||
|
||||
## 许可
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) 只覆盖本仓库里的原创机芯、页面和文档。
|
||||
它不授权任何第三方角色造型、商标或应用源码；那些东西也不在这个仓库里。
|
||||
[MIT](./LICENSE) covers the original engine, site and docs in this repository.
|
||||
It does not grant rights to third-party character art, trademarks or application source; those are not in this repository.
|
||||
|
||||
Site chrome is arranged after bloub’s three-column scene. bloub is MIT; “Grok” and “x.ai” belong to their owners. Not affiliated with either.
|
||||
|
||||
Reference in New Issue
Block a user