3 min read
Hiding a Cat Behind the Windows Taskbar
How Snaply's mascot peeks over the taskbar without swallowing clicks, photobombing screenshots, or rendering at the wrong size.
Snaply is a tray app. It has no main window and no taskbar entry; it waits in the system tray until you need a screenshot or a file. That's great for staying out of the way, but it also means people forget it's there.
So I gave it a face: a small cat in the bottom-right corner, peeking up over the taskbar. Click it and the drawer opens. Right-click it for a short menu: Open Drawer, Hide Mascot, and Settings. Otherwise it's deliberately still. It doesn't animate on hover, and nothing wakes up when your cursor passes by.
It looks like a small feature. Most of the work went into making it behave.
There's no API for "put this in the taskbar"
Windows doesn't let you place a widget inside the taskbar itself. So the cat is really a small, transparent, always-on-top window resting on the bottom edge of the work area, the part of the screen apps are allowed to use. The work area stops exactly where the taskbar starts, so that edge becomes a ledge for free.
Making it look like it's hiding
A cropped picture of a cat and a cat hiding behind the taskbar are not the same thing. Two details make the difference:
- The visor is drawn taller than the window. The window edge cuts it off, so your brain fills in the rest of the cat behind the taskbar.
- The window is taller than the artwork. Windows refuses to make a window shorter than about 38px, whatever minimum you ask for. So the extra space stays transparent and the visible sliver is pinned to the bottom edge. The artwork decides how much of the cat shows, not the window.
One more gotcha: Chromium remembers zoom levels per origin. A decorative, fixed-size window that inherited a zoom level would render at the wrong scale for good, so the mascot pins its zoom factor to 1 every time it loads.
Don't steal clicks. Don't photobomb.
A window is a rectangle, but a cat isn't. If the whole window caught the mouse, its transparent corners would swallow clicks meant for whatever sits behind them.
So the mascot started out click-through everywhere except the cat itself. The renderer watches the pointer and tells the main process when it crosses the cat's silhouette; only then does the window stop ignoring mouse events.
It also hides itself while you take a capture. It's always on top, so otherwise it would be frozen into every screenshot Snaply takes.
No image files
The artwork is vector, drawn from the reference design instead of exported as a bitmap. It stays sharp at any scale, and the whole app ships with no binary art assets. Even the tray and app icons are generated by a script, make-icons.mjs, on the same 64-unit grid, using a tiny rasteriser built on three shape predicates.
The one compromise
The cat also has a second job: it's the drop target for Snaply's file shelf. Windows skips click-through windows when it looks for somewhere to drop a file, so the mascot window has to be hit-testable. That leaves a small dead patch just above the taskbar where clicks go to Snaply instead of passing through.
It's a trade-off I'm happy with. A cat you can drop files onto is worth a few pixels.