最近我非常喜欢用 Grok Bot。很大的一个原因是它的小机器人头像动画，流畅丝滑，非常可爱，就像有个生命真的住在里面一样。相比之下，用回 Codex 之类的工具都感觉冷冰冰的。
Personal Agent 大火的当下，Grok Bot 也有不少仿制品，但这些仿制品的头像或是循环播放的几种预制动画，或是一些简单僵硬的视线跟随交互逻辑。没有一个仿制品的动画能有 Grok Bot 这般灵动。因此，也没有一个仿制品能像 Grok Bot 这样打动我。
我不禁好奇，Grok Bot 的动画，到底用了怎样的魔法？
分析对象
我们可以从三个地方找到 Grok Bot 头像的三种不同实现源码：
- Designing Grok Bot for a world of persistent agents：这篇文章是 X AI 博客对 Grok Bot 设计的介绍文章，其中包含的是简化实现，只有 6 种状态和 13 种叠加事件。
- Grok Bot 官网：官网首页有个 mock 的 Grok Bot 窗口演示，Marketplace 也有许多 Grok Bot 头像。检查代码发现官网使用了真实实现的动画引擎，包含完整实现，共 53 种状态、28 个片段、9 个表情。
- Grok Bot 桌面 App：使用的是 Electron，可以解包拿到动画引擎源码。实现与官网基本一致，只有封装和帧率优化上有些区别。
为了方便起见，本文以 Grok Bot 官网内置的引擎作为分析对象。
25 种身体几何 Body
Bot 的身体虽然看起来像是个平面，但你可以发现它旋转时又有 3D 的效果，眼睛也会随着旋转而变形。实际上，身体是各种形状的三维模型。引擎内置了名为 isProof 的方法，开启后就能看到带阴影的 3D 模型本来的样子。
引擎共支持 25 种形状，但并没有直接存储 3D 模型，而是定义了 8 种构造方式，每种构造方式只需指定少量参数就能生成一个 3D 形状。最具代表性的是这两种：
- Revolve：旋转，将一个平面图形绕对称轴进行旋转。这种方式构造了 10 种形状。
- Extrusion：压制，将一个平面图形做成有厚度的徽章，并对边缘进行倒角处理。这种方式构造了 7 种形状。
渲染时，通过正交投影将三维模型投影到屏幕，然后使用纯色填充为 SVG 图形。
每种形状还配置了眼睛定位的参数，包含宽高、间距等基本位置参数，以及不同的眼睛定位方式，例如 front 是贴合平面、wrap 则沿曲面包裹。注意 square 这类形状下，眼睛并非处于正面正方形中心，而是向下偏移一段距离，这是考虑到默认角度下投影后模型厚度带来的视觉偏移。
全部 8 种构造方式、25 种形状如下。你可以在右上角开启 isProof 查看渲染前的效果：
9 种表情 Expression
表情主要决定眼睛的形态。引擎中共定义了 9 种表情，默认的 neutral 是两条眼睛为竖直线，happy 是眼睛变成拱形笑眼，surprised 则是基于 neutral 瞪大眼睛。
在实现上，表情分为两种类型，实现方式分别为：
- 简单眼形：基于 neutral 表情改变宽度、长度、角度、偏移等参数，例如 surprised。
- 曲线眼形：描述眼睛形状的中轴曲线，再定义厚度等参数，例如 happy。
完整的 9 种表情如下：
28 个动画片段 Clip
引擎中定义了 28 个 clip，每个 clip 是可复用的一小段动画。
一个 clip 中会定义若干 track，每个 track 都在一个维度上对机器人进行动画变换。可能包含 6 种 track：
- position：机器人的整体位置。
- rotation：俯仰、转向、歪头。
- squash：横向、纵向的挤压或拉伸。
- scale / zoom：整体缩放大小。
- lids：眼睑闭合程度。
- expression：表情，上述 9 种表情之一，也接受 blink 眨眼指令。
一个 track 通过一系列 keyframe 定义。当播放一个 clip 时，指定的各个 track 会同时开始播放。以 Working_B 这个 clip 为例：
全部 28 个 clip 如下：
13 种形态变换 Morph
在某些状态下，Bot 整个身体会变成某些图形，例如 Thinking 状态下机器人会变成三个圆点。这种形态变换称为 morph。
每个 morph 都是一小段根据时间、变形进度、数学公式生成图形的代码。内置的 morph 共有 13 种：
53 种状态 State
上面定义的表情 expression、动画片段 clip、形态变换 morph 都是确定性的原子形态。现在我们可以将它们进行组合，形成状态 State。
每个状态都根据实际场景进行命名，比如空闲 Idle、工作中 Working、等待中 Waiting。在 Designing Grok Bot for a world of persistent agents 文章的「What are they doing」章节，文章介绍了 Idle、Working、Waiting 等六种状态的机器人动画演示。而查看实际使用的动画引擎源码，可以发现实际上定义的状态多达 52 种。
一个状态包含如下参数定义：
- clips：状态使用的 clip 列表。
- compactClips：小尺寸头像下，状态使用的 clip 列表。
- face：状态期间保持的 expression。
- morph：状态使用的 morph。
- next：状态的 clips 播放完毕后，切换到的下一个状态。
- holdSeconds：切换到 next 前的等待时间。
此处的 clips / compactClips 播放时还引入了一定的随机性：引擎并非完全根据 clips 列表顺序播放，而是先打乱顺序再播放。这样即使同一个状态循环两次，看起来动画也不是相同的。（实际实现判断机制比较复杂，并非所有情况都会 shuffle）
以空闲 Idle 状态为例，clips 数组为：[Idle_B, Idle_B, Idle_D, Idle_B, Idle_A]，包含下面三种片段：
- Idle_B：身体微微膨胀，小幅向左转头，然后小幅向右转头。（这个 clip 出现三次，频率更高）
- Idle_D：看向上方，歪头看向前方，看向右侧，看向右上方。
- Idle_A：看向左上方，看向下方，看向右上方，转一圈。
通过这些 clip 的组合，我们就得到了一个非常自然的、在左顾右盼的小机器人，丝毫不像是在循环播放一段固定动画：
全部 53 种状态如下，你可以选择任意一种状态，查看小机器人的变化。
动作控制 API
除了通过状态控制小机器人，还可以通过一系列显式的 API 控制机器人的动作或姿态：
- 眨眼
blink()。 - 旋转
poke("spin", { turns: 2 })。 - 弹跳
poke("bounce")。 - 点头
poke("nod")。 - 看向某个方向
look(direction)。 - 注视某个坐标
gaze([x, y])。 - 切换到某个表情
setExpression(name)。
结语：Why is quality so rare
Grok Bot 在头像上塞进的整个动画引擎，背后大量的工作，只是为了「让 Bot 动画更灵动一些」，呈现给用户的只是产品体验里这么小的一个细节。可见 Grok Bot 团队对产品质量的重视。
而一众千篇一律的 Personal Agent 模仿品，或许能快速复制所有功能，但无法复制这种经过设计和打磨得到的 quality。
我想用 Linear 的《Why is quality so rare》来结尾：
The cycles of technology always drive us toward prioritizing speed and cheapness. We forget the craft. We stop paying attention to quality. And while we can’t stop these shifts, we also don’t have to surrender to them.
Quality is a choice we can make every day.
We can choose to care and put it in our work.
We can seek that feeling of rightness.
It starts with an individual. It can scale through teams and companies, but it always starts with an individual — you. Individuals who seek the quality without a name. Even when it’s not measurable or when the world tells them no.
I genuinely believe it’s the right thing to do, and I know it’s good for business. So If there is one trend I’d like to start, it’s this one. Regardless of what the world around us might tell us, let’s make this choice – let’s keep making things we’re proud to put our names on.