Meet the MON$TER crew. Live.
All 25 MON$TER agents as animated heads. They think, listen, talk, work, celebrate and watch your cursor. Make one talk, lip-sync it to your voice, recolor it, then grab the code.
Tap the head to make it hop. Double tap to spin. Move your mouse and it watches you.
The crew: all 25 agents
Every head is drawn from the MON$TER crew art. Tap a card to load that agent into the playground.
9 moods, one tag
Switch a mood with one line of code and the head blends into it smoothly.
Put a crew member on any page
- Add
<script src="https://monsterdata.ai/assets/monster-heads.js?v=1.0.1" defer></script>once. - Drop in
<monster-head agent="12" state="speaking" track interactive></monster-head>. - Change moods from your app:
head.state = "thinking". Lip-sync any audio withhead.speakFrom(audio)or talk withhead.say("Hi").
FAQ
What are MON$TER Heads?
MON$TER Heads are animated versions of all 25 MON$TER crew agents. Each head has 9 moods (idle, listening, thinking, speaking, working, happy, error, sleeping and money), follows your cursor, hops when tapped and spins on a double tap.
Can a MON$TER head talk?
Yes. Type a line and press Make it talk: the head speaks it with your browser's voice and its mouth moves on every word. It can also lip-sync to any audio clip or to your own voice through the microphone. Microphone audio stays in your browser.
How heavy is it?
One small script with no dependencies. Heads draw on a 2D canvas (no WebGL), pause when scrolled off screen and respect the reduced-motion setting on your device.
How do I put a head on a page?
Add the script tag once, then place a monster-head tag with the agent number and mood you want. The playground on this page writes the code for you.
The crew works for business owners
MON$TER helps companies get paid for the data they already have. See what yours could be worth in 60 seconds.