vinzenz/nova-shell
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

background overlay: neon cyberpunk clock with glow, color cycling, seconds bar

Browse source
This commit is contained in:
Damocles 2026-04-12 23:06:54 +02:00
parent 4715ab9bb6
commit 81d0da4cd7
1 changed files with 142 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

192
modules/BackgroundOverlay.qml
View file

@ -1,4 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Effects
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import "." as M import "." as M
@ -27,72 +28,163 @@ PanelWindow {
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 8 spacing: 12
Row { // Neon clock
Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: clockRow.height
Text { // Glow layer — rendered offscreen, only its neon halo is visible
text: Qt.formatDateTime(clock.date, "HH") Row {
color: M.Theme.base05 id: glowSource
opacity: 0.7 visible: false
font.pixelSize: 72 anchors.centerIn: parent
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: colon
text: ":"
font.pixelSize: 72
anchors.verticalCenter: parent.verticalCenter
font.family: M.Theme.fontFamily
font.bold: true
property int _colorIdx: 0 Text {
readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05] text: Qt.formatDateTime(clock.date, "HH")
color: _colors[_colorIdx % _colors.length] color: M.Theme.base0D
font.pixelSize: 72
SequentialAnimation { font.family: M.Theme.fontFamily
loops: Animation.Infinite font.bold: true
running: true anchors.verticalCenter: parent.verticalCenter
NumberAnimation { }
target: colon Text {
property: "opacity" text: ":"
to: 0.1 color: colon._colors[colon._colorIdx % colon._colors.length]
duration: 1000 font.pixelSize: 72
easing.type: Easing.InOutSine font.family: M.Theme.fontFamily
} font.bold: true
ScriptAction { opacity: colon.opacity
script: colon._colorIdx++ anchors.verticalCenter: parent.verticalCenter
} }
NumberAnimation { Text {
target: colon text: Qt.formatDateTime(clock.date, "mm")
property: "opacity" color: M.Theme.base0E
to: 0.7 font.pixelSize: 72
duration: 1000 font.family: M.Theme.fontFamily
easing.type: Easing.InOutSine font.bold: true
} anchors.verticalCenter: parent.verticalCenter
} }
} }
Text {
text: Qt.formatDateTime(clock.date, "mm") MultiEffect {
color: M.Theme.base05 source: glowSource
opacity: 0.7 anchors.fill: glowSource
anchors.verticalCenter: parent.verticalCenter shadowEnabled: true
font.pixelSize: 72 shadowColor: M.Theme.base0D
font.family: M.Theme.fontFamily shadowBlur: 1.0
font.bold: true shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
// Actual visible text on top of the glow
Row {
id: clockRow
anchors.centerIn: parent
Text {
text: Qt.formatDateTime(clock.date, "HH")
color: M.Theme.base0D
opacity: 0.85
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: colon
text: ":"
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
property int _colorIdx: 0
readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
color: _colors[_colorIdx % _colors.length]
SequentialAnimation {
loops: Animation.Infinite
running: true
NumberAnimation {
target: colon
property: "opacity"
to: 0.1
duration: 1000
easing.type: Easing.InOutSine
}
ScriptAction {
script: colon._colorIdx++
}
NumberAnimation {
target: colon
property: "opacity"
to: 0.85
duration: 1000
easing.type: Easing.InOutSine
}
}
}
Text {
text: Qt.formatDateTime(clock.date, "mm")
color: M.Theme.base0E
opacity: 0.85
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
} }
} }
// Date with subtle glow
Text { Text {
id: dateText
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy") text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
color: M.Theme.base05 color: M.Theme.base05
opacity: 0.5 opacity: 0.5
font.pixelSize: 18 font.pixelSize: 18
font.family: M.Theme.fontFamily font.family: M.Theme.fontFamily
font.letterSpacing: 4
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: M.Theme.base0D
shadowBlur: 0.4
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
}
// Seconds as a thin animated progress bar
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: 2
Rectangle {
anchors.fill: parent
color: M.Theme.base02
radius: 1
opacity: 0.3
}
Rectangle {
width: parent.width * (clock.date.getSeconds() / 59)
height: parent.height
color: colon._colors[colon._colorIdx % colon._colors.length]
radius: 1
opacity: 0.6
Behavior on width {
NumberAnimation {
duration: 300
}
}
}
} }
} }
} }