I’m always listening to music. It’s one of life’s greatest joys, and I learn a lot about myself by finding new music, artists and reflecting on how it shapes the way I feel. So I wanted my site to show what I’m currently playing, plus a bit of history of what I’ve been into lately.
The idea isn’t new, plenty of personal sites do something similar, but it was fun to figure out what mine should feel like.
I landed on a badge that sits at the bottom-right of my avatar on the homepage when I’m listening to a song. The sound-wave icon is an SVG animation. On hover or tap, the badge expands to show the track name, artist, and album cover, morphing to fit the content as it changes. Tapping it leads to my listening page, with that song highlighted.
Hover over the icon to interact with the music badge
The width isn’t fixed. A hidden copy of the content measures itself off-screen first, so the badge animates to exactly the size the current track needs. When a title is too long even for that, it scrolls as a marquee, fading softly at either edge.
On touch, the badge stays collapsed until tapped and dismisses on the next outside tap. On hover, it reveals on pointer-enter with a 50ms delay so it doesn’t fire by accident.
Hover over the icon to interact with the music badge