mok

Avatar Motion System

3D avatars that come alive.
One file, any website.

Variety

Every face, different.

19 shapes, 17 accessories, 14 colors, solid or gradient. However you mix them, they still look like one family.

Gaze

We see you.

Move your mouse and they all look that way. The eyes get there first, then the head follows.

Motion

Never still.

17 expressions, from blinks and head tilts to looking around and smiling, picked by mood. Busy faces frown in thought; idle ones get sleepy.

Outline

Any background.

When an avatar would melt into the background, it outlines itself: dark on light grounds, light on dark ones.

Finish

Solid or gradient.

Every color comes in two finishes. The gradient runs dark to light with a soft inner glow, and the eyes fade along with it.

Real 3D

Real 3D.
Flat silhouette.

Every shape is a true 3D form that holds up from any angle. What gets drawn is a single flat silhouette: a few hundred points, small and fast.

RevolveRevolved · Ball
BallsSpheres · Cloud
BoxRounded box · Cube
PuffyExtruded · Star

Make

Make yours.

A look is a tiny piece of JSON you keep in your own data. The same JSON draws the same avatar on any site, at any size.

Shape

Accessories stack as many as you like

Color

Install

One file.
Drop it in.

Data and engine live in one file. No libraries, no network requests, nothing stored. You keep the look; Mok just draws it.

1: file, with the data and engine inside
0: dependencies. No framework, no WebGL
60KB: gzipped (177 KB uncompressed)
0: network requests. Nothing stored

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

<!-- No look yet? A fixed default from the user ID -->
<mok-avatar seed="user-1024"></mok-avatar>

<!-- Has a look? It is just 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>

From 9.0 the global is Mok and a single tag does it. Today's ZAvatar keeps working until 10.0.

mok