From 5c994401e944e87e878b731152babc28e07093c9 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Sun, 16 Aug 2026 11:57:11 +1000
Subject: [PATCH] Fixed marquee animation bug

---
 now-playing/script.js                | 27 +++++++++++++++------------
 now-playing/themes/compact/script.js | 11 +++++++----
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/now-playing/script.js b/now-playing/script.js
index 78c8f2d..63cde23 100644
--- a/now-playing/script.js
+++ b/now-playing/script.js
@@ -543,19 +543,22 @@ function ApplyMarquee(label, text) {
         });
 
         // 2. Animate Mask Variables simultaneously to keep soft edges synced
+        const maxOffset = 1;
+        const fadeBuffer = 0.02;
+
         label.animate([
-            { '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
-            { '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
-            { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p1 + 0.02 },
-            { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p2 - 0.02 },
-            { '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
-            { '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
-            { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p3 + 0.02 },
-            { '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
-        ], {
-            duration: totalMs,
-            iterations: Infinity
-        });
+                { '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
+                { '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.max(0, p2 - fadeBuffer) },
+                { '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
+                { '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p3 + fadeBuffer, maxOffset) },
+                { '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
+            ], {
+                duration: totalMs,
+                iterations: Infinity
+            });
 
         label.classList.add('is-overflowing');
     }
diff --git a/now-playing/themes/compact/script.js b/now-playing/themes/compact/script.js
index 4b10cb0..54b3d1f 100644
--- a/now-playing/themes/compact/script.js
+++ b/now-playing/themes/compact/script.js
@@ -198,15 +198,18 @@ function UpdateSingleSongLabel(containerId, trackName, artistName) {
                 iterations: Infinity
             });
 
-            // 2. Animate Mask Variables simultaneously on the container
+            // 2. Animate Mask Variables simultaneously to keep soft edges synced
+            const maxOffset = 1;
+            const fadeBuffer = 0.02;
+
             container._anim = container.animate([
                 { '--mask-left': 'black', '--mask-right': 'transparent', offset: 0 },
                 { '--mask-left': 'black', '--mask-right': 'transparent', offset: p1 },
-                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p1 + 0.02 },
-                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p2 - 0.02 },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p1 + fadeBuffer, maxOffset) },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.max(0, p2 - fadeBuffer) },
                 { '--mask-left': 'transparent', '--mask-right': 'black', offset: p2 },
                 { '--mask-left': 'transparent', '--mask-right': 'black', offset: p3 },
-                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: p3 + 0.02 },
+                { '--mask-left': 'transparent', '--mask-right': 'transparent', offset: Math.min(p3 + fadeBuffer, maxOffset) },
                 { '--mask-left': 'black', '--mask-right': 'transparent', offset: 1 }
             ], {
                 duration: totalMs,