From 81d0da4cd713fbfb15a6e3d00f29049e864e4c8b Mon Sep 17 00:00:00 2001 From: Damocles Date: Sun, 12 Apr 2026 23:06:54 +0200 Subject: [PATCH] background overlay: neon cyberpunk clock with glow, color cycling, seconds bar --- modules/BackgroundOverlay.qml | 192 +++++++++++++++++++++++++--------- 1 file changed, 142 insertions(+), 50 deletions(-) diff --git a/modules/BackgroundOverlay.qml b/modules/BackgroundOverlay.qml index 0328eb5..696131c 100644 --- a/modules/BackgroundOverlay.qml +++ b/modules/BackgroundOverlay.qml @@ -1,4 +1,5 @@ import QtQuick +import QtQuick.Effects import Quickshell import Quickshell.Wayland import "." as M @@ -27,72 +28,163 @@ PanelWindow { Column { anchors.centerIn: parent - spacing: 8 + spacing: 12 - Row { + // Neon clock + Item { anchors.horizontalCenter: parent.horizontalCenter + width: clockRow.width + height: clockRow.height - Text { - text: Qt.formatDateTime(clock.date, "HH") - color: M.Theme.base05 - opacity: 0.7 - font.pixelSize: 72 - 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 + // Glow layer — rendered offscreen, only its neon halo is visible + Row { + id: glowSource + visible: false + anchors.centerIn: parent - 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.7 - duration: 1000 - easing.type: Easing.InOutSine - } + Text { + text: Qt.formatDateTime(clock.date, "HH") + color: M.Theme.base0D + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true + anchors.verticalCenter: parent.verticalCenter + } + Text { + text: ":" + color: colon._colors[colon._colorIdx % colon._colors.length] + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true + opacity: colon.opacity + anchors.verticalCenter: parent.verticalCenter + } + Text { + text: Qt.formatDateTime(clock.date, "mm") + color: M.Theme.base0E + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true + anchors.verticalCenter: parent.verticalCenter } } - Text { - text: Qt.formatDateTime(clock.date, "mm") - color: M.Theme.base05 - opacity: 0.7 - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 72 - font.family: M.Theme.fontFamily - font.bold: true + + MultiEffect { + source: glowSource + anchors.fill: glowSource + shadowEnabled: true + shadowColor: M.Theme.base0D + shadowBlur: 1.0 + 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 { + id: dateText anchors.horizontalCenter: parent.horizontalCenter text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy") color: M.Theme.base05 opacity: 0.5 font.pixelSize: 18 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 + } + } + } } } }