Serein

Serein started with something I have loved since the old demoscene graphics, and later Winamp and the visualizers built into different music players. There was something special about watching abstract graphics respond to music in real time. Even when the technology was limited, those visuals could give a track another dimension, and I wanted to explore what that idea could become today.

There is also a more practical reason behind the project. I now have this huge 65 inch LG Gallery screen in front of me, and most days it becomes an extension of work with more agents, more terminals and more interfaces. Sometimes I do not want to fill it with another tool. I want the opposite, a clean, dark image that can sit quietly in the background while music is playing. This is especially true around dawn, when the room is still dark and a slow music reactive composition feels much more relaxing than another dashboard demanding attention.

The idea was to turn the music playing on Spotify into full screen abstract artwork. Not a traditional visualizer with equalizer bars, bouncing circles or an album cover in the middle. I wanted something minimal and atmospheric, with texture, depth and enough movement to feel connected to the music. With the current generation of coding agents, building the application was the easy part. Making it beautiful was not.

A working shader is not a designed composition

The first version arrived very quickly. It had WebGL shaders, Spotify authentication, several presets and a minimal interface, so technically it was already an application. Visually, most of it was terrible. It is easy to connect volume to the size of an object, bass to distortion and transients to brightness. Suddenly, something moves when music plays, but that does not mean it feels connected to the music or that it looks good.

The first presets had all the usual procedural art problems: generic blobs, thin neon lines, simple shapes and movement everywhere without any visual reason. They looked like shader demonstrations rather than composed artwork. Veil was the exception. It was essentially a membrane held between different parts of the sound, but it had restraint, asymmetry and enough negative space to feel intentional. It reacted without becoming an equalizer, and that became the standard for the rest of the project.

I also generated several concept covers for Serein. Some had exactly the depth, translucent materials and organic feeling I wanted, but translating them into live presets produced results that looked almost nothing like the images. A static image only needs one convincing frame. A live preset has to survive thousands of frames, different screen ratios, different songs, quiet and loud sections, colour changes and random variations. A soft translucent surface can easily become a few ugly lines, while a sculptural form turns into a flat band. The agent can change noise functions, coordinates and colour ramps, but it cannot automatically understand the visual relationship I have in my head. The process became much closer to art direction: describe the feeling, translate it into behaviour, render it, understand why it looks wrong and change the rules again.

Spotify was not actually the audio source

The original plan was to connect directly to Spotify and use the playing track as the visual signal. Spotify can provide the track, artist, playback position and active device through its playback API, but it does not provide the raw audio signal needed to analyse bass, percussion and frequencies. Its policy also explicitly prohibits synchronizing Spotify recordings with visual media.

This created a strange first version. Serein knew which song was playing, but the artwork was not actually hearing it. A microphone was possible, but I normally listen through AirPods, and recording the room was not the experience I wanted. The practical solution was browser tab capture. I can open Spotify Web Player, select its tab and share the audio directly. The browser’s getDisplayMedia() API provides the audio stream when supported, allowing Serein to analyse it before it reaches the AirPods.

The application also accepts audio files and microphone input for records, live music or anything playing outside the browser. Spotify now provides the title and playback progress, while the actual visual signal is analysed separately and remains local. It is not the direct Spotify integration I originally imagined, but it is a much more honest architecture.

Hearing music instead of volume

Capturing the signal only solved part of the problem. The first analyser compressed the track into a few smoothed values, so every preset received almost the same information and used it to produce small movements. The visuals were reading loudness, not music. A browser analyser cannot perform true instrument separation, but it can extract enough structure to make different parts of a track visible.

The current version separates the signal into seven adaptive frequency regions and detects different envelopes for kicks, snares and hi hats. It estimates tempo, follows spectral brightness and detects swells and drops. There are also two versions of the spectrum: a slower one that follows sustained instruments and controls the geometry, and a faster one that catches transients and controls light and smaller details. That distinction made a huge difference because the whole image no longer jumps with every hi hat. Shape can remember while light reacts immediately.

The presets interpret that information differently. Veil remains a membrane between low and high frequencies. Bloom releases ink like rings from the beat. Coil distributes the spectrum along one continuous body. Ink behaves like pigment pushed by the low end, while Harp uses sixteen strings that become visible when their part of the spectrum is active. They are different ways of listening rather than different colours applied to the same effect.

Taste is still the difficult part

Serein reinforced something I keep discovering with agentic coding. Generating an application is becoming easy. A model can build an audio analyser, authentication flow, WebGL renderer and responsive interface incredibly quickly, but it can also produce an enormous amount of ugly work just as quickly.

An agent cannot give a project taste. It gives me speed and technical reach, but I still need to recognise when something is wrong, explain why and reject technically valid work until the visual idea becomes clearer. A shader can compile perfectly and still feel like a cheap screensaver. A preset can respond to every frequency and still have no relationship with the music. A generated cover can be beautiful and still be useless as a live system. There is no build command for elegance.

Right now, Serein is a decompression project and a collection of experimental listening shaders. I am not sure whether it will become another project that sits on the shelf or something I will keep evolving. The future will tell.