audio streaming app
plyr.fm
Revert "fix: reduce ambient gradient banding with more stops and calmer animation (#1299)"
This reverts commit 696fffa578155fe931c25fba80027ef885decaca.
+8
-8
+6
-6
frontend/src/lib/ambient.svelte.ts
+6
-6
frontend/src/lib/ambient.svelte.ts
···
68
68
return Math.min(1, Math.max(0, (temperature - cold) / (hot - cold)));
69
69
}
70
70
71
-
/** interpolate 3 color stops into 16 for smoother gradients (reduces banding) */
71
+
/** interpolate 3 color stops into 7 for smoother gradients (reduces banding) */
72
72
function smoothGradient(c1: RGB, c2: RGB, c3: RGB): string {
73
73
const lerp = (a: number, b: number, t: number) => Math.round(a + (b - a) * t);
74
74
const stops: string[] = [];
75
-
const HALF = 8; // 8 stops per segment, shared midpoint = 15 total
76
-
for (let i = 0; i <= HALF; i++) {
77
-
const t = i / HALF;
75
+
// 4 stops from c1→c2, 4 stops from c2→c3 (c2 shared = 7 total)
76
+
for (let i = 0; i <= 3; i++) {
77
+
const t = i / 3;
78
78
stops.push(`rgb(${lerp(c1.r, c2.r, t)}, ${lerp(c1.g, c2.g, t)}, ${lerp(c1.b, c2.b, t)})`);
79
79
}
80
-
for (let i = 1; i <= HALF - 1; i++) {
81
-
const t = i / (HALF - 1);
80
+
for (let i = 1; i <= 3; i++) {
81
+
const t = i / 3;
82
82
stops.push(`rgb(${lerp(c2.r, c3.r, t)}, ${lerp(c2.g, c3.g, t)}, ${lerp(c2.b, c3.b, t)})`);
83
83
}
84
84
return `linear-gradient(135deg, ${stops.join(', ')})`;
+2
-2
frontend/src/routes/+layout.svelte
+2
-2
frontend/src/routes/+layout.svelte
···
644
644
}
645
645
646
646
@keyframes -global-ambient-drift {
647
-
0%, 100% { opacity: 0.35; }
648
-
50% { opacity: 0.45; }
647
+
0%, 100% { opacity: 0.35; filter: brightness(1); }
648
+
50% { opacity: 0.5; filter: brightness(1.08); }
649
649
}
650
650
651
651
/* background image with blur effect */