Gregory's Server🧵🎙️ Yesterday, Apple released the transcripts feature for Apple Podcasts. This reminded us to revisit the UI of the Podcasts app, and we’d love to share some of our findings. We’re just focusing on the player since there’s a ton to cover.
 10 comments
When playing, the current paragraph is scaled up for emphasis. And when paused, the paragraph scales back down from the top leading corner with a smooth spring timing curve. When scrolling, it scales down even further, acting like a scrub speed multiplier. Also, notice how when you tap on a paragraph to play, the scroll/scale transitions at different rates to make it follow a “swooping” motion rather than a linear curve. When showing/hiding the player controls, the transition has five parts: 1. Controls fade in The player uses quite a few gradient masks to ease the bounds of views. The top and bottom of the transcript scroll view both are gradient masked. Same as the episode title scrolling marquee and the chapter list (if the episode supports it). These are special gradients, too... Gradients can be interpolated in two ways: by color space (how colors are mixed) or by easing function (how colors change over distance). The default linear easing in tools like Figma and CSS creates a harsh line. The Podcasts app appears to use a custom, easing function: By the way, @dlx figured out how SwiftUI handles the other type of interpolation — it uses the Oklab color space rather than sRGB, which is what Figma uses. So if your designs look different between the two, that could be why. Like the Sports app, the transcript makes heavy use of vibrancy text effects on top of a procedurally-generated motion background so the de-emphasized text still takes on some color from the background. More on that here: The player background is the same as Apple Music — it warps and twists the episode artwork and blurs it to make this mesh gradient effect. Our designer, Finally, swipe down the player slowly and notice the corners of that player sheet. It matches the corner radius of the display! Unfortunately, this isn’t a documented API. It’s stored as a key on UIScreen called `_displayCornerRadius` which you totally shouldn’t obfuscate & use. |
First, in case you haven’t tried the transcripts feature, here’s what it looks like. There are four states the transcript viewer can be in:
1. Playing (transcript synchronized)
2. Scrolling
3. Paused
4. Hidden