Repository navigation
Backdrop: sampled-color gradient instead of stretched blurred artwork - #96
Merged
sanylax0 merged 2 commits intoJul 18, 2026
Merged
Conversation
Three regressions from the cached-backdrop change, fixed together: - The blur looked blocky: 40 px nearest-tier upscale was too coarse. BackdropRenderer now works on a 160 px square with a real clamped gaussian (sigma 20), matching the old live radius-60 look — still a one-time render per URL, zero per-frame cost. - The source art was soft: the renderer now tries maxresdefault and sddefault before falling back to the stored hqdefault thumbnail. - The blur didn't fill the screen (black band at the top): safe-area piercing doesn't survive inside scroll content, so the backdrop now lives as the Now Playing page's BACKGROUND behind hard insets in MainPagerView — backgrounds cover the full padded frame, bars included. homeLayout no longer embeds its own backdrop.
The upscaled-image blur still read as low-res and left dark bands. Do what Apple Music and Spotify do instead: sample the artwork's dominant colors (CIAreaAverage over top/bottom halves of the sharpest available thumbnail tier), tone-map them into a muted dark band where white content always reads, and paint a smooth vertical gradient. A gradient has no resolution, always fills the screen, and keeps the zero per-frame render cost of the jetsam fix. Crossfades between palettes on track change; seed-gradient fallback while sampling / for demo tracks.
sanylax0
approved these changes
Jul 18, 2026
This was referenced Jul 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Supersedes #95 (this branch contains its pager restructure commit plus the new renderer — close #95 in favor of this). Per the Apple Music / Spotify reference screenshots: those apps don't stretch a blurred image at all — they paint a smooth vertical gradient sampled from the artwork's colors. This adopts that treatment.
How
AlbumBackdroprenders a two-stopLinearGradient([top, bottom]palette per artwork URL), crossfading on track change; seed-gradient fallback while sampling and for demo tracks. A light top/bottom scrim anchors the status bar and chevron labels.BackdropRenderernow samples instead of rendering bitmaps: fetch the sharpest available thumbnail tier (maxresdefault→sddefault→ storedhqdefault),CIAreaAverageover the top and bottom halves, then tone-map — hue preserved, saturation softened (≤ 0.55), brightness pinned (0.45 top → 0.14 bottom) so near-white or near-black art still yields a legible, colored-dark backdrop..backgroundbehind the insets inMainPagerView, so it covers the entire screen including the status-bar band — no image, no resolution, no bands.Testing
On device: backdrop should look like the Spotify reference — a clean dominant-color wash fading darker toward the bottom, edge-to-edge, crisp at any size, crossfading smoothly between tracks. Knobs if you want a different mood: the two brightness pins (0.45/0.14) and the saturation cap (0.55) in
BackdropRenderer.toneMapped/samplePalette.🤖 Generated with Claude Code
https://claude.ai/code/session_013TJoWkqg8bzkGdzxWhWjWP
Generated by Claude Code