overview backdrop: randomly spinning hexagons

modules/OverviewBackdrop.qml

@@ -80,4 +80,83 @@ PanelWindow {
             }
         }
     }
+
+    // Randomly spinning hexagons overlaid on the grid
+    Repeater {
+        model: 12
+
+        Item {
+            id: spinHex
+            required property int index
+
+            readonly property real _size: 50
+            readonly property real _dx: _size * 1.5
+            readonly property real _dy: _size * Math.sqrt(3)
+
+            // Pick a random grid position
+            readonly property int _col: Math.floor(Math.random() * (root.width / _dx))
+            readonly property int _row: Math.floor(Math.random() * (root.height / _dy))
+
+            x: _col * _dx - _size * 0.48
+            y: _row * _dy + (_col % 2 ? _dy / 2 : 0) - _size * 0.48
+            width: _size
+            height: _size
+
+            // Color from position (matching the canvas gradient)
+            readonly property real _fx: Math.max(0, Math.min(1, (_col * _dx) / root.width))
+            readonly property color _c0: M.Theme.base0C
+            readonly property color _c1: M.Theme.base0E
+            readonly property color _c2: M.Theme.base09
+            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)
+
+            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();
+                }
+            }
+
+            Timer {
+                interval: 3000 + Math.random() * 12000
+                running: true
+                repeat: true
+                onTriggered: {
+                    interval = 3000 + Math.random() * 12000;
+                    spinAnim.duration = 1000 + Math.random() * 2000;
+                    spinAnim.start();
+                }
+            }
+
+            RotationAnimation {
+                id: spinAnim
+                target: spinHex
+                from: 0
+                to: 360
+                duration: 2000
+                easing.type: Easing.InOutCubic
+            }
+        }
+    }
 }