From 694a26d04e537d30cfd5eca89d360e6b5db3c756 Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexav.gg>
Date: Wed, 28 Jan 2026 16:34:40 -0500
Subject: [PATCH] fix glitchy song title animation

---
 src/assets/main.css                    | 33 ++++++++++++++++++--------
 src/components/info/MusicComponent.tsx |  7 +++---
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index f01e873..d44fb93 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,16 +2,6 @@
 
 @theme {
     --breakpoint-xs: 400px;
-    --animate-scroll-left: scroll-left 10s linear infinite;
-
-    @keyframes scroll-left {
-        0% {
-            transform: translateX(50%);
-        }
-        100% {
-            transform: translateX(-50%);
-        }
-    }
 }
 
 body {
@@ -28,4 +18,27 @@ body {
         background-color:gray;
         border-radius: var(--radius-lg);
     }
+}
+
+.marquee {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.marquee-content {
+  display: inline-block;
+  animation: scroll 10s linear infinite;
+}
+
+.marquee-content span {
+  display: inline-block;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
 }
\ No newline at end of file
diff --git a/src/components/info/MusicComponent.tsx b/src/components/info/MusicComponent.tsx
index aeb41d1..2fd7da7 100644
--- a/src/components/info/MusicComponent.tsx
+++ b/src/components/info/MusicComponent.tsx
@@ -32,9 +32,10 @@ export default function MusicComponent() {
           <div className="flex align-middle">
             <img width="50" src={music.images[1]?.url} />
             <div className="pl-2 max-w-25">
-              <div className="overflow-hidden whitespace-nowrap">
-                <div className="inline-block animate-scroll-left">
-                  <p>{music.title}</p>
+              <div className="marquee">
+                <div className="marquee-content">
+                  <span>{music.title}&nbsp;&nbsp;</span>
+                  <span>{music.title}&nbsp;&nbsp;</span>
                 </div>
               </div>