Email or username:

Password:

Forgot your password?
Top-level
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

6 comments
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