Moods that morph
17 moods. Eyes, lids, mouth and posture tween into each other, so a switch is a smooth morph instead of a cut.
mood="idle"Small component. Big personality.
One Svelte component, drawn in pure SVG. Everything on this page is a prop away.
Alive by default
It blinks, breathes and floats, tracks the cursor with little saccades and squishes when you boop it.
Move your mouseColorways for every brand
13 presets, per-color overrides, or plain --mascbob-* CSS
variables.
Voice ready
Pipe audio amplitude into level and the mouth lip-syncs in real time.
Head or full body
10 head shapes, 20 accessories, 8 outfits and shoes.
Tiny and accessible
Pure SVG, zero dependencies. Real button semantics and reduced-motion support.
Build your own in seconds.
Tweak looks and reactions, then take it home as Svelte code, SVG, PNG or a share link.
0 boops · tap it
Talk to it.
It talks back.
Feed any audio amplitude into level and the mouth follows syllable by syllable.
This demo reads your microphone through a Web Audio AnalyserNode, smooths the RMS
and hands it over 60 times a second.
Nothing leaves your device; audio is analyzed locally.
17 moods, one smooth face.
Switch mood and every feature morphs into the new expression. Effects, hands and
floating speed follow along.
Mix and match a whole cast.
Shapes, eyes, accessories, outfits and colorways combine freely. Hover one, it looks back.
Dressed up or dressed down.
The full body starts plain. Add an outfit and shoes when you want the
extra swagger.
Three lines to a new friend.
Install the package, drop in the component and let it react to your app. Types included, nothing to configure.
<script> import { Mascot } from 'mascbob'; let mood = $state('idle');</script><Mascot {mood} body theme="og" onboop={() => (mood = 'love')} /><!-- or restyle with plain CSS -->.brand { --mascbob-eye: #00ffc6; --mascbob-accent: #ff4fd8; }