Jannik/MelodyMuse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI polish: updated favicon, smoothed animated bars, and slowed down gradient animations

Browse Source
This commit is contained in:
Jannik
2026-06-04 00:28:02 +02:00
parent 3a2c738bd0
commit 7981b1d146
3 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+1 -1
View File
@@ -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>
src/index.css
+11 -12
View File
@@ -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%; }