- Increase canvas size from 8x8 to 64x64 to reduce visible pixelation
- Add small CSS blur(40px) to smooth the result
- Key: blur(40px) on 64x64 is much cheaper than blur(120px) on full image
- Adjusted brightness slightly darker (0.55x) for better text contrast
Performance problem:
- WebKitWebProcess consuming 97% CPU on one core
- Cause: CSS filter: blur(120px) on large image is extremely expensive
in WebKit/GTK which cannot GPU-accelerate this operation
Solution:
- Replace CSS blur with Canvas-based tiny thumbnail approach
- Draw image to 8x8 canvas, apply color adjustments, scale up via CSS
- Natural pixelation creates blur-like effect with ZERO CPU cost
- Remove backdrop-filter: blur() from header elements (use solid bg)
Also fixed:
- Change Mic icon to Mic2 to match rest of app
- Add missing i18n translations for player.credits and player.suggestions
Display modes:
- Coverflow: centered album art with track info
- Split: artwork + panel side by side (current default)
- Lyrics Focus: single line at a time, large centered text
- Queue Focus: full screen queue view
- Visualizer Focus: full screen visualizer
Background:
- Heavy CSS blur (120px) for abstract color blobs
- No recognizable image, just colors
Keyboard shortcuts: 1-5 to switch modes
Inspired by Cider 3's immersive player design.
Replace blur approach with full resolution artwork:
- Artwork scaled 115% to hide edges
- Strong vignette overlay fading to black at edges
- Gradient overlays for text readability (header, controls, lyrics)
- Slight desaturation for better contrast
- Simpler and more visually impactful
vicrodh