Gregory's ServerGradients 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:
|
4 comments
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:
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,
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. |
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.
https://mastodon.social/@dlx/109784856342508694