Ž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 outputattachStream(mediaStream): live audio, such as a WebRTC call or a microphonesetMouthOpen(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
