Dragon pet for MacBook
A pixel-y pet that sleeps, wanders, eats, breathes fire, and brews potions while I work.
Year
2026
Product
Virtual Pet
Purpose
Fun AI Experiment
Duration
1-2 Days
Inspiration
A little work buddy that could quietly hang around while I worked.
I wanted to make a Tamagotchi-style pet and find an interesting little space for it to live, somewhere that wouldn’t get in the way of my work on screen, but could still feel like a cute little work buddy.
The Touch Bar felt perfect. Even though Apple discontinued it in newer MacBook models, it felt like a fun little space to experiment with.
Process
Final RESULT
How the experience turned out
The idea was to make something playful that could stay around without becoming a distraction. Here’s the finished experience.
Optimisation
Things I kept & skipped
01
Motion prototyping with stills + a state machine
The idea: Small motion moments like empty states, loading, success, micro-interactions, usually mean a motion-designer handoff, which takes days. I wanted to prototype them myself without touching a timeline tool. The method landed as stills + a small state machine in code, wired up with Claude Code. Each state (idle → hover → tapped → success) points at its own frame sequence, and the state machine handles when to play what.
Why I kept it: It is much faster and because it's driven by a state machine. It is driven by product state which gives me real control over how it behaves based on what's happening in the app.
The same pipeline can be reused for small animations and micro-interactions in visual design work across products.
02
AI frame interpolation with RIFE
The idea: A big part of this project was seeing how far I could go with just an AI pipeline. Each animation was only 6–10 frames, enough to read, but not exactly smooth. Instead of hand-drawing more, I tried RIFE, a model that takes two frames & invents the ones between them. On paper: double the frame count, smoother animation, zero extra art.
Why I skipped it: RIFE is designed for video, where two consecutive frames are almost identical with just a bit of motion between them. My sprite frames had much bigger pose changes & the model couldn't invent a clean in-between from two very different frames. It just blurred them together. Wrong tool for the pose deltas I was working with.
So I reverted to the original frames and hand-tuned the frame rate instead.
Scale
What's Next
A sibling desktop version that lives at the bottom of the screen, opening up more functionality and room for the character to grow. It could react to notifications, surface reminders, celebrate completed tasks, take small breaks with you, and develop more interactions that make the dragon feel like an actual desktop companion.
Scale
Inspired by Grace Avery's Touchbar Pet
Big ideas deserve big screens.
Try viewing on desktop.
Big ideas deserve big screens.
Try viewing on desktop.