DEV Community

Cover image for Turf: a desktop pet that watches the match so you don't have to
Abhinav Prasannakumar
Abhinav Prasannakumar

Posted on

Turf: a desktop pet that watches the match so you don't have to

DEV Weekend Challenge: Passion Edition Submission

This is a submission for Weekend Challenge: Passion Edition

What I Built

Turf, a macOS desktop pet, a little football headed mascot that lives on your desktop and reacts to what's happening around it. It's not just decoration though, Turf follows live football match data, and when the team you're watching scores, Turf reacts in real time with animation and voice commentary, so you can get the update without pulling out your phone or tabbing away from work.

Turf also reacts to your desktop itself. Create a file or folder and it celebrates like a goal. Delete something and it pulls out a red card. It tracks your mouse to turn and face you, and dribbles when you're typing, so it feels alive even when there's no match going on.

The idea came from a pretty specific moment, you're deep in work, a match you care about is happening somewhere in the background of your day, and you keep almost reaching for your phone just to check the score. I wanted something that does that checking for you and just tells you, without pulling you out of what you're doing.

Demo

Code

GitHub logo apk-official / Turf-Desktop-pet-for-the-football-fan

A macOS desktop pet that reacts to live football matches and your file activity, built for the DEV Weekend Challenge: Passion Edition ⚽

Turf ⚽

Turf

A small desktop pet for the football fan who can't watch the match right now.

This is a submission for Weekend Challenge: Passion Edition

What I Built

Turf is a macOS desktop pet, a little soccer ball headed mascot that lives on your desktop and reacts to what's happening around it. It's not just decoration though. Turf follows live football match data, and when the team you're watching scores, Turf reacts in real time with animation and commentary, so you can get the update without pulling out your phone or tabbing away from work.

On top of that, Turf reacts to your desktop itself. Create a file or folder and it celebrates like a goal. Delete something and it pulls out a red card. It also tracks your mouse to turn and face you, and dribbles when you're typing, so it feels alive even when there's no match…

How I Built It

Turf runs on Electron, React, TypeScript, and Vite. The window is transparent and frameless, sitting on top of the desktop so the pet actually feels like it's there rather than living inside a normal app window.

Some of the parts I liked figuring out:

Sprite animations (idle, dribble, talk, red card, goal) are all rendered on canvas frame by frame, with control over the timing of each frame so nothing feels laggy. Turf also watches your Desktop folder with chokidar, creating or deleting a file triggers the matching reaction. Match data comes from football-data.org, polled with rate limit handling so it never gets throttled mid match.

For the voice, I used ElevenLabs. When a goal happens, Turf doesn't just animate, it actually says something, ElevenLabs generates short commentary lines so it has a real voice instead of just reacting silently. Since that only fires during an actual live match, I also added a "Simulate Goal" option in the menu that runs the exact same pipeline on demand, so the feature isn't locked behind whether a match happens to be live.

Turf also tracks your mouse to turn and face you, and picks up on global keystrokes to trigger a dribble animation while you type, so it reacts to you even outside of match moments.

Honestly the hardest part wasn't the football logic, it was making the pet feel alive. Getting animation timing right, keeping the transparent window behaving on macOS, and syncing state between the main process and renderer took a lot more back and forth than I expected.

A little backstory

Around the time I first got into using a computer, it was a Windows XP desktop with a few Flash games on it. One of them had Felix the Cat, and that little character has randomly popped into my head every now and then over the years. When I started seeing people build desktop pets recently, that memory came right back, and I knew that's the direction I wanted to take this challenge. I just wanted mine to actually be useful too, for someone who's a football fan stuck working, who can't watch the match but wants a quick update without constantly checking their phone.

Prize Categories

  • Best Use of ElevenLabs

Top comments (0)