---

Why mascbob?

Install

pnpm add mascbob

Quick start

<script>
	import { Mascot } from 'mascbob';
	let mood = $state('idle');
</script>

<Mascot {mood} theme="og" onboop={() => (mood = 'love')} />

It reacts to the pointer: its head tilts toward the cursor, stroke over its head to pet it, circle around it to make it dizzy, boop it over and over to tickle it (keep going once it's grumpy and its head bursts into confetti), grab its head, an arm or a leg and pull it around like a puppet (it stretches like rubber the further you pull and snaps back with a wobble when you let go), or leave it alone until it gets bored. follow, pet, dizzy, tickle, explode, grab and bored are on by default; startle and shy are opt-in. A plain click is still a boop; dragging only starts after a few pixels. The grab event carries the part (one of GRAB_PARTS); in head-only mode (body={false}) only the head can be grabbed:

<Mascot reactions={['pet', 'shy', 'startle']} onreaction={(e) => console.log(e.type)} />

The full figure is 2:3 (size is the width). Dress it with outfit, shoes and build, or use body={false} for a square head-only avatar:

<Mascot outfit="hoodie" shoes="hightops" theme="bred" mood="happy" size={220} />
<Mascot body={false} size={64} />

Gallery

Moods

idle happy love surprised thinking wink sleepy grumpy sad laughing, plus listening, talking, shy, waving, focused, curious and nervous.

Colorways

og volt ice lilac mocha bred noir mint sunset bubblegum forest midnight shadow, or bring your own palette through theme or CSS variables.

Wardrobe

<Mascot theme="mocha" build="chubby" outfit="overalls" shoes="boots" accessories={['sprout']} />
<Mascot theme="noir" outfit="tie" shoes="hightops" accessories={['shades']} />
<Mascot theme="bubblegum" build="blob" mood="love" accessories={['halo']} />

Props

The value lists grow over time, so the library exports them. Import MOODS, SHAPES, EYE_STYLES, ACCESSORIES, OUTFITS, SHOES, BUILDS and THEMES (an object keyed by theme name) to see every option or to build your own pickers:

import { MOODS, SHAPES, EYE_STYLES, ACCESSORIES, OUTFITS, SHOES, BUILDS, THEMES } from 'mascbob';

Styling with CSS

Every color is also a CSS variable, which wins over the theme prop:

.brand {
	--mascbob-body-light: #fff;
	--mascbob-body-mid: #ffe1f0;
	--mascbob-body-dark: #ffb3d9;
	--mascbob-visor: #1b1030;
	--mascbob-eye: #00ffc6;
	--mascbob-cheek: #ff7ab8;
	--mascbob-accent: #ff4fd8;
	--mascbob-sprout: #6fdc8c;
}

Custom accessories

<Mascot>
	{#snippet accessory({ top })}
		<circle cx="100" cy={top - 10} r="8" fill="gold" />
	{/snippet}
</Mascot>

Voice / lip-sync

Set mood="talking" and feed an amplitude in 0..1 into level. With the Web Audio API that is a few lines:

<script>
	import { Mascot } from 'mascbob';
	let level = $state(0);

	async function listen() {
		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
		const ctx = new AudioContext();
		const analyser = ctx.createAnalyser();
		ctx.createMediaStreamSource(stream).connect(analyser);
		const samples = new Float32Array(analyser.fftSize);
		const tick = () => {
			analyser.getFloatTimeDomainData(samples);
			const rms = Math.sqrt(samples.reduce((sum, s) => sum + s * s, 0) / samples.length);
			const target = Math.min(1, Math.max(0, (rms - 0.01) * 7));
			// Open fast, close slower, so the mouth doesn't flicker between syllables.
			level += (target - level) * (target > level ? 0.5 : 0.2);
			requestAnimationFrame(tick);
		};
		tick();
	}
</script>

<button onclick={listen}>Talk</button>
<Mascot mood="talking" {level} />

Stop the stream's tracks and close the AudioContext when you are done. Without level, talking animates the mouth on its own.

Development

• just lists all recipes
• just dev starts the showcase at http://localhost:5173
• just ci runs type check, lint, tests and the package build
• just readme-art re-renders the images in this README from the real component
• just release cuts a release

License

MIT