Koko is an owl now
Redrawing Dúisigh's mascot as an animated owl, and why plain video beat animated WebP by five times.
Koko, the mascot in Dúisigh, used to be drawn in code: shapes on a 200 × 240 grid, with arms and a face that changed per pose. It was cheap and crisp, but it never quite felt alive.
The new Koko is a brown owl in a green hoodie. Same name. Each pose (waving, cheering, thinking, sad, proud and more) is a short animated clip.
The file size problem
The obvious format for a looping animation with a transparent background is animated WebP. For these clips it was about five times bigger than video.
So each pose is now an ordinary H.264 video with a trick: the frame is twice as tall as it looks. The top half is the colour, the bottom half is the transparency as a greyscale mask. On Android a small shader puts the two halves back together on a see-through view; on the website it’s the same idea in WebGL. Each clip ends up around 300 to 600 KB.
There’s always a still image too. It shows until the first frame is ready, and it’s all you get if you’ve turned animations off.
Cutting out the owl
The clips came with a cream background that had to go. The tricky part was the edge: there was a whiter halo round the owl, so a simple cut-out left a pale outline. The script now takes edge colours from inside the owl rather than from the background. The only reliable check was zooming right in on a dark background.
Where it stands
The owl is on the Android app (in review as an update) and on duisigh.com. The iPhone app keeps the old Koko until its first version is through App Review, then gets the same clips.