Email or username:

Password:

Forgot your password?
Lickability

🧵🎙️ 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
Lickability

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

Lickability

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.

Lickability

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.

Lickability

When showing/hiding the player controls, the transition has five parts:

1. Controls fade in
2. Controls slide up
3. Spacing between controls expands
4. The background gradient end point (fully transparent) slides up
5. The background gradient fades in separately from the controls

Lickability

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...

Lickability

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:

Lickability

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.

mastodon.social/@dlx/109784856

Lickability

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:

mastodon.social/@lickability/1

Lickability

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,
@samhenrigold, did a deep dive into that if you’re curious how it works:

hachyderm.io/@samhenrigold/112

Lickability

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.

Go Up