companion: fade the new frame in over the old one, dj loop faster

Both images faded at once, so mid-swap each sat near half opacity and she
blinked see-through on every turn of the dj loop. The incoming frame now
fades in on top while the outgoing one stays opaque under it. With the
blink gone the loop could run faster: 300 ms a frame, from 450.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2 files changed, 12 insertions, 5 deletions

diff --git a/desktop/companion/Companion.qml b/desktop/companion/Companion.qml
index 8c049f2..dfdc474 100644
--- a/desktop/companion/Companion.qml
+++ b/desktop/companion/Companion.qml
@@ -462,7 +462,7 @@ PanelWindow {
     // Frames Mood names that are really a loop: the frame names its cycle
     // and how fast it turns. Everything else shows as named.
     readonly property var cycles: ({
-        dj: { frames: ["dj", "dj-scratch"], ms: 450 },
+        dj: { frames: ["dj", "dj-scratch"], ms: 300 },
         headbang: { frames: ["headbang-up", "headbang-down"], ms: 220 },
     })
     property int cycleIndex: 0
diff --git a/desktop/companion/Figure.qml b/desktop/companion/Figure.qml
index df21bf5..285e2cb 100644
--- a/desktop/companion/Figure.qml
+++ b/desktop/companion/Figure.qml
@@ -44,6 +44,13 @@ Item {
     onSourceChanged: s.load(s.source)
     Component.onCompleted: s.load(s.source)
 
+    // The incoming frame fades in on top while the outgoing one stays
+    // opaque under it. Fading both at once left each near half opacity
+    // mid-swap, and she blinked see-through on every turn of the dj loop.
+    property real fade: 1
+    NumberAnimation { id: fadeIn; target: s; property: "fade"; from: 0; to: 1; duration: 120 }
+    onFlipChanged: fadeIn.restart()
+
     function ready(img) {
         if (img.status === Image.Error && String(img.source) !== s.fallback) {
             img.source = s.fallback;
@@ -101,8 +108,8 @@ Item {
             width: implicitWidth / 2; height: implicitHeight / 2
             anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
             smooth: true; mipmap: true; asynchronous: true
-            opacity: s.flip ? 0 : 1
-            Behavior on opacity { NumberAnimation { duration: 120 } }
+            z: s.front === a ? 1 : 0
+            opacity: s.front === a ? s.fade : s.fade < 1 ? 1 : 0
             onStatusChanged: s.ready(a)
         }
         Image {
@@ -110,8 +117,8 @@ Item {
             width: implicitWidth / 2; height: implicitHeight / 2
             anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
             smooth: true; mipmap: true; asynchronous: true
-            opacity: s.flip ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 120 } }
+            z: s.front === b ? 1 : 0
+            opacity: s.front === b ? s.fade : s.fade < 1 ? 1 : 0
             onStatusChanged: s.ready(b)
         }
     }