From 387b5af5c0984452e316f0f860482ed4b34ac6de Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Wed, 2 Jul 2025 16:45:44 +0000
Subject: [PATCH] feat: update AudioPlayer track name animation and add
 infinite scroll effect in CSS

---
 app/components/AudioPlayer.tsx |  4 ++--
 app/globals.css                | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index d4f60cc..be2ab56 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -370,9 +370,9 @@ export const AudioPlayer: React.FC = () => {
               height={40} 
               className="w-10 h-10 rounded-md flex-shrink-0" 
             />
-            <div className="flex-1 min-w-0 mx-3 group">
+            <div className="flex-1 min-w-0 mx-3">
               <div className="overflow-hidden">
-                <p className="font-semibold text-sm whitespace-nowrap group-hover:animate-scroll">
+                <p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
                   {currentTrack.name}
                 </p>
               </div>
diff --git a/app/globals.css b/app/globals.css
index 867f995..30d4145 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -15,6 +15,10 @@ body {
   .animate-scroll {
     animation: scroll 8s linear infinite;
   }
+  
+  .animate-infinite-scroll {
+    animation: infiniteScroll 10s linear infinite;
+  }
 }
 
 @keyframes scroll {
@@ -26,6 +30,15 @@ body {
   }
 }
 
+@keyframes infiniteScroll {
+  0% {
+    transform: translateX(15%);
+  }
+  100% {
+    transform: translateX(-215%);
+  }
+}
+
 @layer base {
   :root {
     --background: 240 10% 3.9%;