Spotify Card
A compact now-playing card that grows into a wider playback surface without losing its spatial anchor.
- Category
- Interaction
- Year
- 2026
- Status
- Experiment
Mirror
Lil Wayne – Tha Carter IV
What it is
A small player that preserves context at two sizes.
The compact state keeps the artwork and track details close together. Clicking the card expands it into a horizontal arrangement with room for playback controls and progress.
Design decisions
The details that make the state change feel like one object moving.
Artwork as anchor
The album art remains in the same visual relationship as the surface changes shape. This keeps the transition easy to follow.
Morphing layout
Motion layout animation moves the card, artwork, text, and controls between the compact and expanded arrangements without replacing the component.
Quiet controls
Previous, play or pause, and next stay separate from the card toggle. The play icon uses a short scale and blur transition when it changes state.
Live data
A server-side Spotify connection reads the current track. The client refreshes the display every 15 seconds while the credentials remain private.
Current boundary
A display-first experiment with a safe source of truth.
The card displays the current Spotify track, playback state, artwork, and progress. Playback controls currently demonstrate the interaction locally. Direct Spotify playback control is intentionally left for a future version.
Continue exploring
More experiments in spatial interaction.