3 files changed, 220 insertions, 0 deletions
diff --git a/desktop/modules/appearance/TransitionTile.qml b/desktop/modules/appearance/TransitionTile.qml
new file mode 100644
index 0000000..9c6d9eb
--- /dev/null
+++ b/desktop/modules/appearance/TransitionTile.qml
@@ -0,0 +1,120 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import QtQuick
+import "../.."
+
+// One choice on the transitions page. A click selects it in the draft and
+// plays it once between the two current wallpapers. The tick puts it in
+// Random's pool. The tile named "random" has no shader and no tick.
+Item {
+    id: tile
+    required property string name
+    required property string label
+    readonly property bool random: name === "random"
+    readonly property bool selected: Transitions.draftPick === name
+    readonly property bool shows: !random && Wallpapers.currentH !== "" && Wallpapers.currentV !== ""
+    property real progress: 0
+    property point origin: Qt.point(0.5, 0.5)
+
+    implicitHeight: thumb.height + 30
+
+    Glow {
+        anchors.fill: thumb
+        on: tile.selected
+    }
+
+    Rectangle {
+        id: thumb
+        width: tile.width
+        height: Math.round(width * 9 / 16)
+        color: Theme.surface
+        clip: true
+
+        // Same layering as the cover, WallpaperSpread.qml. ponytail: rests on
+        // the old picture again after playing, with a cut.
+        Image {
+            id: newImg
+            visible: tile.shows
+            anchors.fill: parent
+            source: tile.shows ? Wallpapers.currentV : ""
+            fillMode: Image.PreserveAspectCrop
+            sourceSize: Qt.size(thumb.width, thumb.height)
+            asynchronous: true
+            layer.enabled: tile.shows
+        }
+        Image {
+            id: oldImg
+            visible: tile.shows
+            anchors.fill: parent
+            source: tile.shows ? Wallpapers.currentH : ""
+            fillMode: Image.PreserveAspectCrop
+            sourceSize: Qt.size(thumb.width, thumb.height)
+            asynchronous: true
+            layer.enabled: tile.shows
+            layer.effect: WallShader {
+                name: tile.name
+                target: newImg
+                progress: tile.progress
+                aspect: thumb.width / Math.max(1, thumb.height)
+                origin: tile.origin
+            }
+        }
+
+        Text {
+            anchors.centerIn: parent
+            visible: tile.random
+            // nf-fa-shuffle, present in Inconsolata Nerd Font.
+            text: ""
+            color: Theme.subtext
+            font { family: Theme.iconFamily; pixelSize: Theme.fontSize * 2 }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                Transitions.draftPick = tile.name;
+                if (!tile.shows) return;
+                tile.origin = Qt.point(Math.random(), Math.random());
+                play.restart();
+            }
+        }
+    }
+
+    NumberAnimation {
+        id: play
+        target: tile
+        property: "progress"
+        from: 0
+        to: 1
+        duration: Transitions.duration
+        onFinished: tile.progress = 0
+    }
+
+    Toggle {
+        anchors { top: thumb.bottom; topMargin: 6; left: parent.left }
+        visible: !tile.random
+        label: tile.label
+        // Toggle assigns checked itself, which would break a plain binding
+        // and leave the tick stale after Reset.
+        Binding on checked { value: Transitions.draftPool.indexOf(tile.name) >= 0 }
+        onToggled: Transitions.toggle(tile.name)
+    }
+
+    Text {
+        anchors { top: thumb.bottom; topMargin: 8; left: parent.left }
+        visible: tile.random
+        text: tile.label
+        color: Theme.subtext
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+    }
+}
diff --git a/desktop/modules/appearance/TransitionsModule.qml b/desktop/modules/appearance/TransitionsModule.qml
new file mode 100644
index 0000000..3ad56fb
--- /dev/null
+++ b/desktop/modules/appearance/TransitionsModule.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import QtQuick
+import "../.."
+
+// The transitions page: which effect covers a wallpaper change.
+Module {
+    name: "transitions"
+    label: "Transitions"
+    // nf-fa-magic, present in Inconsolata Nerd Font.
+    icon: ""
+    settings: true
+    dirty: Transitions.dirty
+    group: "Appearance"
+    keywords: ["wallpaper", "transition", "effect", "burn", "ink", "shatter", "ripple", "melt", "blinds", "random"]
+
+    page: Component {
+        Page {
+            title: "Transitions"
+            actions: Component {
+                SaveBar {
+                    dirty: Transitions.dirty
+                    valid: Transitions.valid
+                    note: "tick at least one transition for Random"
+                    saveText: "Apply"
+                    discardText: "Reset"
+                    onSave: Transitions.apply()
+                    onDiscard: Transitions.reset()
+                }
+            }
+            TransitionsTab { width: parent.width }
+        }
+    }
+}
diff --git a/desktop/modules/appearance/TransitionsTab.qml b/desktop/modules/appearance/TransitionsTab.qml
new file mode 100644
index 0000000..190a117
--- /dev/null
+++ b/desktop/modules/appearance/TransitionsTab.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import QtQuick
+import "../.."
+
+Item {
+    id: tab
+    implicitHeight: col.implicitHeight
+
+    readonly property int gap: 14
+    readonly property int columns: Math.max(1, Math.floor((width + gap) / 260))
+    readonly property real tileWidth: (width - (columns - 1) * gap) / columns
+
+    Column {
+        id: col
+        width: parent.width
+        spacing: 14
+
+        Text {
+            width: col.width
+            wrapMode: Text.Wrap
+            text: "Click a transition to see it between your two current wallpapers. "
+                + "Random draws from the ticked ones, and never the same one twice running."
+            color: Theme.overlay
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+        }
+
+        Grid {
+            columns: tab.columns
+            spacing: tab.gap
+
+            Repeater {
+                model: Transitions.all
+                TransitionTile {
+                    required property var modelData
+                    width: tab.tileWidth
+                    name: modelData.name
+                    label: modelData.label
+                }
+            }
+            TransitionTile {
+                width: tab.tileWidth
+                name: "random"
+                label: "Random"
+            }
+        }
+    }
+}