macos-notch-ui

macOS Notch UI (Dynamic Island Style)

This skill creates a Dynamic Island-style overlay that extends from the MacBook's hardware notch. The overlay is a transparent floating panel positioned flush against the top of the screen, using a custom shape with concave "ear" curves that blend seamlessly with the physical notch cutout.

Architecture

The implementation has 3 parts:

1. NotchWindow (NSPanel subclass) -- a borderless, transparent, click-through panel at CGShieldingWindowLevel that sits above everything, including the menu bar
2. NotchShape (SwiftUI Shape) -- draws the Dynamic Island silhouette with concave quadratic Bezier curves at the top corners and convex rounded corners at the bottom
3. Your content view -- whatever you want to show inside the notch (status indicators, waveforms, text, icons)

How It Works

The MacBook notch is a black rectangle at the top-center of the screen. By placing a black-filled NotchShape at that exact position at the highest window level, it visually extends the notch area. Content inside the shape appears to "emerge" from the hardware notch.

The key positioning math: