Notch Motion

Made the MacBook notch more than just a black bar

Comment

💡 Inspiration

The MacBook notch is often seen as a static blackout compromise in the center of the menu bar. We asked ourselves: What if the notch wasn't an obstruction, but an interactive playground?

We wanted to transform the static black bar into a source of daily delight, calm focus, and subtle micro-interactions. Notch Motion was created to bring the macOS menu bar to life with physics-based animations, ambient visualizers, interactive mini-games, and charming pets—all built strictly within the native menu bar boundary without ever intruding on your display workspace.

✨ What it does

Notch Motion is a native macOS menu bar app that turns your camera notch and menu bar into an interactive ambient canvas.

  • 🕹️ Interactive Mini-Games & Animations: Play mini-games around your notch like Ninja Grapple, Space Rescue, Boomerang Bounce, Tug of War, and Magnetic Duel.
  • 🌸 Ambient Nature & Physics Visualizers: Relax with subtle particle visualizers including Cherry Blossom, Fireflies, Soap Bubbles, Snowfall, Autumn Leaves, Raindrops, Aurora Borealis, Sea Wave, and Star Field.
  • 🐾 Animated Companions: Keep animated companions walking and playing along your menu bar, featuring a Bird, Cat, Rabbit, Dog, Panda, and Fox.
  • 💳 RevenueCat Freemium Monetization: Powered by RevenueCat for seamless in-app subscription and lifetime Pro unlocks, complete with top-of-notch confetti celebration on purchase!

🛠️ How we built it

  • Native macOS Stack: Developed natively using Swift, SwiftUI, and AppKit (NSPanel, NSHostingController, NSMenu).
  • Strict Menu Bar Clipping: Built custom SwiftUI Canvas and CAEmitterLayer rendering pipelines mathematically constrained within the 32pt top notch inset (screen.safeAreaInsets.top), guaranteeing zero visual leakage onto the main screen.
  • Monetization Engine (RevenueCat): Integrated the RevenueCat Swift SDK (Purchases) to handle dynamic offerings, instant entitlement verification, and smooth paywall logic for Pro tiers.
  • Observability & Reliability: Integrated Sentry SDK for real-time crash reporting, app hang detection (4.0s threshold), and transaction monitoring.
  • Power & Lifecycle Management: Implemented NSWorkspace sleep/wake lifecycle observers (screensDidSleepNotification, screensDidWakeNotification) to pause animation render loops instantly when display sleeps, maintaining minimal battery footprint on MacBooks.

🔥 Challenges we ran into

  1. Strict 32pt Boundary Constraint: Operating strictly within a 32pt height limit required precise physics math. Ensuring complex animations (falling leaves, grappling ninjas, glowing fireflies) felt dynamic while remaining completely inside the menu bar bounds was a fun rendering challenge.
  2. AppKit & SwiftUI Hybrid Windowing: Displaying borderless, click-through floating panels (.popUpMenu level NSPanel) across dynamic multi-display setups without stealing keyboard focus or interfering with system menus required custom NotchWindow architecture.
  3. Smooth RevenueCat Paywall Integration: Building a native paywall UI that seamlessly fetches RevenueCat packages, formats localized pricing, and dynamically updates entitlement states across menu bar popups.

🏆 Accomplishments that we're proud of

  • Pixel-Perfect Native Aesthetic: Designed to feel like a native macOS feature Apple could have shipped.
  • Ultra-Low Resource Usage: Runs at < 1% CPU utilization when active and 0% CPU when screen sleeps or idles.
  • Complete RevenueCat Flow: Successfully built an end-to-end freemium monetization flow with free core features (Fireflies, Cherry Blossom, Bubbles, Bird, Fox) and Pro unlocks for advanced games and themes.

🎓 What we learned

  • Advanced AppKit window layering, screen safe area inset handling, and SwiftUI integration.
  • Best practices for incorporating RevenueCat SDK into a native macOS menu bar app.
  • How subtle ambient animations can elevate desktop mood without causing cognitive distraction.

🚀 What's next for Notch Motion

  • Custom Sprites & User Themes: Allow users to upload custom pixel art or adjust particle palettes.
  • Notch Audio Feedback: Subtle spatial audio effects accompanying notch interactions.
  • RevenueCat Paywall Experiments: Experimenting with seasonal theme packs, promotional offerings, and dynamic paywalls using RevenueCat webhooks and remote config.

Built With

Share this project:

Updates

Submission history