I was doing some spelunking while writing a design analysis thread for Lickability and discovered this nugget: this is what the Apple Music background motion looks like without the blur shader applied:

Some background on this: the visualizer is one of those mesh/fluid gradients that designers have been swooning over for a couple of years now. the way they’ve constructed theirs is by layering copies of the artwork and “twisting” each copy. All done in a Metal shader.

the actual twist effect itself works something like this: it distorts coords within some radius around an offset by applying a rotation whose angle increases with distance to the offset. the rotation angle is modulated by a squared ratio of the distance to the radius.

lofi childish gamino distortion shader beats to relax/study to

Who made this? 👀 🎶 ☕️ #spotify #mushroomcoffee #rowdyinmycup

@lickability

@lickability WOAH WHAT it takes like snippets from the album art?? thats so cool! i thought it just picked colors from the album art

@lickability What does it look like when music is playing (flashing to the beat)

@lickability no change between playing vs paused or album art vs lyrics. that’d be neat though. maybe it could slow down to a crawl when paused

@lickability I KNEW IT!)

@lickability Incredible! You are doing god’s work. Btw how did you figure this out? (Is there an inspect element for iPhones?)

@lickability What happen when it play..