audio streaming app
plyr.fm
Revert "fix: eliminate diagonal banding in live theme ambient gradient (#1298)"
This reverts commit 19d8c7c40998533eb43dba5e2aaa202fbfff6eb3.
+10
-20
+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(', ')})`;
+3
-13
frontend/src/routes/+layout.svelte
+3
-13
frontend/src/routes/+layout.svelte
···
450
450
</script>
451
451
</svelte:head>
452
452
453
-
<!-- SVG noise filter for gradient dithering (eliminates color banding) -->
454
-
<svg style="position:absolute;width:0;height:0" aria-hidden="true">
455
-
<filter id="ambient-noise">
456
-
<feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="4" stitchTiles="stitch" />
457
-
<feColorMatrix type="saturate" values="0" />
458
-
<feBlend in="SourceGraphic" mode="soft-light" />
459
-
</filter>
460
-
</svg>
461
-
462
453
<div class="app-layout">
463
454
<main class="main-content" class:with-queue={showQueue && !isEmbed}>
464
455
{@render children?.()}
···
635
626
-webkit-font-smoothing: antialiased;
636
627
}
637
628
638
-
/* ambient weather gradient layer + noise dither to eliminate color banding */
629
+
/* ambient weather gradient layer */
639
630
:global(body::after) {
640
631
content: '';
641
632
position: fixed;
···
650
641
:global(body.ambient-active::after) {
651
642
opacity: 0.4;
652
643
animation: ambient-drift 12s ease-in-out infinite;
653
-
filter: url(#ambient-noise);
654
644
}
655
645
656
646
@keyframes -global-ambient-drift {
657
-
0%, 100% { opacity: 0.35; }
658
-
50% { opacity: 0.45; }
647
+
0%, 100% { opacity: 0.35; filter: brightness(1); }
648
+
50% { opacity: 0.5; filter: brightness(1.08); }
659
649
}
660
650
661
651
/* background image with blur effect */