Žemaitukas — the Samogitian Samoyed

An animatable SVG character written in TypeScript. In light mode it's a fluffy Samoyed wearing the colours of Samogitia (Žemaitija). In dark mode it becomes a storm-lit pagan warrior of Perkūnas (in Samogitia also called Dundulis). It moves its mouth in sync whenever a translator plays audio.

Light mode, friendly	Dark mode, warrior

Live demo: bonsaivaras.github.io/zemaitukas.

What it does

• Samogitian motifs. The bandana and the shield use the Samogitian coat of arms: a black bear on its hind legs with a silver collar, on a red field.
• Dark mode turns it into a warrior. It gets an iron helmet with a Baltic zigzag band, a bear shield, glowing eyes, war paint, bristled hackles, fangs and a snarl. It trembles, and lightning from Dundulis flashes behind it.
• Lip-sync from four sources, so it works with any translator:
  • speak(text, { lang }): browser text-to-speech (Web Speech API)
  • attachAudio(audioEl): any <audio> or <video> element, such as a translation service's output
  • attachStream(mediaStream): live audio, such as a WebRTC call or a microphone
  • setMouthOpen(0..1): drive the mouth yourself, for example from viseme data
• No dependencies and no assets. It's one TypeScript file. Several instances can share a page, and it respects reduced-motion settings.

Usage

import { SamogitianSamoyed, LINES } from './src/samogitian-samoyed';

const dog = new SamogitianSamoyed(document.getElementById('stage')!, {
  theme: 'auto', // follows <html data-theme>, <html class="dark"> and prefers-color-scheme
  onSpeakStart: (text) => console.log(text),
});

dog.speak(LINES[dog.getMode()].lt, { lang: 'lt-LT' }); // Lithuanian
dog.attachAudio(document.querySelector('audio')!);     // translator audio
dog.setTheme('dark');                                  // force warrior mode

API

Method	What it does
getMode() / setMode('friendly' | 'warrior')	Read or force the mode
setTheme('auto' | 'light' | 'dark')	Theme source. Light gives friendly, dark gives warrior
speak(text?, { lang, rate, pitch, voice })	Speak with TTS and lip-sync. Returns a Promise
stopSpeaking()	Cancel TTS
attachAudio(el) / attachStream(stream, { monitor }) / detachAudio()	Lip-sync to audio
setMouthOpen(v | null)	Manual mouth control. null releases it
destroy()	Stop everything and remove the SVG

Notes

• Cross-origin audio needs CORS headers and crossOrigin="anonymous" on the media element. Without them the analyser hears silence.
• Browsers only allow audio after a user gesture, so call speak() or attachAudio() from a click or tap.
• Lithuanian TTS only works if the device has a Lithuanian voice installed. Otherwise the browser falls back to its default voice.

Develop

npm install
npm run build     # type-check, then bundle into dist/index.html
npm run preview   # build and serve dist/

On every push to main, the included workflow (.github/workflows/pages.yml) builds the demo and publishes it to GitHub Pages. To turn it on, go to Settings → Pages → Source: GitHub Actions.

Implementing it with another AI

prompts/gemini-implementation-brief.md is a complete brief you can give Gemini, or any other coding model. It covers the rules, the spec, 15 known pitfalls, an acceptance checklist, and the full reference source.

License

MIT © Aivaras Bonckus