Toffi, a stream avatar that reacts to the keyboard and mouse
A demo project in the spirit of the VeadoTube avatars I make for streamers: the character sits at a keyboard and mouse, presses W/A/S/D and their combos, clicks LMB and RMB, blinks and talks. It runs right in the browser: here the mouth opens while Space is held — on air, the microphone does that.
- 54 KB
- the whole module
- 7
- on-screen buttons
- 0
- external dependencies
The interactive demo did not start in this browser, so a static version is shown.
The task
Show how a stream avatar works, live: so a streamer can press the keys and see how their character would look on air.
What I did
- Layered vector art: separate states for paws, keys, eyes and mouth
- W+A and W+D get their own poses; arrow keys work as aliases, so does the Russian layout
- The keyboard is captured only on hover or focus, so the page stays usable
- On-screen buttons for phones; with reduced motion, idle movement is switched off
Proof
- A live demo on this page
- A similar avatar for a streamer in VeadoTube: W/A/S/D, LMB and RMB, mouth driven by the mic, blinking — the client set it up himself from my instructions
Materials
2 · Click any item to enlarge it
What else you can hand over to me
- Animated stream screens: starting soon, break, be right back
- Promo videos for venue screens from your materials
- An ad overlay on top of video
- Editing, voice sync and light audio clean-up
- A 2D stream avatar that reacts to the keyboard and voice
Pine House: a promo film — edit, colour and sound
39 seconds cut to music: the cuts land on the downbeats, the drawing turns into the house, and the whole edit can be taken apart right on the page