diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index 7805daa..5fdc7d1 100644 --- a/modules/OverviewBackdrop.qml +++ b/modules/OverviewBackdrop.qml @@ -20,10 +20,11 @@ PanelWindow { anchors.right: true anchors.bottom: true - // Solid dark background — base01 is darker than base00 + // Solid dark background Rectangle { anchors.fill: parent - color: M.Theme.base01 + color: M.Theme.base00 + opacity: 0.85 } // Hex grid with gradient-filled cells, no outlines @@ -81,81 +82,175 @@ PanelWindow { } } - // Randomly spinning hexagons overlaid on the grid + // 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 Repeater { - model: 12 - + 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 + } + ] Item { - id: spinHex - required property int index + required property var modelData + x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx + y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy - readonly property real _size: 50 - readonly property real _dx: _size * 1.5 - readonly property real _dy: _size * Math.sqrt(3) + Rectangle { + width: 60 + height: 1 + color: parent.modelData.col + opacity: 0.25 + } + Rectangle { + width: 1 + height: 60 + color: parent.modelData.col + opacity: 0.25 + } - // 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); + 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 } - 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(); - } + // 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 } - - RotationAnimation { - id: spinAnim - target: spinHex - from: 0 - to: 360 - duration: 2000 - easing.type: Easing.InOutCubic + NumberAnimation on y { + from: Math.random() * root.height + to: Math.random() * root.height + duration: 30000 + index * 2000 + loops: Animation.Infinite + easing.type: Easing.InOutSine } } }