overview backdrop: full cyber - particles, corner marks, diagonal scan, darker base
This commit is contained in:
Damocles
parent
df2546ebb2
commit
4276434cd2
1 changed files with 277 additions and 68 deletions
|
|
@ -20,102 +20,53 @@ PanelWindow {
|
||||||
anchors.right: true
|
anchors.right: true
|
||||||
anchors.bottom: true
|
anchors.bottom: true
|
||||||
|
|
||||||
// Slow drifting gradient background
|
// Dark base tint
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
property real _phase: 0
|
color: M.Theme.base00
|
||||||
NumberAnimation on _phase {
|
opacity: 0.4
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gradient wash — slowly shifting via animated stop positions
|
||||||
|
Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
property real _t: 0
|
||||||
|
NumberAnimation on _t {
|
||||||
from: 0
|
from: 0
|
||||||
to: 360
|
to: 1
|
||||||
duration: 30000
|
duration: 20000
|
||||||
loops: Animation.Infinite
|
loops: Animation.Infinite
|
||||||
}
|
}
|
||||||
gradient: Gradient {
|
gradient: Gradient {
|
||||||
orientation: Gradient.Horizontal
|
orientation: Gradient.Horizontal
|
||||||
GradientStop {
|
GradientStop {
|
||||||
position: 0
|
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 {
|
GradientStop {
|
||||||
position: 0.5
|
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 {
|
GradientStop {
|
||||||
position: 1
|
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
|
// Hex grid
|
||||||
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
|
|
||||||
Canvas {
|
Canvas {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
opacity: 0.15
|
opacity: 0.12
|
||||||
|
|
||||||
onPaint: {
|
onPaint: {
|
||||||
const ctx = getContext("2d");
|
const ctx = getContext("2d");
|
||||||
const w = width, h = height;
|
const w = width, h = height;
|
||||||
ctx.clearRect(0, 0, w, h);
|
ctx.clearRect(0, 0, w, h);
|
||||||
ctx.strokeStyle = M.Theme.base05.toString();
|
ctx.strokeStyle = M.Theme.base0D.toString();
|
||||||
ctx.lineWidth = 0.5;
|
ctx.lineWidth = 0.5;
|
||||||
|
const size = 50;
|
||||||
const size = 40;
|
|
||||||
const dx = size * 1.5;
|
const dx = size * 1.5;
|
||||||
const dy = size * Math.sqrt(3);
|
const dy = size * Math.sqrt(3);
|
||||||
|
|
||||||
for (let col = -1; col < w / dx + 1; col++) {
|
for (let col = -1; col < w / dx + 1; col++) {
|
||||||
for (let row = -1; row < h / dy + 1; row++) {
|
for (let row = -1; row < h / dy + 1; row++) {
|
||||||
const cx = col * dx;
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue