Mocha Casa: Building a Desktop Pet on Windows
A deep dive into developing the Mocha Casa Windows desktop pet using Electron and JavaScript, featuring animation sync and window motion techniques.
Stock photo for illustration only, not from the actual event
- Mocha Casa is a Windows desktop companion app built using Electron and JavaScript.
- Creating realistic pets requires synchronizing foot animations with transparent window motion.
- Features a calmer Companion mode and a livelier Active mode for user flexibility.
- Personalized pets are prepared from photos using AI-assisted animation and team review.
Making a digital pet look convincing on a desktop screen is no small feat. While an animal might look natural in a standalone video, walking across an actual desktop workspace often reveals motion discrepancies. The development team behind Mocha Casa, a Windows companion application built with Electron and JavaScript, encountered this exact challenge and published their development notes to share key lessons in motion synchronization, state transitions, and giving users control over a shared workspace companion.
The core intention is to provide a familiar pet beside a user's workspace, especially when real pets cannot be there. This shifts design questions regarding space consumption, movement frequency, and quick hiding options. The client features a calmer Companion mode and a livelier Active mode, allowing users to control size, position, hiding, and restoring. Optional elements like water, movement, custom reminders, and important dates sit alongside the pet, with reminder details securely stored locally on the device.
A critical engineering hurdle is aligning the animation's internal foot movement with the transparent application window moving across the screen. If the window travels at an incorrect speed or phase, the animal appears to skate. Developers found that tracking a supporting paw across multiple frames, rather than judging the overall silhouette, serves as a better diagnostic. Furthermore, Windows display scaling adds complexity, as CSS coordinates and captured physical pixels are not interchangeable without checking current display scales.
Stock photo for illustration only, not from the actual event
Developing desktop pet applications often introduces friction regarding system resource management and operating system window handling. Utilizing web technologies like Electron and JavaScript offers flexibility in user interface creation, yet demands careful handling of rendering performance and coordinate synchronization with native window positions. Solving this by calculating the geometric relationship between window positions and animation frames is essential for ensuring the companion feels natural without disrupting user productivity.
Transition checks between actions, such as moving from active walking to idle or sleep states, required careful visual inspection to avoid abrupt brightness or pose mismatches. Developers noted that comparing the pet near the action boundaries rather than using full-frame brightness averages—which often capture wallpaper variations instead—yielded accurate reviews. A shared action director was implemented to distinguish looping idle states from finite actions, preventing completion events from interrupting unrelated animations currently playing on screen.
For demonstration footage, the team captured the actual Windows client at 1920 × 1080 resolution and 30 fps, maintaining the real taskbar and scaling settings windows appropriately to fit the presentation area. Enlarging tiny captures afterward cannot restore lost details, making comprehensive final video checks essential for ensuring pet visibility, window layering, readable captions, and smooth action transitions.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment