From 7981b1d14695ba1ee454215479c5a902f54c9149 Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Thu, 4 Jun 2026 00:28:02 +0200
Subject: [PATCH] UI polish: updated favicon, smoothed animated bars, and
 slowed down gradient animations

---
 public/favicon.svg        |  6 +++---
 src/components/Footer.tsx |  2 +-
 src/index.css             | 23 +++++++++++------------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/public/favicon.svg b/public/favicon.svg
index 0d729f2..43d9802 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
   <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#7c3aed"/>
-      <stop offset="1" stop-color="#06b6d4"/>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e879f9"/>
+      <stop offset="1" stop-color="#8b5cf6"/>
     </linearGradient>
   </defs>
   <rect width="32" height="32" rx="7" fill="#080810"/>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 20df59d..7173cfd 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,7 +5,7 @@ export function Footer() {
   return (
     <footer className="shrink-0 h-8 flex items-center px-6 border-t border-border bg-bg/50 backdrop-blur-sm">
       <p className="text-[10px] font-semibold text-fg-muted uppercase tracking-wider">
-        <span className="gradient-text font-bold">MelodyMuse</span>
+        <span className="gradient-text-animated font-bold">MelodyMuse</span>
         <span className="mx-1.5 opacity-40">·</span>
         {t.appSubtitle}
       </p>
diff --git a/src/index.css b/src/index.css
index 7cec352..7504f15 100644
--- a/src/index.css
+++ b/src/index.css
@@ -146,7 +146,7 @@
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
-        animation: gradient-shift 6s linear infinite;
+        animation: gradient-shift 20s linear infinite;
     }
 
     .gradient-bg {
@@ -194,7 +194,7 @@
         animation: blob-drift-3 26s ease-in-out infinite;
     }
 
-    /* Animated logo bars (5 bars, matching favicon heights, slow) */
+    /* Animated logo bars (5 bars, matching favicon heights, smooth scaleY) */
     .music-bar {
         display: inline-block;
         width: 3px;
@@ -203,19 +203,18 @@
         transform-origin: bottom center;
         opacity: 0.9;
     }
-    .music-bar-1 { animation: bar-bounce-1 8.0s ease-in-out infinite; }
-    .music-bar-2 { animation: bar-bounce-2 11.0s ease-in-out infinite; }
-    .music-bar-3 { animation: bar-bounce-3 9.0s ease-in-out infinite; }
-    .music-bar-4 { animation: bar-bounce-4 13.0s ease-in-out infinite; }
-    .music-bar-5 { animation: bar-bounce-5 10.0s ease-in-out infinite; }
+    .music-bar-1 { height: 12px; animation: bar-scale 8.0s ease-in-out infinite; }
+    .music-bar-2 { height: 22px; animation: bar-scale 11.0s ease-in-out infinite; }
+    .music-bar-3 { height: 10px; animation: bar-scale 9.0s ease-in-out infinite; }
+    .music-bar-4 { height: 16px; animation: bar-scale 13.0s ease-in-out infinite; }
+    .music-bar-5 { height: 8px; animation: bar-scale 10.0s ease-in-out infinite; }
 }
 
 /* Keyframes */
-@keyframes bar-bounce-1 { 0%, 100% { height: 6px; } 50% { height: 12px; } }
-@keyframes bar-bounce-2 { 0%, 100% { height: 11px; } 50% { height: 22px; } }
-@keyframes bar-bounce-3 { 0%, 100% { height: 5px; } 50% { height: 10px; } }
-@keyframes bar-bounce-4 { 0%, 100% { height: 8px; } 50% { height: 16px; } }
-@keyframes bar-bounce-5 { 0%, 100% { height: 4px; } 50% { height: 8px; } }
+@keyframes bar-scale {
+    0%, 100% { transform: scaleY(0.5); }
+    50% { transform: scaleY(1); }
+}
 
 @keyframes gradient-shift {
     0% { background-position: 0% 50%; }