mok

Avatar Motion System

会动的 3D 头像。
一个文件，放进任何网站。

千人千面

Every face, different.

19 种脸型、17 个道具、14 种颜色，再加纯色和渐变。随便怎么组合，都还是同一套风格。

盯着你看

We see you.

鼠标移到哪里，它们就看向哪里。眼睛先到，头再跟着转过来。

一直在动

Never still.

17 个表情动作：眨眼、歪头、东张西望、开心……按心情挑着播。在忙的皱眉想事情，空闲的会犯困。

什么底色都行

Any background.

头像和底色分不开的时候，会自动描一圈边：浅底描黑，深底描白。

纯色或渐变

Solid or gradient.

每种颜色都有两种质感。渐变上深下浅，带一点内发光，眼睛也跟着往下变淡。

真的立体

Real 3D.
Flat silhouette.

每个脸型都照 Figma 卡片里写的做法，建成一个真正的立体。每一帧转好角度，再画成一层纯色剪影：几百个点，又小又快。

Revolve旋转体 · 球
Balls球拼 · 云朵
Box圆角立方体 · 方
Puffy拉伸加圆边 · 星星

捏一个

Make yours.

造型就是一小段 JSON，存在你自己的数据里。同一段 JSON，在哪个网站、多大尺寸画出来都一样。

脸型

道具可以叠着戴

颜色

接入

One file.
Drop it in.

数据和引擎都在一个文件里。不依赖任何库，不发网络请求，不存任何数据。造型由你来存，Mok 只负责画。

1: 个文件，数据和引擎都在里面
0: 个依赖，不用框架，也不用 WebGL
60KB: gzip 之后的大小（未压缩 177 KB）
0: 个网络请求，不读写任何存储

<script src="mok.js"></script>

<!-- 还没捏过的人：按用户 ID 给一个固定的默认造型 -->
<mok-avatar seed="user-1024"></mok-avatar>

<!-- 捏过的人：造型就是一段 JSON -->
<mok-avatar
  spec='{"v":1,"shape":"cat","props":["headphones"],"color":"blue"}'
  mood="busy" follow="closest:.card">
</mok-avatar>

<script src="zavatar.js"></script>
<div id="me" style="width:96px;height:96px"></div>
<script>
  ZAvatar.create(document.getElementById('me'), {
    shape: '猫头', eyes: '圆眼', props: ['头戴耳机'],
    color: '蓝', finish: '渐变', mood: '在忙',
  })
</script>

9.0 起全局对象叫 Mok，一个标签就能用；现在的 ZAvatar 会一直兼容到 10.0。

mok