I rebuilt a part of the Spotify interface in NextJS. I ended up with various refined, unique, and colorful components.
The goal is the same as in my other recent blog post, where we recreated the MacOS Sequoia mail application, but this time we are recreating the Spotify application home page. Our framework is NextJS, and we are using TailwindCSS and ShadCN to kickstart this project.
To see how close I got to the original, check out the final result in this demo. Since I am recreating a desktop app, the demo is not optimized for mobile devices.
Let's dig into the main components.
Spotify uses a carousel to display various album artworks. To build this I started with a ShadCN carousel, and then modified its behavior to match that of the Spotify carousel. The ShadCN carousel itself is built with Embla Carousel.
The Spotify carousel has a number of key features not found in the ShadCN basic carousel. On the edge of the carousel there is a gradient that fades out some of the album artwork. The navigation controls of carousel appear only if navigation in that direction is possible, and you are hovering the carousel with your cursor.
Finally, the navigation controls are positioned inside of the carousel, instead of next to it. All these features combined make browsing this carousel a very pleasant experience.
Custom scrolling behavior ensures that slides are not shown twice after scroll.
The sidebar of the Spotify desktop application is a mixed list of playlists, albums and artists. The key to making this sidebar look convincing is getting spacing and font size right. TailwindCSS enables us to build something like this really quick.
The sidebar is close, but we must note that Spotify uses their own custom font. Using this font would make it near identical. When the user shrinks the sidebar beyond a certain size, the sidebar collapses and displays only artwork instead of text. For the sake of keeping this project short I have omitted this feature.
Kind of reminiscent of the mobile app.. isn't it?
The flagship component of the Spotify application is a 4x4 grid of library items. It is the starting point of the music listening experience.
A key feature is the colored background which changes its color based on which library content you hover. Hover over some different items quickly and notice how colors fade into each other when moving from one library item to another. The colors are determined by the colors in the artwork of the album you are hovering. This gives the application something unique, and makes the interface feel alive.
Notably, it is not always the color that is most present in the artwork. It can also be a signature color, which is not present that much, but stands out. For instance, in the Spotify application Radiohead’s album The Bends is assigned the color red even though red is only used in the title text of the album.
I have manually assigned colors here, since I am omitting album artworks in this interface example.
The Spotify interface is built on basic components, but they are all extremely refined, and this makes navigating the Spotify interface pleasant and resistance-free. Adding a splash of color to an interface can go a long way to making your platform feel unique.