Enzora Music — music streaming interface demo
Enzora Music is our internal demo project: a Spotify-style music streaming interface with search, a player, playlists and favourites. It runs right in the browser on the open iTunes catalogue, with animations at 60 FPS.
Challenge
Enzora Music is our internal product demo, not a commercial service or a client commission. It is a web interface for music streaming with search, artist cards, a player, playlists and favourites. Spotify served only as a style reference and has no connection to the project, while the demo shows how we build rich interactive interfaces.
We set out to build a music streaming interface that instantly reads as a familiar service. Spotify was the style reference: side navigation, a grid of covers and a player pinned to the bottom of the screen. Many people know this layout by heart, so any mismatch in spacing, block order or button behaviour is noticed at once.
An interface without music is just a picture. The demo had to find real artists and tracks, show cover art and play song previews, yet do without its own server, database or music library: the whole project is a single static page.
The player is the centre of a product like this. Play, seek, volume and the timer have to respond immediately, while cards, menus and overlays have to move smoothly. The slightest stutter in an animation or a jumpy timer breaks the feeling of a live service, however carefully everything else is done.
Finally, a layout with a sidebar and a bottom player is designed for a wide screen. On a laptop, tablet or phone, the sidebar, search bar and player start competing for space, so the interface had to rearrange itself step by step without losing a single scenario, from search to playlist management.
Solution
We built the demo as a single-page application with three zones: navigation and the library on the left, search, artists and the track grid in the centre, and a persistent player with cover art and title at the bottom. The dark palette and green accent follow the style reference, and all interface labels are in Russian.
On opening, the demo loads popular tracks straight away. Search finds songs and artists, an artist card opens a window with their tracks and a search within them, and any track can be played, liked with a heart or added to a playlist. Playlists and favourites are saved in the browser with no sign-up, while log-in, registration and the For You and New sections honestly open a “Feature in development” window.
Technically, the demo is plain HTML, CSS and JavaScript with no frameworks, hosted on Vercel. The catalogue comes from the open iTunes API through two proxies: if the first does not answer within 15 seconds, the request goes to the second. Animations are built on CSS transforms, and the player timer updates in step with the browser's frames.
Streaming interface layout
The sidebar with Home, For You, New, Search, Playlists and Favourites, the central grid of covers and the bottom player sit exactly where people expect them. A green accent on a dark background highlights the main action, which is playback.
A real track catalogue
The demo calls the open iTunes API: popular tracks load at start, a search returns up to 24 songs and 12 artists at a time, and the Load More button adds the next batch. Only tracks with a preview clip are shown, so there are no dead cards.
A player with full controls
The player skips forwards and back, seeks along a bar with a progress fill, shows the current time and duration and adjusts the volume. When a track ends, the next one starts automatically, and the space bar pauses playback unless the cursor is in the search field.
Playlists with no sign-up
Playlists can be created, renamed and deleted in a couple of clicks, a track goes into an existing list or straight into a new one, and adding the same track twice is blocked. Favourites and playlists are stored in the browser, so the library survives a page reload.
Artists and track search
Artist cards show the name and genre. A click opens the artist's window with their tracks and a separate search by song or album title, from which a track can be played, added to favourites or put into a playlist.
A layout for any width
The layout adapts across nine breakpoints: the sidebar narrows from 260 to 220 and then 80 pixels and turns into a slide-out menu on phones. Below 1500 pixels the search bar collapses into an icon with a full-screen overlay, and button labels hide to leave only icons.
Results
The project's key outcomes in numbers.
- 60 FPSInterface smoothness
Cards, menus and the player are animated with CSS transforms, so motion in the demo stays smooth.
- 1:1Fidelity to the reference
Side navigation, the cover grid and the bottom player are placed just as in the style reference.
- 9Layout breakpoints
The interface rearranges itself at nine screen widths, from 1500 down to 550 pixels.
- 12 daysFrom idea to demo
The interface, player, library and catalogue connection took twelve days.
Project tech stack
The stack we used to build the solution for the client's task.
- Vercel
- HTML5
- CSS3
- JavaScript
Similar cases
Ready to become the next case?
Tell us about your task — a manager will assemble the team, calculate the estimate and send a proposal within the first hour after the request. No obligations, no drip campaigns.