zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: reduce ambient gradient banding with more stops and calmer animation (#1299)

increases gradient interpolation from 7 to 16 color stops for finer
transitions. removes brightness(1.08) oscillation from the breathing
animation — it amplified visible banding at color step boundaries.
no SVG noise filters this time.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4.6 (1M context) and committed by
GitHub 696fffa5 86b6bc26

+8 -8
+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 7 for smoother gradients (reduces banding) */ 71 + /** interpolate 3 color stops into 16 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 - // 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; 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; 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 <= 3; i++) { 81 - const t = i / 3; 80 + for (let i = 1; i <= HALF - 1; i++) { 81 + const t = i / (HALF - 1); 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
··· 644 644 } 645 645 646 646 @keyframes -global-ambient-drift { 647 - 0%, 100% { opacity: 0.35; filter: brightness(1); } 648 - 50% { opacity: 0.5; filter: brightness(1.08); } 647 + 0%, 100% { opacity: 0.35; } 648 + 50% { opacity: 0.45; } 649 649 } 650 650 651 651 /* background image with blur effect */