From 4276434cd2eff9e6cdc8dafa6aaa7f1e8aa4d70f Mon Sep 17 00:00:00 2001 From: Damocles Date: Sun, 12 Apr 2026 23:42:40 +0200 Subject: [PATCH] overview backdrop: full cyber - particles, corner marks, diagonal scan, darker base --- modules/OverviewBackdrop.qml | 345 ++++++++++++++++++++++++++++------- 1 file changed, 277 insertions(+), 68 deletions(-) diff --git a/modules/OverviewBackdrop.qml b/modules/OverviewBackdrop.qml index 06917bb..c4ea06d 100644 --- a/modules/OverviewBackdrop.qml +++ b/modules/OverviewBackdrop.qml @@ -20,102 +20,53 @@ PanelWindow { anchors.right: true anchors.bottom: true - // Slow drifting gradient background + // Dark base tint Rectangle { anchors.fill: parent - property real _phase: 0 - NumberAnimation on _phase { + color: M.Theme.base00 + opacity: 0.4 + } + + // Gradient wash — slowly shifting via animated stop positions + Rectangle { + anchors.fill: parent + property real _t: 0 + NumberAnimation on _t { from: 0 - to: 360 - duration: 30000 + to: 1 + duration: 20000 loops: Animation.Infinite } gradient: Gradient { orientation: Gradient.Horizontal GradientStop { position: 0 - color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.25) + color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.2) } GradientStop { position: 0.5 - color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.15) + color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.12) } GradientStop { position: 1 - color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.25) + color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.2) } } } - // Scanning line — slow horizontal sweep - Rectangle { - id: scanLine - width: 2 - height: parent.height - opacity: 0.3 - color: M.Theme.base0D - - NumberAnimation on x { - from: 0 - to: root.width - duration: 8000 - loops: Animation.Infinite - easing.type: Easing.InOutSine - } - - // Glow trail - Rectangle { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.left - width: 60 - 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.15) - } - } - } - } - - // Vertical scan line — slower - Rectangle { - id: vScanLine - width: parent.width - height: 1 - opacity: 0.2 - color: M.Theme.base0E - - NumberAnimation on y { - from: 0 - to: root.height - duration: 12000 - loops: Animation.Infinite - easing.type: Easing.InOutSine - } - } - - // Floating hex grid + // Hex grid Canvas { anchors.fill: parent - opacity: 0.15 - + opacity: 0.12 onPaint: { const ctx = getContext("2d"); const w = width, h = height; ctx.clearRect(0, 0, w, h); - ctx.strokeStyle = M.Theme.base05.toString(); + ctx.strokeStyle = M.Theme.base0D.toString(); ctx.lineWidth = 0.5; - - const size = 40; + const size = 50; const dx = size * 1.5; const dy = size * Math.sqrt(3); - for (let col = -1; col < w / dx + 1; col++) { for (let row = -1; row < h / dy + 1; row++) { const cx = col * dx; @@ -136,4 +87,262 @@ PanelWindow { } } } + + // Horizontal scan line with glow trail + Rectangle { + id: hScan + width: 2 + height: parent.height + opacity: 0.25 + 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.12) + } + } + } + Rectangle { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.right + width: 40 + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { + position: 0 + color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.06) + } + GradientStop { + position: 1 + color: "transparent" + } + } + } + } + + // Vertical scan line — different speed, different color + Rectangle { + id: vScan + width: parent.width + height: 1 + opacity: 0.15 + color: M.Theme.base0E + NumberAnimation on y { + from: -50 + to: root.height + 50 + duration: 12000 + loops: Animation.Infinite + easing.type: Easing.InOutSine + } + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.top + height: 80 + gradient: Gradient { + GradientStop { + position: 0 + color: "transparent" + } + GradientStop { + position: 1 + color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.06) + } + } + } + } + + // Diagonal scan — third line, slowest, warm color + Rectangle { + id: diagScan + width: 1 + height: parent.height * 1.5 + opacity: 0.1 + 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 — top-left + Rectangle { + x: 40 + y: 40 + width: 60 + height: 1 + color: M.Theme.base0C + opacity: 0.3 + } + Rectangle { + x: 40 + y: 40 + width: 1 + height: 60 + color: M.Theme.base0C + opacity: 0.3 + } + // Top-right + Rectangle { + x: parent.width - 100 + y: 40 + width: 60 + height: 1 + color: M.Theme.base09 + opacity: 0.3 + } + Rectangle { + x: parent.width - 41 + y: 40 + width: 1 + height: 60 + color: M.Theme.base09 + opacity: 0.3 + } + // Bottom-left + Rectangle { + x: 40 + y: parent.height - 41 + width: 60 + height: 1 + color: M.Theme.base0E + opacity: 0.3 + } + Rectangle { + x: 40 + y: parent.height - 100 + width: 1 + height: 60 + color: M.Theme.base0E + opacity: 0.3 + } + // Bottom-right + Rectangle { + x: parent.width - 100 + y: parent.height - 41 + width: 60 + height: 1 + color: M.Theme.base08 + opacity: 0.3 + } + Rectangle { + x: parent.width - 41 + y: parent.height - 100 + width: 1 + height: 60 + color: M.Theme.base08 + opacity: 0.3 + } + + // Pulsing corner dots + Repeater { + model: [ + { + cx: 40, + cy: 40, + col: M.Theme.base0C + }, + { + cx: root.width - 41, + cy: 40, + col: M.Theme.base09 + }, + { + cx: 40, + cy: root.height - 41, + col: M.Theme.base0E + }, + { + cx: root.width - 41, + cy: root.height - 41, + col: M.Theme.base08 + } + ] + Rectangle { + required property var modelData + x: modelData.cx - 2 + y: modelData.cy - 2 + width: 5 + height: 5 + radius: 2.5 + color: modelData.col + + SequentialAnimation on opacity { + loops: Animation.Infinite + NumberAnimation { + to: 0.15 + duration: 1500 + Math.random() * 1000 + easing.type: Easing.InOutSine + } + NumberAnimation { + to: 0.6 + duration: 1500 + Math.random() * 1000 + easing.type: Easing.InOutSine + } + } + } + } + + // Floating particles — slow drifting dots + Repeater { + model: 20 + 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.15 + Math.random() * 0.15 + x: Math.random() * root.width + y: Math.random() * root.height + + NumberAnimation on x { + from: -20 + to: root.width + 20 + duration: 20000 + index * 3000 + loops: Animation.Infinite + } + NumberAnimation on y { + from: Math.random() * root.height + to: Math.random() * root.height + duration: 30000 + index * 2000 + loops: Animation.Infinite + easing.type: Easing.InOutSine + } + } + } }