macos-notch-ui

Creates a Dynamic Island-style notch overlay for macOS apps using SwiftUI and NSPanel.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill macos-notch-ui-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: macos-notch-ui
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/macos-notch-ui
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill macos-notch-ui-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a Dynamic Island-style UI on macOS requires precise window positioning above the menu bar, a custom shape with concave curves matching the hardware notch, and carefully timed spring animations. This Skill provides the complete implementation pattern so you do not have to reverse-engineer the geometry and animation choreography yourself. ## Core Features & Use Cases - NotchWindow NSPanel: A borderless, transparent, click-through panel at CGShieldingWindowLevel that sits above everything including the menu bar and survives fullscreen spaces. - NotchShape SwiftUI Shape: Draws the Dynamic Island silhouette with concave Bezier ear curves and animatable corner radii for smooth shape transitions. - Show/Hide Choreography: A tuned three-step spring animation sequence that makes content appear to grow out of and shrink back into the hardware notch. - Use Case: Add a recording indicator to a macOS app that emerges from the MacBook notch with a red microphone icon, then collapses back into the notch when recording stops. ## Quick Start Add a Dynamic Island-style recording indicator that extends from my MacBook's notch using the notch window and shape references.

Frequently Asked Questions about macos-notch-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Dynamic Island-style notch UI on macOS?▼

Create a borderless transparent NSPanel at CGShieldingWindowLevel, position it flush at the top-center of the screen using NSScreen frame, and fill a custom SwiftUI shape with concave ear curves in black. Animate the width with a spring to make content appear to emerge from the notch.

How to position a window over the MacBook notch area?▼

Use NSScreen.main.frame instead of visibleFrame, since visibleFrame excludes the menu bar and notch region. Center horizontally with (screen.width - width) / 2 and set the y origin to screen.height - window height so the panel sits flush against the top edge.

Does the notch overlay work on Macs without a notch?▼

You can detect notch presence by checking whether NSScreen safeAreaInsets.top is greater than zero. For non-notch displays like external monitors or older MacBooks, fall back to a floating pill at the bottom of the screen using visibleFrame and a standard floating window level.

Why does my notch window disappear in fullscreen apps?▼

The panel needs the right collection behavior flags. Set .stationary, .canJoinAllSpaces, .fullScreenAuxiliary, and .ignoresCycle so the window survives fullscreen transitions, stays fixed across Spaces, and stays hidden from Cmd+Tab.

How do I animate the notch show and hide transitions?▼

Show by ordering the window front instantly, then toggling visibility on the next runloop tick so SwiftUI can animate the width spring. Hide in three steps: collapse expanded content, set visibility false after 0.25 seconds, then orderOut the window after 0.65 seconds.