UI Improvements: Improved Animations & Blur, Fixed Notch Shape, and more!

boringNotch/ContentView.swift

@@ -36,14 +36,15 @@ struct ContentView: View {
     var body: some View {
         ZStack(alignment: .top) {
             NotchLayout()
-                .padding(.horizontal, vm.notchState == .open ? Defaults[.cornerRadiusScaling] ? (cornerRadiusInsets.opened) : (cornerRadiusInsets.closed - 5) : 12)
+                .padding(.horizontal, vm.notchState == .open ? Defaults[.cornerRadiusScaling] ? (cornerRadiusInsets.opened - 5) : (cornerRadiusInsets.closed - 5) : 12)
                 .padding([.horizontal, .bottom], vm.notchState == .open ? 12 : 0)
                 .frame(maxWidth: (((musicManager.isPlaying || !musicManager.isPlayerIdle) && vm.notchState == .closed && coordinator.showMusicLiveActivityOnClosed) || (vm.expandingView.show && (vm.expandingView.type == .battery)) || Defaults[.inlineHUD]) ? nil : vm.notchSize.width + ((hoverAnimation || (vm.notchState == .closed)) ? 20 : 0) + gestureProgress, maxHeight: ((coordinator.sneakPeek.show && coordinator.sneakPeek.type != .music) || (coordinator.sneakPeek.show && coordinator.sneakPeek.type == .music && vm.notchState == .closed)) ? nil : vm.notchSize.height + (hoverAnimation ? 8 : 0) + gestureProgress / 3, alignment: .top)
                 .background(.black)
                 .mask {
                     NotchShape(cornerRadius: ((vm.notchState == .open) && Defaults[.cornerRadiusScaling]) ? cornerRadiusInsets.opened : cornerRadiusInsets.closed)
                 }
                 .frame(width: vm.notchState == .closed ? (((musicManager.isPlaying || !musicManager.isPlayerIdle) && coordinator.showMusicLiveActivityOnClosed) || (vm.expandingView.show && (vm.expandingView.type == .battery)) || (Defaults[.inlineHUD] && coordinator.sneakPeek.show && coordinator.sneakPeek.type != .music)) ? nil : vm.closedNotchSize.width + (hoverAnimation ? 20 : 0) + gestureProgress : nil, height: vm.notchState == .closed ? vm.closedNotchSize.height + (hoverAnimation ? 8 : 0) + gestureProgress / 3 : nil, alignment: .top)
+                .padding(.bottom, vm.notchState == .open ? 30 : 0) // Safe area to ensure the notch does not close if the cursor is within 30px of the notch from the bottom.
                 .conditionalModifier(Defaults[.openNotchOnHover]) { view in
                     view
                         .onHover { hovering in
@@ -284,6 +285,7 @@ struct ContentView: View {
                     )
                     .clipped()
                     .clipShape(RoundedRectangle(cornerRadius: MusicPlayerImageSizes.cornerRadiusInset.closed))
+                    .opacity(musicManager.isPlaying ? 1 : 0.4)
                     .matchedGeometryEffect(id: "albumArt", in: albumArtNamespace)
                     .frame(width: max(0, vm.closedNotchSize.height - 12), height: max(0, vm.closedNotchSize.height - 12))
             }
@@ -303,6 +305,7 @@ struct ContentView: View {
                             )
                             .frame(width: 16, height: 12)
                         }
+                        .matchedGeometryEffect(id: "spectrum", in: albumArtNamespace)
                 } else {
                     LottieAnimationView()
                         .frame(maxWidth: .infinity, maxHeight: .infinity)

boringNotch/components/HoverButton.swift

@@ -10,26 +10,29 @@ import SwiftUI
 struct HoverButton: View {
     var icon: String
     var iconColor: Color = .white;
+    var scale: Image.Scale = .medium
     var action: () -> Void
     var contentTransition: ContentTransition = .symbolEffect;
 
     @State private var isHovering = false
 
     var body: some View {
+        let size = CGFloat(scale == .large ? 40 : 30)
+
         Button(action: action) {
             Rectangle()
                 .fill(.clear)
                 .contentShape(Rectangle())
-                .frame(width: 30, height: 30)
+                .frame(width: size, height: size)
                 .overlay {
                     Capsule()
-                        .fill(isHovering ? Color.gray.opacity(0.3) : .clear)
-                        .frame(width: 30, height: 30)
+                        .fill(isHovering ? Color.gray.opacity(0.2) : .clear)
+                        .frame(width: size, height: size)
                         .overlay {
                             Image(systemName: icon)
                                 .foregroundColor(iconColor)
                                 .contentTransition(contentTransition)
-                                .imageScale(.medium)
+                                .font(scale == .large ? .largeTitle : .body)
                         }
                 }
         }

boringNotch/components/Notch/BoringHeader.swift

@@ -25,7 +25,7 @@ struct BoringHeader: View {
             .frame(maxWidth: .infinity, alignment: .leading)
             .opacity(vm.notchState == .closed ? 0 : 1)
             .blur(radius: vm.notchState == .closed ? 20 : 0)
-            .animation(.smooth.delay(0.2), value: vm.notchState)
+            .animation(.smooth.delay(0.1), value: vm.notchState)
             .zIndex(2)
 
             if vm.notchState == .open {
@@ -67,7 +67,7 @@ struct BoringHeader: View {
             .frame(maxWidth: .infinity, alignment: .trailing)
             .opacity(vm.notchState == .closed ? 0 : 1)
             .blur(radius: vm.notchState == .closed ? 20 : 0)
-            .animation(.smooth.delay(0.2), value: vm.notchState)
+            .animation(.smooth.delay(0.1), value: vm.notchState)
             .zIndex(2)
         }
         .foregroundColor(.gray)

boringNotch/components/Notch/NotchContentView.swift

@@ -19,7 +19,7 @@ struct NotchContentView: View {
         VStack(alignment: coordinator.firstLaunch ? .center : .leading, spacing: 0) {
             if vm.notchState == .open {
                 BoringHeader()
-                    .animation(.spring(response: 0.7, dampingFraction: 0.8, blendDuration: 0.8), value: vm.notchState)
+                    .animation(.spring(response: 1, dampingFraction: 1, blendDuration: 0.8), value: vm.notchState)
                     .padding(.top, 10)
                 if coordinator.firstLaunch {
                     Spacer()
@@ -118,7 +118,7 @@ struct NotchContentView: View {
             }
         }
         .frame(width: calculateFrameWidthforNotchContent())
-        .transition(.blurReplace.animation(.spring(.bouncy(duration: 0.5))))
+        .transition(.blurReplace.animation(.interactiveSpring(dampingFraction: 1)))
     }
 
     func calculateFrameWidthforNotchContent() -> CGFloat? {