Building a translucent notch overlay that shows your wallpaper why .glassEffect() doesn’t work, and what does
I spent weeks trying to build a floating “Dynamic Island”-style panel under the Mac notch — one where the desktop wallpaper shows through the bottom. Here’s what I learned, because almost every SwiftUI-first approach fails the same way.
1. .glassEffect() is the wrong tool. It only refracts content inside your own window. It never samples the desktop behind a floating, transparent window. So if your goal is “blur what’s behind MY window” (the wallpaper), it can’t do it.
2. The real recipe is AppKit. Use an NSVisualEffectView with blendingMode = .behindWindow, inside a transparent NSWindow. Set state = .active so it keeps rendering even when the window isn’t key (a floating overlay never becomes key), and a dark material like .hudWindow.
3. Do the shape in AppKit, not SwiftUI. This is the trap that cost me the most: any SwiftUI .clipShape / .cornerRadius / .mask / .shadow on the hosting view forces offscreen rendering → the blur stops sampling the desktop and turns into flat opaque black. Round the corners and draw the bottom fade with an AppKit maskImage (rounded rect + alpha gradient) on the visual effect view instead.
4. Split it into two windows. One opaque black strip that masks the physical notch, and one transparent, centered island (not full width, so the wallpaper stays visible on both sides) that holds the single NSVisualEffectView.
That’s the core of the rendering. Happy to go deeper on any part in the comments.