A previous iteration of a listening badge for this website. It used to sit at the bottom-right of my avatar on the homepage when I was 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 an active state on the song being played.
Hover over or tap the icon to expand the badge
The width adjusts to the length of the song title. 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, it scrolls as a marquee.
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 or tap the icon to expand the badge