mesh-avatar-element

Try the HTML embed

Try expressions, text lip sync and your own avatar files. Without src, the element loads Miko from https://shinshin86.github.io/mesh-avatar-studio/miko.mavatar.

Embed on your page HTML

<script type="module" src="https://cdn.jsdelivr.net/npm/mesh-avatar-element@0/dist/standalone.js"></script>
<mesh-avatar></mesh-avatar>

Read the package guide ↗

Miko

Loading avatar…

Expressions

HTML

<mesh-avatar></mesh-avatar>

JavaScript

Text lip sync

Mouth animation only. No voice is generated.

JavaScript

const el = document.querySelector('mesh-avatar');
el.speak('こんにちは');

Use your own .mavatar

Choose a .mavatar file

Selected: Miko

Files are read in your browser and are not uploaded.

HTML

<mesh-avatar src="/path/to/your-avatar.mavatar"></mesh-avatar>

Set src to the path or URL of the file hosted on your site.