This is Apple's Dynamic Island playing music, rebuilt with Motion - the morph itself, not a screenshot of the end result. The interesting part isn't the player UI, it's what happens between the states.
Three of them, named the way Apple names them in ActivityKit: idle, compact, expanded. Tapping moves forward and dismissing walks back one step, so Escape on expanded gets you compact rather than idle - the music is still playing, and an empty pill would lie about the system.
The island is one motion.div with layout, and that single prop drove most of the build. Motion doesn't resize the pill frame by frame - it lays it out at the final size and scales it down to look like the old one, so every child is painted full size and squashed to match unless it carries layout too. My compact view flattened into the top edge and sprang back out until I worked that out.
Two copies of the active view handle the crossfade, a technique from Emil Kowalski's Dynamic Island lesson: one plays only the enter animation, the other starts invisible and shows only while it exits. Both are absolutely positioned and fixed in size, which is why the pill carries its own dimensions - with both out of flow, nothing inside can size it.
The artwork and waveform appear in both states, so they belong to neither copy. Inside a view they get painted twice during a move, and no amount of tuning makes two album sleeves crossfading past each other look like one sleeve moving. Hoisted onto the pill instead, layout walks each between its two resting places, which leaves compact with no content at all.
One thing I had exactly backwards: I was sure the exiting copy had to be a sibling of the island, since its overflow: hidden would crop something meant to scale past the edges. It does crop it, and that turns out to be right - outside the clip, collapsing the player left full-height controls painting over open space the pill had already vacated.
The duplicated view is aria-hidden and inert, without which a copy that exists purely to animate out adds a second set of transport controls to the accessibility tree and five extra tab stops. MotionConfig carries reducedMotion={'user'}, so if you've asked your OS for less motion everything lands on its end state instantly.