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
public/favicon.svg
+3 -3
View File
@@ -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"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 643 B

After

Width:  |  Height:  |  Size: 642 B

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%; }