Developer Tools · Product · 2026

codercat

The animated pixel-art Scottish Fold from TeamFlow, extracted into a drop-in component and small SDK: a vanilla call, a custom element and a React component, with 41 animations across five moods. Private project; Macleod Labs mascot.

Year: 2026
Status: Product
Category: Developer Tools
Role: Architect & Lead

Key metrics

Animations

Moods

Tests

Architecture

One sprite sheet and a small player that steps through keyframes by background-position, with bridge poses between clips, a box that is always put back, reduced-motion stills and timers that stop in hidden tabs. The same player drives the vanilla API, the custom element and the React component.

Case study

codercat

Mr Macleod is the Macleod Labs mascot: a pixel-art Scottish Fold who naps on a shelf next to a box he will happily knock off. He started life in TeamFlow, where his mood follows the work on the board. codercat lifts him out into a component any of our apps can use.

It is a private project, built for Macleod Labs products.

What it does

Three ways in: a vanilla createMacleod(el, { mood }) call, a <mr-macleod mood="working"> custom element, and a React <Macleod> component.
Five moods: idle, working and waiting are resting moods he stays in; success and failure are one-offs he plays and then returns from.
41 animations, all in his rotation: one 1.1 MB sprite sheet holds every clip, and each resting mood draws on all of them, weighted so idle still reads sleepy and working reads busy. Bridge poses link every clip, so he never jumps. A TeamFlow mode keeps the original behaviour.
Polite by default: he respects reduced motion with a still pose, and stops every timer when the tab is hidden.
Faithful: the extraction was checked frame by frame against TeamFlow: every pose change identical, zero pixels different.