quickshell fixes

quickshell/components/SplitText.qml

@@ -1,8 +1,14 @@
 import QtQuick
 import "root:/config"
 
-// Display text with the wallpaper's RGB split baked in: a crimson and a cyan
-// ghost sitting a pixel off the white body. Drives most headings in the shell.
+// Display text, screen-printed: the body sits on a hard crust copy knocked a
+// pixel and a half down-right — the same offset `P5Panel` puts behind every
+// slab. Drives most headings in the shell.
+//
+// This used to carry a permanent RGB split, a blue and a mauve ghost either
+// side of the body. On crimson-and-black that read as misregistered print; on
+// Mocha's pastels it read as blur, and it turned every heading in the shell
+// soft. The two ghosts still exist, but only for the moment `glitch()` runs.
 Item {
     id: root
 
@@ -12,23 +18,34 @@ Item {
     property string family: Theme.fontDisplay
     property bool italic: true
     property color color: Theme.text
-    property real split: 1.6
-    property real splitOpacity: 0.85
     property int elide: Text.ElideNone
     property int horizontalAlignment: Text.AlignLeft
     property real letterSpacing: 0.5
 
+    // Print shadow. Scales gently with size so a 34px heading does not sit on
+    // the same hairline offset as an 11px label.
+    property real shadowOffset: Math.max(1, Math.round(root.pixelSize / 10))
+    property color shadowColor: Theme.ink
+
+    // Ghost offset and resting strength. Resting strength is zero, so the
+    // ghosts are invisible until `glitch()` kicks them out. A caller that sets
+    // `splitOpacity` is asking for the old permanent split and still gets it.
+    property real split: 1.6
+    property real splitOpacity: 0
+
+    // 0..1, driven only by `glitch()`. Kept apart from `split` and
+    // `splitOpacity` so the animation never has to remember a caller's values.
+    property real kick: 0
+
+    readonly property real ghostOffset: root.split + root.kick * 4
+    readonly property real ghostOpacity: Math.max(root.splitOpacity, root.kick * 0.85)
+
     implicitWidth: body.implicitWidth
     implicitHeight: body.implicitHeight
 
-    Text {
-        id: ghostRed
+    component Layer: Text {
         anchors.fill: parent
-        anchors.leftMargin: -root.split
-        anchors.topMargin: root.split * 0.4
         text: root.text
-        color: Theme.splitRed
-        opacity: root.splitOpacity
         elide: root.elide
         horizontalAlignment: root.horizontalAlignment
         verticalAlignment: Text.AlignVCenter
@@ -40,39 +57,33 @@ Item {
         renderType: Text.NativeRendering
     }
 
-    Text {
-        id: ghostCyan
-        anchors.fill: parent
-        anchors.leftMargin: root.split
-        anchors.topMargin: -root.split * 0.4
-        text: root.text
-        color: Theme.splitCyan
-        opacity: root.splitOpacity
-        elide: root.elide
-        horizontalAlignment: root.horizontalAlignment
-        verticalAlignment: Text.AlignVCenter
-        font.family: root.family
-        font.pixelSize: root.pixelSize
-        font.weight: root.weight
-        font.italic: root.italic
-        font.letterSpacing: root.letterSpacing
-        renderType: Text.NativeRendering
+    Layer {
+        anchors.leftMargin: root.shadowOffset
+        anchors.rightMargin: -root.shadowOffset
+        anchors.topMargin: root.shadowOffset
+        anchors.bottomMargin: -root.shadowOffset
+        color: root.shadowColor
     }
 
-    Text {
+    Layer {
+        visible: root.ghostOpacity > 0.01
+        anchors.leftMargin: -root.ghostOffset
+        anchors.topMargin: root.ghostOffset * 0.4
+        color: Theme.accent
+        opacity: root.ghostOpacity
+    }
+
+    Layer {
+        visible: root.ghostOpacity > 0.01
+        anchors.leftMargin: root.ghostOffset
+        anchors.topMargin: -root.ghostOffset * 0.4
+        color: Theme.alarm
+        opacity: root.ghostOpacity
+    }
+
+    Layer {
         id: body
-        anchors.fill: parent
-        text: root.text
         color: root.color
-        elide: root.elide
-        horizontalAlignment: root.horizontalAlignment
-        verticalAlignment: Text.AlignVCenter
-        font.family: root.family
-        font.pixelSize: root.pixelSize
-        font.weight: root.weight
-        font.italic: root.italic
-        font.letterSpacing: root.letterSpacing
-        renderType: Text.NativeRendering
     }
 
     // Kick the ghosts outward briefly — used on track changes, mode flips, etc.
@@ -83,14 +94,14 @@ Item {
     SequentialAnimation {
         id: glitchAnim
         NumberAnimation {
-            target: root; property: "split"
-            to: 5.5; duration: Theme.durFast
+            target: root; property: "kick"
+            to: 1; duration: Theme.durFast
             easing.type: Easing.OutExpo
         }
         NumberAnimation {
-            target: root; property: "split"
-            to: 1.6; duration: Theme.durSlow
-            easing.type: Easing.OutBack
+            target: root; property: "kick"
+            to: 0; duration: Theme.durSlow
+            easing.type: Easing.OutCubic
         }
     }
 }