Kineti Pet

Inspiration

Inspiration for the project came from going through the Instagram Reels feed. There I found an application called Anima Engine, which makes animated characters appear on your desktop. It was quite interesting, and I would like to have it on my Mac.

The thing is that Anima Engine is made for Windows only. Other applications that could potentially be an option were either paid or lacked the amount of customization options I needed. Not being satisfied with this solution, I decided to create my own application.

The result is KinetiPet: an application that makes anime styled characters, GIFs, and pixel art sprites appear on your Mac desktop.

What it does

KinetiPet is not only a pet that can be seen on your screen. It is an application to create personalized animation environment and animated characters.

• Animated desktop companions: Show transparent GIFs and pixel art characters moving across your desktop and interacting with edges of your screen.
• Library of characters: Add your own characters in PNG and GIF format, browse library, play animations and control launching size of them.
• Character behavior customization: Change settings like gravity, walking speed, random event occurrence and customize how characters behave.
• Creative tools: Use artificial intelligence to generate images and use Vision framework by Apple for removing backgrounds to make characters.
• MacOS native experience: Written using SwiftUI and AppKit, KinetiPet provides native interface, menubar integration and customization of accent colors.

I want to provide MacOS users with possibility to make their desktops more personal and alive.

How I built it

KinetiPet was created with Swift, SwiftUI, and AppKit. SwiftUI is responsible for the UI itself, and AppKit is necessary for managing low level window properties that are needed for the transparent floating character windows.

Another interesting part of building this app was implementing the movement mechanics. Every character has an instance, and each instance contains a physics loop that includes gravity simulation, falling, walking, screen borders checking, and interaction with the desktop. Also, native image views were used for showing animated GIF images without resetting their animations.

For the creative tools, Vision framework of Apple was used for foreground masking and integration of the cloud image generation service. As for the search function, JavaScript-based API for searching animated characters on Shimeji online repositories was created.

Building this project showed me that making native application on macOS requires more than just good UI design. Window levels, coordinates, animation rendering, file storage management, and macOS applications' windows behavior were all studied during development.

Challenges I encountered

The toughest challenge that I had to overcome is ensuring that the characters move around the desktop as they should.

The drag-and-drop functionality at first introduced some jitters because both window movements and relative coordinates used for gestures conflicted. The work is done to transition to using global mouse coordinates for dragging.

Updating the image views with animated GIFs also caused issues – it led to resetting the animations, while oversized sprites might have been cropped by the window. Separate animation loading from updating views and add additional space around the sprites.

Another issue is related to displaying characters on different virtual desktops and full-screen spaces. The work is done with trying out AppKit panels and macOS window collection features.

These challenges motivated me to explore new aspects of macOS development.

What I learned

KinetiPet has given me hands-on experience with macOS native development, SwiftUI, AppKit, window management on a desktop, animation drawing, physics, and AI-based creative tools.

I've come to realize how even a slight difference in implementation can affect the way the whole app works, particularly when implementing animations and floating windows. I've also learned how to divide a bigger concept into individual systems, test them, and solve arising issues rather than sticking to the initial design.

The most important lesson I've learned is that you don't have to let an idea die just because there is no support for it on your preferred platform.

Where do I go from here?

As far as developing KinetiPet further goes, I plan on increasing reliability of the motion system, adding more ways for character customization, working on the Workshop, as well as increasing user's ability to find, import and create their own animated friends.

On top of that, I will be striving to make the process of packaging and distributing KinetiPet easy for Mac users.

The entire process of KinetiPet creation started with a simple discovery on Instagram.

Built With

• ai
• appkit
• javascript
• macos
• node.js
• swift
• swiftui