Work · 2026
Zen Mode
A fullscreen overlay for Spotify whose SVG backdrop follows the mood of the current track.
At a glance
- Scene engine that infers the mood from title, artist and album
- Five hand-drawn scenes, every one of them inline SVG
- No external images, which keeps it CSP-compatible
- Toggled with F8, and the controls hide themselves
- Decorative animation off once prefers-reduced-motion is set
The idea
Spotify in fullscreen still shows you Spotify: sidebars, lists, buttons. Zen Mode hides all of that and shows a large cover on frosted glass instead, title and artist in a serif/sans pairing, a progress bar, and a backdrop that suits the current track.
It matches kpop-theme in colour, but works on its own just as well.
The scene engine
The extension reads the title, artist and album of the current track and looks for clues: Hangul or Kana characters, known K-pop and anime artists, “OST” in the album title, keywords from lo-fi and chillhop. That resolves to one of five scenes: K-pop neon night, K-drama rain, anime sunset or lo-fi rainy window. When none of them fit, a blurred treatment of the cover art remains.
The badge in the top left cycles through them by hand: Auto → Anime → K-Pop → Lo-Fi → K-Drama → Album Aura → Auto.
Why all of it is SVG
Spotify’s Content-Security-Policy blocks external images and data: URIs. An overlay that
ships its backdrops as PNGs, or fetches them, does not work there.
Every scene is therefore hand-built as inline SVG: gradients, raindrops, stars and window frames all sit in the DOM as markup. That is more work than a few image files, but it gets past the CSP, scales losslessly to any resolution, and can be animated in CSS.
Small things
F8 toggles from anywhere, except while you are typing in an input: clicking into the search
box should not launch a fullscreen mode. The controls hide themselves until the mouse moves
again. And once the OS reports prefers-reduced-motion, all decorative animation holds still,
while the scenes themselves stay visible.