overview backdrop: randomly spinning hexagons

modules/OverviewBackdrop.qml

@@ -20,11 +20,10 @@ PanelWindow {
     anchors.right: true
     anchors.bottom: true
 
-    // Solid dark background
+    // Solid dark background — base01 is darker than base00
     Rectangle {
         anchors.fill: parent
-        color: M.Theme.base00
+        color: M.Theme.base01
-        opacity: 0.85
     }
 
     // Hex grid with gradient-filled cells, no outlines
@@ -82,175 +81,81 @@ PanelWindow {
         }
     }
 
-    // Horizontal scan line with glow trail
+    // Randomly spinning hexagons overlaid on the grid
-    Rectangle {
-        id: hScan
-        width: 2
-        height: parent.height
-        opacity: 0.2
-        color: M.Theme.base0D
-        NumberAnimation on x {
-            from: -100
-            to: root.width + 100
-            duration: 8000
-            loops: Animation.Infinite
-            easing.type: Easing.InOutSine
-        }
-
-        Rectangle {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.right: parent.left
-            width: 120
-            gradient: Gradient {
-                orientation: Gradient.Horizontal
-                GradientStop {
-                    position: 0
-                    color: "transparent"
-                }
-                GradientStop {
-                    position: 1
-                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.08)
-                }
-            }
-        }
-    }
-
-    // Vertical scan line
-    Rectangle {
-        width: parent.width
-        height: 1
-        opacity: 0.12
-        color: M.Theme.base0E
-        NumberAnimation on y {
-            from: -50
-            to: root.height + 50
-            duration: 12000
-            loops: Animation.Infinite
-            easing.type: Easing.InOutSine
-        }
-    }
-
-    // Diagonal scan
-    Rectangle {
-        width: 1
-        height: parent.height * 1.5
-        opacity: 0.06
-        color: M.Theme.base09
-        rotation: 30
-        transformOrigin: Item.Top
-        SequentialAnimation on x {
-            loops: Animation.Infinite
-            NumberAnimation {
-                from: -200
-                to: root.width + 200
-                duration: 15000
-                easing.type: Easing.InOutQuad
-            }
-            NumberAnimation {
-                from: root.width + 200
-                to: -200
-                duration: 15000
-                easing.type: Easing.InOutQuad
-            }
-        }
-    }
-
-    // Corner accent marks
     Repeater {
-        model: [
+        model: 12
-            {
+
-                cx: 40,
-                cy: 40,
-                col: M.Theme.base0C,
-                dx: 1,
-                dy: 1
-            },
-            {
-                cx: -100,
-                cy: 40,
-                col: M.Theme.base09,
-                dx: -1,
-                dy: 1
-            },
-            {
-                cx: 40,
-                cy: -100,
-                col: M.Theme.base0E,
-                dx: 1,
-                dy: -1
-            },
-            {
-                cx: -100,
-                cy: -100,
-                col: M.Theme.base08,
-                dx: -1,
-                dy: -1
-            }
-        ]
         Item {
-            required property var modelData
+            id: spinHex
-            x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx
+            required property int index
-            y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy
 
-            Rectangle {
+            readonly property real _size: 50
-                width: 60
+            readonly property real _dx: _size * 1.5
-                height: 1
+            readonly property real _dy: _size * Math.sqrt(3)
-                color: parent.modelData.col
-                opacity: 0.25
-            }
-            Rectangle {
-                width: 1
-                height: 60
-                color: parent.modelData.col
-                opacity: 0.25
-            }
 
-            Rectangle {
+            // Pick a random grid position
-                width: 5
+            readonly property int _col: Math.floor(Math.random() * (root.width / _dx))
-                height: 5
+            readonly property int _row: Math.floor(Math.random() * (root.height / _dy))
-                radius: 2.5
+
-                color: parent.modelData.col
+            x: _col * _dx - _size * 0.48
-                SequentialAnimation on opacity {
+            y: _row * _dy + (_col % 2 ? _dy / 2 : 0) - _size * 0.48
-                    loops: Animation.Infinite
+            width: _size
-                    NumberAnimation {
+            height: _size
-                        to: 0.1
+
-                        duration: 1500 + Math.random() * 1000
+            // Color from position (matching the canvas gradient)
-                        easing.type: Easing.InOutSine
+            readonly property real _fx: Math.max(0, Math.min(1, (_col * _dx) / root.width))
-                    }
+            readonly property color _c0: M.Theme.base0C
-                    NumberAnimation {
+            readonly property color _c1: M.Theme.base0E
-                        to: 0.5
+            readonly property color _c2: M.Theme.base09
-                        duration: 1500 + Math.random() * 1000
+            readonly property color _hexColor: Qt.rgba(_fx < 0.5 ? _c0.r + (_c1.r - _c0.r) * _fx * 2 : _c1.r + (_c2.r - _c1.r) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.g + (_c1.g - _c0.g) * _fx * 2 : _c1.g + (_c2.g - _c1.g) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.b + (_c1.b - _c0.b) * _fx * 2 : _c1.b + (_c2.b - _c1.b) * (_fx - 0.5) * 2, 1)
-                        easing.type: Easing.InOutSine
+
+            readonly property real _distFromCenter: Math.sqrt(Math.pow(_fx - 0.5, 2) + Math.pow(Math.max(0, Math.min(1, (_row * _dy) / root.height)) - 0.5, 2))
+            opacity: 0.03 + _distFromCenter * 0.06
+
+            rotation: 0
+            transformOrigin: Item.Center
+
+            Canvas {
+                anchors.fill: parent
+                onPaint: {
+                    const ctx = getContext("2d");
+                    const s = spinHex._size;
+                    const cx = s / 2, cy = s / 2;
+                    ctx.clearRect(0, 0, s, s);
+                    ctx.fillStyle = spinHex._hexColor.toString();
+                    ctx.beginPath();
+                    for (let i = 0; i < 6; i++) {
+                        const angle = Math.PI / 3 * i - Math.PI / 6;
+                        const px = cx + s * 0.48 * Math.cos(angle);
+                        const py = cy + s * 0.48 * Math.sin(angle);
+                        if (i === 0)
+                            ctx.moveTo(px, py);
+                        else
+                            ctx.lineTo(px, py);
                     }
+                    ctx.closePath();
+                    ctx.fill();
                 }
             }
-        }
-    }
 
-    // Floating particles
+            Timer {
-    Repeater {
+                interval: 3000 + Math.random() * 12000
-        model: 15
+                running: true
-        Rectangle {
+                repeat: true
-            required property int index
+                onTriggered: {
-            width: 2
+                    interval = 3000 + Math.random() * 12000;
-            height: 2
+                    spinAnim.duration = 1000 + Math.random() * 2000;
-            radius: 1
+                    spinAnim.start();
-            color: [M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base09, M.Theme.base08][index % 5]
+                }
-            opacity: 0.1 + Math.random() * 0.1
-
-            NumberAnimation on x {
-                from: -20
-                to: root.width + 20
-                duration: 20000 + index * 3000
-                loops: Animation.Infinite
             }
-            NumberAnimation on y {
+
-                from: Math.random() * root.height
+            RotationAnimation {
-                to: Math.random() * root.height
+                id: spinAnim
-                duration: 30000 + index * 2000
+                target: spinHex
-                loops: Animation.Infinite
+                from: 0
-                easing.type: Easing.InOutSine
+                to: 360
+                duration: 2000
+                easing.type: Easing.InOutCubic
             }
         }
     }