Replace Rectangle mask with Quickshell.Widgets.ClippingRectangle

NotificationBox.qml

@@ -1,4 +1,5 @@
 import Quickshell
+import Quickshell.Widgets
 import Quickshell.Services.Notifications
 import QtQuick
 import QtQuick.Controls
@@ -14,35 +15,21 @@ Rectangle {
     radius: 20
     color: "#181818"
 
-    Image {
+    ClippingRectangle {
-        id: notifIcon
+        antialiasing: true
-        visible: false
         anchors {
             verticalCenter: parent.verticalCenter
             left: parent.left
             leftMargin: 12
         }
+        radius: 8
         width: 40
         height: 40
+        Image {
+            id: notifIcon
+            anchors.fill: parent
             source: notification?.image ?? source
-        layer.enabled: true
         }
-    Rectangle {
-        id: iconMask
-        antialiasing: true
-        layer.enabled: true
-        visible: false
-        anchors.fill: notifIcon
-        layer.smooth: true
-        radius: 8
-    }
-    MultiEffect {
-        anchors.fill: notifIcon
-        source: notifIcon
-        maskEnabled: true
-        maskSource: iconMask
-        maskThresholdMin: 0.5
-        maskSpreadAtMin: 1
     }
     Column {
         id: notifContent

Wall.qml

@@ -17,18 +17,8 @@ Variants {
         screen: modelData
         color: "#222222"
 
-        RectangularShadow {
-            anchors.fill: imageWrapper
-            transform: imageWrapper.transform
-            radius: roundMask.radius
-            blur: 30
-            spread: 10
-            color: "#000000"
-        }
         Item {
-            id: imageWrapper
             anchors.fill: parent
-            layer.enabled: true
             Image {
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectCrop
@@ -37,48 +27,6 @@ Variants {
                     return _source.substring(0, _source.length - 1)
                 }
             }
-            transform: [Scale {
-                origin {x: width/2; y: height/2}
-                xScale: 0.8
-                yScale: xScale
-                NumberAnimation on xScale {
-                    id: scaleAnim
-                    running: false
-                    to: 1
-                    duration: 800
-                    easing.type: Easing.InOutCubic
-                }
-            }, Translate {
-                NumberAnimation on y {
-                    from: 100
-                    to: 0
-                    duration: 500
-                    easing.type: Easing.OutQuint
-                    onFinished: scaleAnim.start()
-                }
-            }]
-            layer.effect: MultiEffect {
-                maskSource: roundMask
-                maskEnabled: true
-            }
-            NumberAnimation on opacity {
-                from: 0
-                to: 1
-                duration: 250
-            }
-        }
-        Rectangle {
-            id: roundMask
-            visible: false
-            antialiasing: true
-            anchors.fill: imageWrapper
-            radius: 40
-            layer.enabled: true
-            NumberAnimation on radius {
-                running: scaleAnim.running
-                to: 0
-                duration: 800
-            }
         }
 
         FileView {