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>

1 files changed, 11 insertions, 4 deletions

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)
         }
     }