Tool · 2025 – present Project 8 of 20
Grace
A pixel-art cat that wanders across a stream.
Visit the site
Verified site status: Up, 37 ms response,
At a glance
- Role
- Author
- Period
- 2025 – present
- Status
- Live
- Technologies
- 6 technologies
Grace is an OBS overlay: a pixel-art cat that wanders across the stream, sleeps, scratches a post and meows at her bowl when she gets hungry. She can be fed and petted with a click or with commands in the Twitch chat.
Technically interesting
- One file. The whole overlay is a single HTML file with a canvas and one dependency, tmi.js for reading the chat. The animation runs on requestAnimationFrame, and pixels stay sharp when scaled up.
- Sound without files. The meow is synthesised with the Web Audio API, so the overlay needs no sound files.
- A state machine. The cat walks, sits, eats, drinks, scratches, begs, jumps and sleeps. As she gets hungrier she looks for her bowl, and when it is empty she begs for a while and then gives up, so she never gets stuck.
- Chat. Once a channel is set in the configuration, she responds to !feed, !water, !pet, !jump and !sleep.
- Sprites from code. I generated the bowls, the scratching post and the sleeping pose with Python scripts (Pillow).
Screenshots
3 screenshots
Built with
- JavaScript
- Canvas
- Web Audio API
- tmi.js
- Python
- Pillow