diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index 5fdc7d1..7805daa 100644 --- a/modules/OverviewBackdrop.qml +++ b/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 - opacity: 0.85 + color: M.Theme.base01 } // Hex grid with gradient-filled cells, no outlines @@ -82,175 +81,81 @@ PanelWindow { } } - // Horizontal scan line with glow trail - 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 + // Randomly spinning hexagons overlaid on the grid Repeater { - model: [ - { - 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 - } - ] + model: 12 + Item { - required property var modelData - x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx - y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy + id: spinHex + required property int index - Rectangle { - width: 60 - height: 1 - color: parent.modelData.col - opacity: 0.25 - } - Rectangle { - width: 1 - height: 60 - color: parent.modelData.col - opacity: 0.25 - } + readonly property real _size: 50 + readonly property real _dx: _size * 1.5 + readonly property real _dy: _size * Math.sqrt(3) - Rectangle { - width: 5 - height: 5 - radius: 2.5 - color: parent.modelData.col - SequentialAnimation on opacity { - loops: Animation.Infinite - NumberAnimation { - to: 0.1 - duration: 1500 + Math.random() * 1000 - easing.type: Easing.InOutSine - } - NumberAnimation { - to: 0.5 - duration: 1500 + Math.random() * 1000 - easing.type: Easing.InOutSine + // 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(); } } - } - } - // Floating particles - Repeater { - model: 15 - Rectangle { - required property int index - width: 2 - height: 2 - radius: 1 - 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 + Timer { + interval: 3000 + Math.random() * 12000 + running: true + repeat: true + onTriggered: { + interval = 3000 + Math.random() * 12000; + spinAnim.duration = 1000 + Math.random() * 2000; + spinAnim.start(); + } } - NumberAnimation on y { - from: Math.random() * root.height - to: Math.random() * root.height - duration: 30000 + index * 2000 - loops: Animation.Infinite - easing.type: Easing.InOutSine + + RotationAnimation { + id: spinAnim + target: spinHex + from: 0 + to: 360 + duration: 2000 + easing.type: Easing.InOutCubic } } }