Add wallpaper transition effects, courtesy of @Ly-Sec

- Just copied the shaders from noctalia since they're pretty awesome

Common/SessionData.qml

@@ -45,6 +45,7 @@ Singleton {
     property string wallpaperCyclingTime: "06:00" // HH:mm format
     property string lastBrightnessDevice: ""
     property string launchPrefix: ""
+    property string wallpaperTransition: "fade"
 
     // Power management settings - AC Power
     property int acMonitorTimeout: 0 // Never
@@ -114,6 +115,7 @@ Singleton {
                 wallpaperCyclingTime = settings.wallpaperCyclingTime !== undefined ? settings.wallpaperCyclingTime : "06:00"
                 lastBrightnessDevice = settings.lastBrightnessDevice !== undefined ? settings.lastBrightnessDevice : ""
                 launchPrefix = settings.launchPrefix !== undefined ? settings.launchPrefix : ""
+                wallpaperTransition = settings.wallpaperTransition !== undefined ? settings.wallpaperTransition : "fade"
 
                 acMonitorTimeout = settings.acMonitorTimeout !== undefined ? settings.acMonitorTimeout : 0
                 acLockTimeout = settings.acLockTimeout !== undefined ? settings.acLockTimeout : 0
@@ -166,6 +168,7 @@ Singleton {
                                                 "wallpaperCyclingTime": wallpaperCyclingTime,
                                                 "lastBrightnessDevice": lastBrightnessDevice,
                                                 "launchPrefix": launchPrefix,
+                                                "wallpaperTransition": wallpaperTransition,
                                                 "acMonitorTimeout": acMonitorTimeout,
                                                 "acLockTimeout": acLockTimeout,
                                                 "acSuspendTimeout": acSuspendTimeout,
@@ -256,7 +259,6 @@ Singleton {
         saveSettings()
 
         if (typeof Theme !== "undefined") {
-            Theme.screenTransition()
             if (Theme.currentTheme === Theme.dynamic) {
                 Theme.extractColors()
             }
@@ -421,6 +423,11 @@ Singleton {
         saveSettings()
     }
 
+    function setWallpaperTransition(transition) {
+        wallpaperTransition = transition
+        saveSettings()
+    }
+
     function setAcMonitorTimeout(timeout) {
         acMonitorTimeout = timeout
         saveSettings()

Common/Theme.qml

@@ -218,8 +218,10 @@ Singleton {
         CompositorService.isNiri && NiriService.doScreenTransition()
     }
 
-    function switchTheme(themeName, savePrefs = true) {
-        screenTransition()
+    function switchTheme(themeName, savePrefs = true, enableTransition = true) {
+        if (enableTransition) {
+            screenTransition()
+        }
         if (themeName === dynamic) {
             currentTheme = dynamic
             currentThemeCategory = dynamic
@@ -287,7 +289,7 @@ Singleton {
 
     function switchThemeCategory(category, defaultTheme) {
         currentThemeCategory = category
-        switchTheme(defaultTheme)
+        switchTheme(defaultTheme, true, false)
     }
 
     function getCatppuccinColor(variantName) {
@@ -511,6 +513,10 @@ Singleton {
             return
         }
 
+        if (typeof NiriService !== "undefined" && CompositorService.isNiri) {
+            NiriService.suppressNextToast()
+        }
+
         const desired = {
             "kind": kind,
             "value": value,

Modules/Settings/PersonalizationTab.qml

@@ -677,6 +677,33 @@ Item {
                             }
                         }
                     }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 1
+                        color: Theme.outline
+                        opacity: 0.2
+                    }
+
+                    DankDropdown {
+                        width: parent.width
+                        text: "Transition Effect"
+                        description: "Visual effect used when wallpaper changes"
+                        currentValue: {
+                            switch (SessionData.wallpaperTransition) {
+                            case "fade": return "Fade"
+                            case "wipe": return "Wipe"
+                            case "disc": return "Disc"
+                            case "stripes": return "Stripes"
+                            default: return "Fade"
+                            }
+                        }
+                        options: ["Fade", "Wipe", "Disc", "Stripes"]
+                        onValueChanged: value => {
+                            var transition = value.toLowerCase()
+                            SessionData.setWallpaperTransition(transition)
+                        }
+                    }
                 }
             }
 

Modules/Settings/ThemeColorsTab.qml

@@ -208,11 +208,11 @@ Item {
                                         else if (ToastService.wallpaperErrorStatus === "error")
                                             ToastService.showError("Wallpaper processing failed - check wallpaper path")
                                         else
-                                            Theme.switchTheme(Theme.dynamic)
+                                            Theme.switchTheme(Theme.dynamic, true, false)
                                         break
                                     case 3:
                                         if (Theme.currentThemeName !== "custom") {
-                                            Theme.switchTheme("custom")
+                                            Theme.switchTheme("custom", true, false)
                                         }
                                         break
                                 }

Modules/WallpaperBackground.qml

@@ -28,7 +28,7 @@ LazyLoader {
             anchors.left: true
             anchors.right: true
 
-            color: "black"
+            color: "transparent"
 
             Item {
                 id: root
@@ -36,7 +36,22 @@ LazyLoader {
 
                 property string source: SessionData.getMonitorWallpaper(modelData.name) || ""
                 property bool isColorSource: source.startsWith("#")
-                property Image current: one
+                property string transitionType: SessionData.wallpaperTransition
+                property real transitionProgress: 0
+                property real fillMode: 1.0
+                property vector4d fillColor: Qt.vector4d(0, 0, 0, 1)
+                property real edgeSmoothness: 0.1
+
+                property real wipeDirection: 0
+                property real discCenterX: 0.5
+                property real discCenterY: 0.5
+                property real stripesCount: 16
+                property real stripesAngle: 0
+
+                readonly property bool transitioning: transitionAnimation.running
+
+                property bool hasCurrent: currentWallpaper.status === Image.Ready && !!currentWallpaper.source
+                property bool booting: !hasCurrent && nextWallpaper.status === Image.Ready
 
                 WallpaperEngineProc {
                     id: weProc
@@ -49,40 +64,61 @@ LazyLoader {
 
                 onSourceChanged: {
                     const isWE = source.startsWith("we:")
+                    const isColor = source.startsWith("#")
+
                     if (isWE) {
-                        current = null
-                        one.source = ""
-                        two.source = ""
-                        weProc.start(source.substring(3)) // strip "we:"
+                        setWallpaperImmediate("")
+                        weProc.start(source.substring(3))
                     } else {
                         weProc.stop()
                         if (!source) {
-                            current = null
-                            one.source = ""
-                            two.source = ""
-                        } else if (isColorSource) {
-                            current = null
-                            one.source = ""
-                            two.source = ""
+                            setWallpaperImmediate("")
+                        } else if (isColor) {
+                            setWallpaperImmediate("")
                         } else {
-                            if (current === one)
-                                two.update()
-                            else
-                                one.update()
+                            changeWallpaper(source.startsWith("file://") ? source : "file://" + source)
                         }
                     }
                 }
 
-                onIsColorSourceChanged: {
-                    if (isColorSource) {
-                        current = null
-                        one.source = ""
-                        two.source = ""
-                    } else if (source) {
-                        if (current === one)
-                            two.update()
-                        else
-                            one.update()
+                function setWallpaperImmediate(newSource) {
+                    transitionAnimation.stop()
+                    root.transitionProgress = 0.0
+                    currentWallpaper.source = newSource
+                    nextWallpaper.source = ""
+                }
+
+                function changeWallpaper(newPath) {
+                    if (newPath === currentWallpaper.source) return
+                    if (!newPath || newPath.startsWith("#")) return
+
+                    if (root.transitioning) {
+                        transitionAnimation.stop()
+                        root.transitionProgress = 0
+                        currentWallpaper.source = nextWallpaper.source
+                        nextWallpaper.source = ""
+                    }
+
+                    if (root.transitionType === "wipe") {
+                        root.wipeDirection = Math.random() * 4
+                    } else if (root.transitionType === "disc") {
+                        root.discCenterX = Math.random()
+                        root.discCenterY = Math.random()
+                    } else if (root.transitionType === "stripes") {
+                        root.stripesCount = Math.round(Math.random() * 20 + 4)
+                        root.stripesAngle = Math.random() * 360
+                    }
+
+                    nextWallpaper.source = newPath
+
+                    if (currentWallpaper.source) {
+                        if (nextWallpaper.status === Image.Ready) {
+                            transitionAnimation.start()
+                        }
+                    } else {
+                        if (nextWallpaper.status === Image.Ready) {
+                            transitionAnimation.start()
+                        }
                     }
                 }
 
@@ -96,57 +132,172 @@ LazyLoader {
                     }
                 }
 
-                Img {
-                    id: one
-                }
-
-                Img {
-                    id: two
-                }
-
-                component Img: Image {
-                    id: img
-
-                    function update(): void {
-                        source = ""
-                        source = root.source
-                    }
-
+                Rectangle {
+                    id: transparentRect
                     anchors.fill: parent
-                    fillMode: Image.PreserveAspectCrop
-                    smooth: true
-                    asynchronous: true
-                    cache: false
+                    color: "transparent"
+                    visible: false
+                }
 
+                ShaderEffectSource {
+                    id: transparentSource
+                    sourceItem: transparentRect
+                    hideSource: true
+                    live: false
+                }
+
+                Image {
+                    id: currentWallpaper
+                    anchors.fill: parent
+                    visible: true
                     opacity: 0
+                    layer.enabled: true
+                    asynchronous: true
+                    smooth: true
+                    cache: true
+                    fillMode: Image.PreserveAspectCrop
+                }
+
+                Image {
+                    id: nextWallpaper
+                    anchors.fill: parent
+                    visible: true
+                    opacity: 0
+                    layer.enabled: true
+                    asynchronous: true
+                    smooth: true
+                    cache: true
+                    fillMode: Image.PreserveAspectCrop
 
                     onStatusChanged: {
-                        if (status === Image.Ready) {
-                            root.current = this
-                            if (root.current === one && two.source) {
-                                two.source = ""
-                            } else if (root.current === two && one.source) {
-                                one.source = ""
+                        if (status !== Image.Ready) return
+
+                        if (currentWallpaper.source) {
+                            if (!root.transitioning && root.transitionType !== "none") {
+                                transitionAnimation.start()
+                            } else if (root.transitionType === "none") {
+                                currentWallpaper.source = source
+                                nextWallpaper.source = ""
+                                root.transitionProgress = 0.0
+                            }
+                        } else {
+                            if (!root.transitioning && root.transitionType !== "none") {
+                                transitionAnimation.start()
+                            } else if (root.transitionType === "none") {
+                                currentWallpaper.source = source
+                                nextWallpaper.source = ""
+                                root.transitionProgress = 0.0
                             }
                         }
                     }
+                }
 
-                    states: State {
-                        name: "visible"
-                        when: root.current === img
+                ShaderEffect {
+                    id: fadeShader
+                    anchors.fill: parent
+                    visible: (root.transitionType === "fade" || root.transitionType === "none") && (root.hasCurrent || root.booting)
 
-                        PropertyChanges {
-                            img.opacity: 1
-                        }
-                    }
+                    property variant source1: root.hasCurrent ? currentWallpaper : transparentSource
+                    property variant source2: nextWallpaper
+                    property real progress: root.transitionProgress
+                    property real fillMode: root.fillMode
+                    property vector4d fillColor: root.fillColor
+                    property real imageWidth1: Math.max(1, root.hasCurrent ? source1.sourceSize.width : width)
+                    property real imageHeight1: Math.max(1, root.hasCurrent ? source1.sourceSize.height : height)
+                    property real imageWidth2: Math.max(1, source2.sourceSize.width)
+                    property real imageHeight2: Math.max(1, source2.sourceSize.height)
+                    property real screenWidth: width
+                    property real screenHeight: height
 
-                    transitions: Transition {
-                        NumberAnimation {
-                            target: img
-                            properties: "opacity"
-                            duration: Theme.mediumDuration
-                            easing.type: Easing.OutCubic
-                        }
+                    fragmentShader: Qt.resolvedUrl("../Shaders/qsb/wp_fade.frag.qsb")
+                }
+
+                ShaderEffect {
+                    id: wipeShader
+                    anchors.fill: parent
+                    visible: root.transitionType === "wipe" && (root.hasCurrent || root.booting)
+
+                    property variant source1: root.hasCurrent ? currentWallpaper : transparentSource
+                    property variant source2: nextWallpaper
+                    property real progress: root.transitionProgress
+                    property real smoothness: root.edgeSmoothness
+                    property real direction: root.wipeDirection
+                    property real fillMode: root.fillMode
+                    property vector4d fillColor: root.fillColor
+                    property real imageWidth1: Math.max(1, root.hasCurrent ? source1.sourceSize.width : width)
+                    property real imageHeight1: Math.max(1, root.hasCurrent ? source1.sourceSize.height : height)
+                    property real imageWidth2: Math.max(1, source2.sourceSize.width)
+                    property real imageHeight2: Math.max(1, source2.sourceSize.height)
+                    property real screenWidth: width
+                    property real screenHeight: height
+
+                    fragmentShader: Qt.resolvedUrl("../Shaders/qsb/wp_wipe.frag.qsb")
+                }
+
+                ShaderEffect {
+                    id: discShader
+                    anchors.fill: parent
+                    visible: root.transitionType === "disc" && (root.hasCurrent || root.booting)
+
+                    property variant source1: root.hasCurrent ? currentWallpaper : transparentSource
+                    property variant source2: nextWallpaper
+                    property real progress: root.transitionProgress
+                    property real smoothness: root.edgeSmoothness
+                    property real aspectRatio: root.width / root.height
+                    property real centerX: root.discCenterX
+                    property real centerY: root.discCenterY
+                    property real fillMode: root.fillMode
+                    property vector4d fillColor: root.fillColor
+                    property real imageWidth1: Math.max(1, root.hasCurrent ? source1.sourceSize.width : width)
+                    property real imageHeight1: Math.max(1, root.hasCurrent ? source1.sourceSize.height : height)
+                    property real imageWidth2: Math.max(1, source2.sourceSize.width)
+                    property real imageHeight2: Math.max(1, source2.sourceSize.height)
+                    property real screenWidth: width
+                    property real screenHeight: height
+
+                    fragmentShader: Qt.resolvedUrl("../Shaders/qsb/wp_disc.frag.qsb")
+                }
+
+                ShaderEffect {
+                    id: stripesShader
+                    anchors.fill: parent
+                    visible: root.transitionType === "stripes" && (root.hasCurrent || root.booting)
+
+                    property variant source1: root.hasCurrent ? currentWallpaper : transparentSource
+                    property variant source2: nextWallpaper
+                    property real progress: root.transitionProgress
+                    property real smoothness: root.edgeSmoothness
+                    property real aspectRatio: root.width / root.height
+                    property real stripeCount: root.stripesCount
+                    property real angle: root.stripesAngle
+                    property real fillMode: root.fillMode
+                    property vector4d fillColor: root.fillColor
+                    property real imageWidth1: Math.max(1, root.hasCurrent ? source1.sourceSize.width : width)
+                    property real imageHeight1: Math.max(1, root.hasCurrent ? source1.sourceSize.height : height)
+                    property real imageWidth2: Math.max(1, source2.sourceSize.width)
+                    property real imageHeight2: Math.max(1, source2.sourceSize.height)
+                    property real screenWidth: width
+                    property real screenHeight: height
+
+                    fragmentShader: Qt.resolvedUrl("../Shaders/qsb/wp_stripes.frag.qsb")
+                }
+
+                NumberAnimation {
+                    id: transitionAnimation
+                    target: root
+                    property: "transitionProgress"
+                    from: 0.0
+                    to: 1.0
+                    duration: 1000
+                    easing.type: Easing.InOutCubic
+                    onFinished: {
+                        Qt.callLater(() => {
+                            if (nextWallpaper.source && nextWallpaper.status === Image.Ready && !nextWallpaper.source.toString().startsWith("#")) {
+                                currentWallpaper.source = nextWallpaper.source
+                            }
+                            nextWallpaper.source = ""
+                            root.transitionProgress = 0.0
+                        })
                     }
                 }
             }

Services/NiriService.qml

@@ -29,6 +29,7 @@ Singleton {
     property string configValidationOutput: ""
     property bool hasInitialConnection: false
     property bool suppressConfigToast: true
+    property bool suppressNextConfigToast: false
 
     readonly property string socketPath: Quickshell.env("NIRI_SOCKET")
 
@@ -345,9 +346,10 @@ Singleton {
             if (ToastService.toastVisible && ToastService.currentLevel === ToastService.levelError) {
                 ToastService.hideToast()
             }
-            if (hasInitialConnection && !suppressConfigToast) {
+            if (hasInitialConnection && !suppressConfigToast && !suppressNextConfigToast) {
                 ToastService.showInfo("niri: config reloaded")
             }
+            suppressNextConfigToast = false
         }
 
         if (!hasInitialConnection) {
@@ -493,6 +495,10 @@ Singleton {
                     })
     }
 
+    function suppressNextToast() {
+        suppressNextConfigToast = true
+    }
+
     function findNiriWindow(toplevel) {
         if (!toplevel.appId) {
             return null

Shaders/frag/circled_image.frag

@@ -0,0 +1,30 @@
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float imageOpacity;
+} ubuf;
+
+void main() {
+    // Center coordinates around (0, 0)
+    vec2 uv = qt_TexCoord0 - 0.5;
+    
+    // Calculate distance from center
+    float distance = length(uv);
+    
+    // Create circular mask - anything beyond radius 0.5 is transparent
+    float mask = 1.0 - smoothstep(0.48, 0.52, distance);
+    
+    // Sample the texture
+    vec4 color = texture(source, qt_TexCoord0);
+    
+    // Apply the circular mask and opacity
+    float finalAlpha = color.a * mask * ubuf.imageOpacity * ubuf.qt_Opacity;
+    fragColor = vec4(color.rgb * finalAlpha, finalAlpha);
+}

Shaders/frag/rounded_image.frag

@@ -0,0 +1,56 @@
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    // Custom properties with non-conflicting names
+    float itemWidth;
+    float itemHeight;
+    float cornerRadius;
+    float imageOpacity;
+} ubuf;
+
+// Function to calculate the signed distance from a point to a rounded box
+float roundedBoxSDF(vec2 centerPos, vec2 boxSize, float radius) {
+    vec2 d = abs(centerPos) - boxSize + radius;
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - radius;
+}
+
+void main() {
+    // Get size from uniforms
+    vec2 itemSize = vec2(ubuf.itemWidth, ubuf.itemHeight);
+    float cornerRadius = ubuf.cornerRadius;
+    float itemOpacity = ubuf.imageOpacity;
+    
+    // Normalize coordinates to [-0.5, 0.5] range
+    vec2 uv = qt_TexCoord0 - 0.5;
+    
+    // Scale by aspect ratio to maintain uniform rounding
+    vec2 aspectRatio = itemSize / max(itemSize.x, itemSize.y);
+    uv *= aspectRatio;
+    
+    // Calculate half size in normalized space
+    vec2 halfSize = 0.5 * aspectRatio;
+    
+    // Normalize the corner radius
+    float normalizedRadius = cornerRadius / max(itemSize.x, itemSize.y);
+    
+    // Calculate distance to rounded rectangle
+    float distance = roundedBoxSDF(uv, halfSize, normalizedRadius);
+    
+    // Create smooth alpha mask
+    float smoothedAlpha = 1.0 - smoothstep(0.0, fwidth(distance), distance);
+    
+    // Sample the texture
+    vec4 color = texture(source, qt_TexCoord0);
+    
+    // Apply the rounded mask and opacity
+    // Make sure areas outside the rounded rect are completely transparent
+    float finalAlpha = color.a * smoothedAlpha * itemOpacity * ubuf.qt_Opacity;
+    fragColor = vec4(color.rgb * finalAlpha, finalAlpha);
+}

Shaders/frag/wp_disc.frag

@@ -0,0 +1,122 @@
+// ===== wp_disc.frag =====
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source1;  // Current wallpaper
+layout(binding = 2) uniform sampler2D source2;  // Next wallpaper
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float progress;      // Transition progress (0.0 to 1.0)
+    float centerX;       // X coordinate of disc center (0.0 to 1.0)
+    float centerY;       // Y coordinate of disc center (0.0 to 1.0)
+    float smoothness;    // Edge smoothness (0.0 to 1.0, 0=sharp, 1=very smooth)
+    float aspectRatio;   // Width / Height of the screen
+    
+    // Fill mode parameters
+    float fillMode;      // 0=no(center), 1=crop(fill), 2=fit(contain), 3=stretch
+    float imageWidth1;   // Width of source1 image
+    float imageHeight1;  // Height of source1 image
+    float imageWidth2;   // Width of source2 image
+    float imageHeight2;  // Height of source2 image
+    float screenWidth;   // Screen width
+    float screenHeight;  // Screen height
+    vec4 fillColor;      // Fill color for empty areas (default: black)
+} ubuf;
+
+// Calculate UV coordinates based on fill mode
+vec2 calculateUV(vec2 uv, float imgWidth, float imgHeight) {
+    float imageAspect = imgWidth / imgHeight;
+    float screenAspect = ubuf.screenWidth / ubuf.screenHeight;
+    vec2 transformedUV = uv;
+    
+    if (ubuf.fillMode < 0.5) {
+        // Mode 0: no (center) - No resize, center image at original size
+        // Convert UV to pixel coordinates, offset, then back to UV in image space
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        vec2 imageOffset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - vec2(imgWidth, imgHeight)) * 0.5;
+        vec2 imagePixel = screenPixel - imageOffset;
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    } 
+    else if (ubuf.fillMode < 1.5) {
+        // Mode 1: crop (fill/cover) - Fill screen, crop excess (default)
+        float scale = max(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (scaledImageSize - vec2(ubuf.screenWidth, ubuf.screenHeight)) / scaledImageSize;
+        transformedUV = uv * (vec2(1.0) - offset) + offset * 0.5;
+    }
+    else if (ubuf.fillMode < 2.5) {
+        // Mode 2: fit (contain) - Fit inside screen, maintain aspect ratio
+        float scale = min(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - scaledImageSize) * 0.5;
+        
+        // Convert screen UV to pixel coordinates
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        // Adjust for offset and scale
+        vec2 imagePixel = (screenPixel - offset) / scale;
+        // Convert back to UV coordinates in image space
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    }
+    // Mode 3: stretch - Use original UV (stretches to fit)
+    // No transformation needed for stretch mode
+    
+    return transformedUV;
+}
+
+// Sample texture with fill mode and handle out-of-bounds
+vec4 sampleWithFillMode(sampler2D tex, vec2 uv, float imgWidth, float imgHeight) {
+    vec2 transformedUV = calculateUV(uv, imgWidth, imgHeight);
+    
+    // Check if UV is out of bounds
+    if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || 
+        transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+        return ubuf.fillColor;
+    }
+    
+    return texture(tex, transformedUV);
+}
+
+void main() {
+    vec2 uv = qt_TexCoord0;
+
+    // Sample textures with fill mode
+    vec4 color1 = sampleWithFillMode(source1, uv, ubuf.imageWidth1, ubuf.imageHeight1);
+    vec4 color2 = sampleWithFillMode(source2, uv, ubuf.imageWidth2, ubuf.imageHeight2);
+
+    // Map smoothness from 0.0-1.0 to 0.001-0.5 range
+    // Using a non-linear mapping for better control
+    float mappedSmoothness = mix(0.001, 0.5, ubuf.smoothness * ubuf.smoothness);
+
+    // Adjust UV coordinates to compensate for aspect ratio
+    // This makes distances circular instead of elliptical
+    vec2 adjustedUV = vec2(uv.x * ubuf.aspectRatio, uv.y);
+    vec2 adjustedCenter = vec2(ubuf.centerX * ubuf.aspectRatio, ubuf.centerY);
+    
+    // Calculate distance in aspect-corrected space
+    float dist = distance(adjustedUV, adjustedCenter);
+    
+    // Calculate the maximum possible distance (corner to corner)
+    // This ensures the disc can cover the entire screen
+    float maxDistX = max(ubuf.centerX * ubuf.aspectRatio, 
+                         (1.0 - ubuf.centerX) * ubuf.aspectRatio);
+    float maxDistY = max(ubuf.centerY, 1.0 - ubuf.centerY);
+    float maxDist = length(vec2(maxDistX, maxDistY));
+    
+    // Scale progress to cover the maximum distance
+    // Add extra range for smoothness to ensure complete coverage
+    // Adjust smoothness for aspect ratio to maintain consistent visual appearance
+    float adjustedSmoothness = mappedSmoothness * max(1.0, ubuf.aspectRatio);
+    float radius = ubuf.progress * (maxDist + adjustedSmoothness);
+    
+    // Use smoothstep for a smooth edge transition
+    float factor = smoothstep(radius - adjustedSmoothness, radius + adjustedSmoothness, dist);
+    
+    // Mix the textures (factor = 0 inside disc, 1 outside)
+    fragColor = mix(color2, color1, factor);
+    
+    fragColor *= ubuf.qt_Opacity;
+}

Shaders/frag/wp_fade.frag

@@ -0,0 +1,88 @@
+// ===== wp_fade.frag =====
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source1;
+layout(binding = 2) uniform sampler2D source2;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float progress;
+    
+    // Fill mode parameters
+    float fillMode;      // 0=no(center), 1=crop(fill), 2=fit(contain), 3=stretch
+    float imageWidth1;   // Width of source1 image
+    float imageHeight1;  // Height of source1 image
+    float imageWidth2;   // Width of source2 image
+    float imageHeight2;  // Height of source2 image
+    float screenWidth;   // Screen width
+    float screenHeight;  // Screen height
+    vec4 fillColor;      // Fill color for empty areas (default: black)
+} ubuf;
+
+// Calculate UV coordinates based on fill mode
+vec2 calculateUV(vec2 uv, float imgWidth, float imgHeight) {
+    float imageAspect = imgWidth / imgHeight;
+    float screenAspect = ubuf.screenWidth / ubuf.screenHeight;
+    vec2 transformedUV = uv;
+    
+    if (ubuf.fillMode < 0.5) {
+        // Mode 0: no (center) - No resize, center image at original size
+        // Convert UV to pixel coordinates, offset, then back to UV in image space
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        vec2 imageOffset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - vec2(imgWidth, imgHeight)) * 0.5;
+        vec2 imagePixel = screenPixel - imageOffset;
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    } 
+    else if (ubuf.fillMode < 1.5) {
+        // Mode 1: crop (fill/cover) - Fill screen, crop excess (default)
+        float scale = max(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (scaledImageSize - vec2(ubuf.screenWidth, ubuf.screenHeight)) / scaledImageSize;
+        transformedUV = uv * (vec2(1.0) - offset) + offset * 0.5;
+    }
+    else if (ubuf.fillMode < 2.5) {
+        // Mode 2: fit (contain) - Fit inside screen, maintain aspect ratio
+        float scale = min(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - scaledImageSize) * 0.5;
+        
+        // Convert screen UV to pixel coordinates
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        // Adjust for offset and scale
+        vec2 imagePixel = (screenPixel - offset) / scale;
+        // Convert back to UV coordinates in image space
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    }
+    // Mode 3: stretch - Use original UV (stretches to fit)
+    // No transformation needed for stretch mode
+    
+    return transformedUV;
+}
+
+// Sample texture with fill mode and handle out-of-bounds
+vec4 sampleWithFillMode(sampler2D tex, vec2 uv, float imgWidth, float imgHeight) {
+    vec2 transformedUV = calculateUV(uv, imgWidth, imgHeight);
+    
+    // Check if UV is out of bounds
+    if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || 
+        transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+        return ubuf.fillColor;
+    }
+    
+    return texture(tex, transformedUV);
+}
+
+void main() {
+    vec2 uv = qt_TexCoord0;
+    
+    // Sample textures with fill mode
+    vec4 color1 = sampleWithFillMode(source1, uv, ubuf.imageWidth1, ubuf.imageHeight1);
+    vec4 color2 = sampleWithFillMode(source2, uv, ubuf.imageWidth2, ubuf.imageHeight2);
+    
+    // Mix the two textures based on progress value
+    fragColor = mix(color1, color2, ubuf.progress) * ubuf.qt_Opacity;
+}

Shaders/frag/wp_stripes.frag

@@ -0,0 +1,203 @@
+// ===== wp_stripes.frag =====
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source1;  // Current wallpaper
+layout(binding = 2) uniform sampler2D source2;  // Next wallpaper
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float progress;      // Transition progress (0.0 to 1.0)
+    float stripeCount;   // Number of stripes (default 12.0)
+    float angle;         // Angle of stripes in degrees (default 30.0)
+    float smoothness;    // Edge smoothness (0.0 to 1.0, 0=sharp, 1=very smooth)
+    float aspectRatio;   // Width / Height of the screen
+    
+    // Fill mode parameters
+    float fillMode;      // 0=no(center), 1=crop(fill), 2=fit(contain), 3=stretch
+    float imageWidth1;   // Width of source1 image
+    float imageHeight1;  // Height of source1 image
+    float imageWidth2;   // Width of source2 image
+    float imageHeight2;  // Height of source2 image
+    float screenWidth;   // Screen width
+    float screenHeight;  // Screen height
+    vec4 fillColor;      // Fill color for empty areas (default: black)
+} ubuf;
+
+// Calculate UV coordinates based on fill mode
+vec2 calculateUV(vec2 uv, float imgWidth, float imgHeight) {
+    float imageAspect = imgWidth / imgHeight;
+    float screenAspect = ubuf.screenWidth / ubuf.screenHeight;
+    vec2 transformedUV = uv;
+    
+    if (ubuf.fillMode < 0.5) {
+        // Mode 0: no (center) - No resize, center image at original size
+        // Convert UV to pixel coordinates, offset, then back to UV in image space
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        vec2 imageOffset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - vec2(imgWidth, imgHeight)) * 0.5;
+        vec2 imagePixel = screenPixel - imageOffset;
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    } 
+    else if (ubuf.fillMode < 1.5) {
+        // Mode 1: crop (fill/cover) - Fill screen, crop excess (default)
+        float scale = max(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (scaledImageSize - vec2(ubuf.screenWidth, ubuf.screenHeight)) / scaledImageSize;
+        transformedUV = uv * (vec2(1.0) - offset) + offset * 0.5;
+    }
+    else if (ubuf.fillMode < 2.5) {
+        // Mode 2: fit (contain) - Fit inside screen, maintain aspect ratio
+        float scale = min(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - scaledImageSize) * 0.5;
+        
+        // Convert screen UV to pixel coordinates
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        // Adjust for offset and scale
+        vec2 imagePixel = (screenPixel - offset) / scale;
+        // Convert back to UV coordinates in image space
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    }
+    // Mode 3: stretch - Use original UV (stretches to fit)
+    // No transformation needed for stretch mode
+    
+    return transformedUV;
+}
+
+// Sample texture with fill mode and handle out-of-bounds
+vec4 sampleWithFillMode(sampler2D tex, vec2 uv, float imgWidth, float imgHeight) {
+    vec2 transformedUV = calculateUV(uv, imgWidth, imgHeight);
+    
+    // Check if UV is out of bounds
+    if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || 
+        transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+        return ubuf.fillColor;
+    }
+    
+    return texture(tex, transformedUV);
+}
+
+void main() {
+    vec2 uv = qt_TexCoord0;
+    
+    // Sample textures with fill mode
+    vec4 color1 = sampleWithFillMode(source1, uv, ubuf.imageWidth1, ubuf.imageHeight1);
+    vec4 color2 = sampleWithFillMode(source2, uv, ubuf.imageWidth2, ubuf.imageHeight2);
+    
+    // Map smoothness from 0.0-1.0 to 0.001-0.3 range
+    // Using a non-linear mapping for better control at low values
+    float mappedSmoothness = mix(0.001, 0.3, ubuf.smoothness * ubuf.smoothness);
+    
+    // Use values directly without forcing defaults
+    float stripes = (ubuf.stripeCount > 0.0) ? ubuf.stripeCount : 12.0;
+    float angleRad = radians(ubuf.angle);
+    float edgeSmooth = mappedSmoothness;
+    
+    // Create a coordinate system for stripes based on angle
+    // At 0°: vertical stripes (divide by x)
+    // At 45°: diagonal stripes
+    // At 90°: horizontal stripes (divide by y)
+    
+    // Transform coordinates based on angle
+    float cosA = cos(angleRad);
+    float sinA = sin(angleRad);
+    
+    // Project the UV position onto the stripe direction
+    // This gives us the position along the stripe direction
+    float stripeCoord = uv.x * cosA + uv.y * sinA;
+    
+    // Perpendicular coordinate (for edge movement)
+    float perpCoord = -uv.x * sinA + uv.y * cosA;
+    
+    // Calculate the range of perpCoord based on angle
+    // This determines how far edges need to travel to fully cover the screen
+    float minPerp = min(min(0.0 * -sinA + 0.0 * cosA, 1.0 * -sinA + 0.0 * cosA),
+                       min(0.0 * -sinA + 1.0 * cosA, 1.0 * -sinA + 1.0 * cosA));
+    float maxPerp = max(max(0.0 * -sinA + 0.0 * cosA, 1.0 * -sinA + 0.0 * cosA),
+                       max(0.0 * -sinA + 1.0 * cosA, 1.0 * -sinA + 1.0 * cosA));
+    
+    // Determine which stripe we're in
+    float stripePos = stripeCoord * stripes;
+    int stripeIndex = int(floor(stripePos));
+    
+    // Determine if this is an odd or even stripe
+    bool isOddStripe = mod(float(stripeIndex), 2.0) != 0.0;
+    
+    // Calculate the progress for this specific stripe with wave delay
+    // Use absolute stripe position for consistent delay across all stripes
+    float normalizedStripePos = clamp(stripePos / stripes, 0.0, 1.0);
+    
+    // Increased delay and better distribution
+    float maxDelay = 0.1;
+    float stripeDelay = normalizedStripePos * maxDelay;
+    
+    // Better progress mapping that uses the full 0.0-1.0 range
+    // Map progress so that:
+    // - First stripe starts at progress = 0.0
+    // - Last stripe finishes at progress = 1.0
+    float stripeProgress;
+    if (ubuf.progress <= stripeDelay) {
+        stripeProgress = 0.0;
+    } else if (ubuf.progress >= (stripeDelay + (1.0 - maxDelay))) {
+        stripeProgress = 1.0;
+    } else {
+        // Scale the progress within the active window for this stripe
+        float activeStart = stripeDelay;
+        float activeEnd = stripeDelay + (1.0 - maxDelay);
+        stripeProgress = (ubuf.progress - activeStart) / (activeEnd - activeStart);
+    }
+    
+    // Use gentler easing curve
+    stripeProgress = stripeProgress * stripeProgress * (3.0 - 2.0 * stripeProgress);  // Smootherstep instead of smoothstep
+    
+    // Use the perpendicular coordinate for edge comparison
+    float yPos = perpCoord;
+    
+    // Calculate edge position for this stripe
+    // Use the actual perpendicular coordinate range for this angle
+    float perpRange = maxPerp - minPerp;
+    float margin = edgeSmooth * 2.0;  // Simplified margin calculation
+    float edgePosition;
+    if (isOddStripe) {
+        // Odd stripes: edge moves from max to min
+        edgePosition = maxPerp + margin - stripeProgress * (perpRange + margin * 2.0);
+    } else {
+        // Even stripes: edge moves from min to max
+        edgePosition = minPerp - margin + stripeProgress * (perpRange + margin * 2.0);
+    }
+    
+    // Determine which wallpaper to show based on rotated position
+    float mask;
+    if (isOddStripe) {
+        // Odd stripes reveal new wallpaper from bottom
+        mask = smoothstep(edgePosition - edgeSmooth, edgePosition + edgeSmooth, yPos);
+    } else {
+        // Even stripes reveal new wallpaper from top
+        mask = 1.0 - smoothstep(edgePosition - edgeSmooth, edgePosition + edgeSmooth, yPos);
+    }
+    
+    // Mix the wallpapers
+    fragColor = mix(color1, color2, mask);
+    
+    // Force exact values at start and end to prevent any bleed-through
+    if (ubuf.progress <= 0.0) {
+        fragColor = color1;  // Only show old wallpaper at start
+    } else if (ubuf.progress >= 1.0) {
+        fragColor = color2;  // Only show new wallpaper at end
+    } else {
+        // Add manga-style edge shadow only during transition
+        float edgeDist = abs(yPos - edgePosition);
+        float shadowStrength = 1.0 - smoothstep(0.0, edgeSmooth * 2.5, edgeDist);
+        shadowStrength *= 0.2 * (1.0 - abs(stripeProgress - 0.5) * 2.0);
+        fragColor.rgb *= (1.0 - shadowStrength);
+        
+        // Add slight vignette during transition for dramatic effect  
+        float vignette = 1.0 - ubuf.progress * 0.1 * (1.0 - abs(stripeProgress - 0.5) * 2.0);
+        fragColor.rgb *= vignette;
+    }
+    
+    fragColor *= ubuf.qt_Opacity;
+}

Shaders/frag/wp_wipe.frag

@@ -0,0 +1,127 @@
+// ===== wp_wipe.frag =====
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D source1;  // Current wallpaper
+layout(binding = 2) uniform sampler2D source2;  // Next wallpaper
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float progress;      // Transition progress (0.0 to 1.0)
+    float direction;     // 0=left, 1=right, 2=up, 3=down
+    float smoothness;    // Edge smoothness (0.0 to 1.0, 0=sharp, 1=very smooth)
+    
+    // Fill mode parameters
+    float fillMode;      // 0=no(center), 1=crop(fill), 2=fit(contain), 3=stretch
+    float imageWidth1;   // Width of source1 image
+    float imageHeight1;  // Height of source1 image
+    float imageWidth2;   // Width of source2 image
+    float imageHeight2;  // Height of source2 image
+    float screenWidth;   // Screen width
+    float screenHeight;  // Screen height
+    vec4 fillColor;      // Fill color for empty areas (default: black)
+} ubuf;
+
+// Calculate UV coordinates based on fill mode
+vec2 calculateUV(vec2 uv, float imgWidth, float imgHeight) {
+    float imageAspect = imgWidth / imgHeight;
+    float screenAspect = ubuf.screenWidth / ubuf.screenHeight;
+    vec2 transformedUV = uv;
+    
+    if (ubuf.fillMode < 0.5) {
+        // Mode 0: no (center) - No resize, center image at original size
+        // Convert UV to pixel coordinates, offset, then back to UV in image space
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        vec2 imageOffset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - vec2(imgWidth, imgHeight)) * 0.5;
+        vec2 imagePixel = screenPixel - imageOffset;
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    } 
+    else if (ubuf.fillMode < 1.5) {
+        // Mode 1: crop (fill/cover) - Fill screen, crop excess (default)
+        float scale = max(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (scaledImageSize - vec2(ubuf.screenWidth, ubuf.screenHeight)) / scaledImageSize;
+        transformedUV = uv * (vec2(1.0) - offset) + offset * 0.5;
+    }
+    else if (ubuf.fillMode < 2.5) {
+        // Mode 2: fit (contain) - Fit inside screen, maintain aspect ratio
+        float scale = min(ubuf.screenWidth / imgWidth, ubuf.screenHeight / imgHeight);
+        vec2 scaledImageSize = vec2(imgWidth, imgHeight) * scale;
+        vec2 offset = (vec2(ubuf.screenWidth, ubuf.screenHeight) - scaledImageSize) * 0.5;
+        
+        // Convert screen UV to pixel coordinates
+        vec2 screenPixel = uv * vec2(ubuf.screenWidth, ubuf.screenHeight);
+        // Adjust for offset and scale
+        vec2 imagePixel = (screenPixel - offset) / scale;
+        // Convert back to UV coordinates in image space
+        transformedUV = imagePixel / vec2(imgWidth, imgHeight);
+    }
+    // Mode 3: stretch - Use original UV (stretches to fit)
+    // No transformation needed for stretch mode
+    
+    return transformedUV;
+}
+
+// Sample texture with fill mode and handle out-of-bounds
+vec4 sampleWithFillMode(sampler2D tex, vec2 uv, float imgWidth, float imgHeight) {
+    vec2 transformedUV = calculateUV(uv, imgWidth, imgHeight);
+    
+    // Check if UV is out of bounds
+    if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || 
+        transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+        return ubuf.fillColor;
+    }
+    
+    return texture(tex, transformedUV);
+}
+
+void main() {
+    vec2 uv = qt_TexCoord0;
+    
+    // Sample textures with fill mode
+    vec4 color1 = sampleWithFillMode(source1, uv, ubuf.imageWidth1, ubuf.imageHeight1);
+    vec4 color2 = sampleWithFillMode(source2, uv, ubuf.imageWidth2, ubuf.imageHeight2);
+    
+    // Map smoothness from 0.0-1.0 to 0.001-0.5 range
+    // Using a non-linear mapping for better control
+    float mappedSmoothness = mix(0.001, 0.5, ubuf.smoothness * ubuf.smoothness);
+    
+    float edge = 0.0;
+    float factor = 0.0;
+    
+    // Extend the progress range to account for smoothness
+    // This ensures the transition completes fully at the edges
+    float extendedProgress = ubuf.progress * (1.0 + 2.0 * mappedSmoothness) - mappedSmoothness;
+    
+    // Calculate edge position based on direction
+    // As progress goes from 0 to 1, we reveal source2 (new wallpaper)
+    if (ubuf.direction < 0.5) {
+        // Wipe from right to left (new image enters from right)
+        edge = 1.0 - extendedProgress;
+        factor = smoothstep(edge - mappedSmoothness, edge + mappedSmoothness, uv.x);
+        fragColor = mix(color1, color2, factor);
+    } 
+    else if (ubuf.direction < 1.5) {
+        // Wipe from left to right (new image enters from left)
+        edge = extendedProgress;
+        factor = smoothstep(edge - mappedSmoothness, edge + mappedSmoothness, uv.x);
+        fragColor = mix(color2, color1, factor);
+    }
+    else if (ubuf.direction < 2.5) {
+        // Wipe from bottom to top (new image enters from bottom)
+        edge = 1.0 - extendedProgress;
+        factor = smoothstep(edge - mappedSmoothness, edge + mappedSmoothness, uv.y);
+        fragColor = mix(color1, color2, factor);
+    }
+    else {
+        // Wipe from top to bottom (new image enters from top)
+        edge = extendedProgress;
+        factor = smoothstep(edge - mappedSmoothness, edge + mappedSmoothness, uv.y);
+        fragColor = mix(color2, color1, factor);
+    }
+    
+    fragColor *= ubuf.qt_Opacity;
+}