mok

Avatar Motion System

動く3Dアバター。
ファイルひとつで、どんなサイトにも。

ひとりずつ違う顔

Every face, different.

顔の形は19種類、小物は17種類、色は14色。単色とグラデーションも選べます。どう組み合わせても、ひとつのスタイルにまとまります。

見つめている

We see you.

マウスを動かすと、みんながそちらを見ます。先に目が向いて、あとから顔がついてきます。

いつも動いている

Never still.

表情の動きは17種類。まばたき、首かしげ、きょろきょろ、にっこり……気分に合わせて選ばれます。忙しい顔は考えこみ、ひまな顔はうとうと。

どんな背景でも

Any background.

アバターが背景にまぎれそうなときは、自動でふちを付けます。明るい背景には黒、暗い背景には白。

単色かグラデーション

Solid or gradient.

どの色にも質感が2つ。グラデーションは上が濃く下が淡く、内側にほのかな光。目も下に向かって淡くなります。

本物の立体

Real 3D.
Flat silhouette.

どの顔も本物の立体なので、どの角度から見ても形がくずれません。描くのは一枚のシルエットだけ。数百の点で、軽くて速い。

Revolve回転体 · ボール
Balls球の組み合わせ · くも
Box角丸の立方体 · しかく
Puffy押し出し · ほし

つくる

Make yours.

見た目は小さな 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