Gregory's ServerThe 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...
|
5 comments
 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. |
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: