Serein
View LiveTechnologies used
- React
- Next
- GraphQL
- Framer Motion
- Howler.js
- Zustand
Serein is my own record label, and this site is its home online: catalogue, design and creative direction all done by me, end to end. Everything from the label's visual identity to the way music gets presented and played back is a decision I made, which makes this one of the clearest examples of what I can do working entirely alone.
The site runs as an installable PWA built with Next and React. It was originally Vue/Nuxt, but I ported it over in full rather than making the Vue 2 to 3 jump. React's larger ecosystem made more sense for a project I don't have unlimited time to maintain, established patterns meant less time solving problems that were already solved.
Design follows a strict system: a limited palette, generous space, content given room to actually be looked at. Nothing fights for attention against the music or the artwork.
The player drawer
The whole catalogue streams from a slideout drawer that sits over the site as a persistent player. Play a track and its release loads in as a playlist, browse to another release and the drawer keeps playing while the page underneath changes. Built with Howler for playback, Zustand for state and Framer Motion for the drawer's motion and transitions. I track play events across the catalogue, and it's genuinely good to see people using it, streaming full releases rather than just previewing a track. I'd guess it drives sales too, though that's harder to measure directly.
The packshot
Release pages centre on a large packshot, the record cover, rendered big, with a subtle 3D tilt on mouse move. Small effect, but it's the kind of presentation you won't get on Bandcamp or Spotify, and for a label, how the artwork is shown matters as much as how the music sounds.
Technically the site is deliberately unfussy. No frills, fast loading, nothing between the user and the music. The music is on Bandcamp and Spotify too, but neither gives me control over how it's presented. Having a home for the label that I fully control, design, feel, sequencing, presentation, isn't something a streaming platform can replace.