Solid player bar, gradient sliders and smooth progress

web-player/src/lib/components/player/TrackInfo.svelte

@@ -39,7 +39,7 @@
 	{:else}
 		<div class="size-cover-sm shrink-0 rounded-art bg-surface md:size-cover-md"></div>
 	{/if}
-	<div class="min-w-0 flex-1">
+	<div class="min-w-0">
 		<div class="flex min-w-0 items-center gap-1.5">
 			{#if player.current.explicit}
 				<ExplicitBadge />
@@ -60,7 +60,7 @@
 			pressed={isLiked}
 			onclick={toggleLike}
 		>
-			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.7} />
+			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.25} />
 		</IconButton>
 	{/if}
 </div>

web-player/src/lib/components/ui/primitives/Slider.svelte

@@ -24,7 +24,7 @@
 	oninput={handleInput}
 	aria-label={label}
 	class="mf-slider mf-slider-{variant}"
-	style="background:linear-gradient(to right, var(--mf-text-2) {percent}%, var(--mf-track) {percent}%)"
+	style="--p:{percent}%"
 />
 
 <style>
@@ -35,6 +35,17 @@
 		border-radius: 100px;
 		outline: none;
 		cursor: pointer;
+		background-image:
+			linear-gradient(
+				to right,
+				transparent var(--p),
+				color-mix(in srgb, var(--mf-text) 12%, var(--mf-bg)) var(--p)
+			),
+			var(--mf-slider-fill);
+		background-size:
+			100% 100%,
+			300% 100%;
+		animation: gradient-drift 10s linear infinite alternate;
 	}
 	.mf-slider-seek {
 		width: 100%;

web-player/src/lib/player/player.svelte.ts

@@ -208,10 +208,19 @@ class PlayerState {
 		});
 	}
 
-	#tickProgress = () => {
+	#clockTime = 0;
+	#clockStamp = 0;
+
+	#tickProgress = (now: number) => {
 		const audio = this.#audio;
 		if (!audio) return;
-		this.progress = audio.currentTime;
+		if (audio.currentTime !== this.#clockTime) {
+			this.#clockTime = audio.currentTime;
+			this.#clockStamp = now;
+		}
+		const elapsed = Math.min(0.25, (now - this.#clockStamp) / 1000);
+		const smooth = this.#clockTime + (audio.paused ? 0 : elapsed * audio.playbackRate);
+		this.progress = Math.min(smooth, Number.isFinite(audio.duration) ? audio.duration : smooth);
 		this.#rafId = requestAnimationFrame(this.#tickProgress);
 	};
 

web-player/src/lib/theme/tokens.ts

@@ -45,11 +45,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-bg': light ? `oklch(0.975 0.012 ${H})` : `oklch(0.068 0.008 ${H})`,
 		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.012 ${H})`,
 		'--mf-panel-bg': light ? 'rgba(255, 255, 255, 0.28)' : 'rgba(0, 0, 0, 0.16)',
-		'--mf-bar-bg': light ? `oklch(0.99 0.01 ${H} / 0.86)` : `oklch(0.105 0.012 ${H} / 0.9)`,
 		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.06)` : `oklch(0.62 0.02 ${H} / 0.05)`,
 		'--mf-ambient': light
 			? `radial-gradient(80% 70% at 12% 0%, ${glow(0.9, 0.05, 0.55)}, transparent 75%), radial-gradient(70% 60% at 88% 8%, ${glow(0.92, 0.035, 0.4)}, transparent 75%), radial-gradient(90% 70% at 50% 110%, ${glow(0.93, 0.03, 0.35)}, transparent 80%), linear-gradient(180deg, ${glow(0.96, 0.02, 0.4)}, transparent 60%)`
 			: `radial-gradient(75% 65% at 12% 0%, ${glow(0.3, 0.045, 0.5)}, transparent 75%), radial-gradient(65% 55% at 85% 5%, ${glow(0.24, 0.035, 0.35)}, transparent 75%), radial-gradient(90% 70% at 50% 105%, ${glow(0.18, 0.025, 0.3)}, transparent 80%), linear-gradient(180deg, ${glow(0.14, 0.02, 0.35)}, transparent 55%)`,
+		'--mf-slider-fill': light
+			? `linear-gradient(90deg, oklch(0.5 0.1 ${H}), oklch(0.68 0.11 ${r(h + 18, 1)}), oklch(0.5 0.1 ${H}))`
+			: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
 		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
 		'--mf-hero-bg': light
 			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`

web-player/src/routes/layout.css

@@ -131,9 +131,8 @@
 	transition-duration: var(--default-transition-duration);
 }
 @utility glass-bar {
-	background-color: var(--mf-bar-bg);
+	background-color: var(--mf-bg);
 	border-top: 1px solid var(--mf-hairline);
-	backdrop-filter: blur(24px);
 }
 @utility grid-cards {
 	display: grid;