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:

// Use full screen frame (not visibleFrame) to include the menu bar / notch area
let screen = NSScreen.main!
let x = screen.frame.origin.x + (screen.frame.width - totalWidth) / 2
let y = screen.frame.origin.y + screen.frame.height - totalHeight

Using screen.frame (not screen.visibleFrame) is critical -- visibleFrame excludes the menu bar area where the notch lives.

Reference Files

• references/NotchWindow.swift -- Drop-in NSPanel subclass with show/hide and positioning
• references/NotchShape.swift -- The Dynamic Island shape with animatable corner radii

Step-by-Step Integration

1. Add the NotchShape

Copy references/NotchShape.swift. This is a SwiftUI Shape with two configurable corner radii:

• topCornerRadius (default 10) -- the concave "ear" curves at the top that mimic the hardware notch's inverse corners
• bottomCornerRadius (default 16) -- the standard convex rounded corners at the bottom