After seeing https://lo.cafe/notchnook, I was incredibly impressed by the idea and the buttery smooth animations that mimic the iPhone’s Dynamic Island. I wanted to challenge myself to recreate a similar experience using Electron (for possible cross-platform compatibility) and to achieve a satisfying user experience.
Task
Design an Electron app that provides:
Media controls
Buttery-smooth animations
iPhone-like aesthetics
Action
I started by setting up a React and Electron app with a transparent click-through window that floats above all other windows.
To prevent any visual shifting, the window spans the entire top of the screen and manages hover state only on the interactive area. This allows for smooth open, close, and “bounce” animations without worrying about resizing the window itself.
Unfortunately, Apple doesn’t provide a public API for media controls, so I used the unofficial nowplaying-cli tool as a backend to fetch media information and control playback.
I spent hours meticulously refining the animations and easing curves, applying scaling and opacity transforms to transition between views, and perfecting the timing to achieve the exact feel I wanted.
I also introduced scroll up/down listeners to act as gestures for opening and closing the menu.
Haptic feedback was added to vibrate the trackpad when opening the notch.
Result
The performance is not optimal due to using Electron and continuously polling for media information, but I consider this a major success based on my initial goals. The animations are extremely smooth once the app is running, and I am very pleased with the overall user experience.
