Apple Music, Made by Code

Written by AI

TLDR

Travis Fischer reconstructs Apple Music's mineral-oil logo animation as a real-time WebGL2 simulation, explaining the optics, physics, and practical methods behind it.

Best for

Designers and creative coders studying how a physical brand effect can be rebuilt in WebGL2.

The tip

Switch off one simulation ingredient at a time to see what creates the effect.

What you need

• A WebGL2-capable browser

Start here

1. Read how Apple filmed the original effect.
2. Toggle the live simulation ingredients one at a time.
3. Follow the guide to recreate it in code or mineral oil.

Filed note

A technical teardown of Apple Music's liquid logo animation, with a live WebGL simulation and a practical guide to recreating the effect in code or mineral oil.

articleThe source

Highlights

• Everything was captured in camera.

  The final identity effect was physical, not a rendered approximation.

• Many notes, or high ones, moved the oil too much to read the logo.

  Legibility constrained both the sound and the motion.

Excerpt

Apple Music's new logo animation was filmed in a tray of mineral oil, rippled by a few low notes. This page takes the effect apart, rebuilds it as a real-time simulation in your browser, and shows how to make your own, in code or in a dish of oil.

Read the full article