On this page
Recreates the new Apple Music liquid brand identity with webgl + opus 5.5.

Why I built this#

Apple Music's new identity wasn't made in After Effects. Apple and TBWA\Media Arts Lab filmed the logo through a shallow bath of mineral oil, rippled by a rig that played a short sting from Fred again.. and NEST Acoustics as vibration. The oil bends the logo like a lens, smears its edges, and splits the light into rainbow fringes. It's gorgeous, and it looks expensive.

So I wondered how much of that premium, physical look you could get back in code, for any logo, without a tank of oil and Apple's budget. Not "inspired by", but matched to Apple's film, frame by frame and curve by curve.

I wanted three things out of it:

  • A player where anyone can drop in their own icon and wordmark.
  • High-quality videos, of Apple's logo and of my own.
  • An explainer of how the effect actually works, and how to make your own, in code or in a dish of oil.

Play with it#

The player: the effect runs live at your screen's full resolution, with the sting.

The player plays the 4-second sting live. Drop an icon on the first shot and a wordmark on the second, tune the oil and the light, and export a 1080p or 4K MP4 with the sound, all in your browser. The demo uses the X logo and my handle, set in SF Pro stretched wide and heavy to match Apple's "music" (88% overlap with Apple's letterforms, up from 46% with Helvetica).

The same effect on my own brand: the X logo, then @transitive_bs.

The explainer takes the effect apart. Every figure is the live simulation, paused, with a switch that turns off one ingredient at a time: the dome of oil, the dispersion, the rim light.

"Take it apart" in the explainer: switch off the dome or the dispersion and see what each one does.

How I built it#

I built it with Claude Code + Opus 5.5 in a single overnight session, starting from Apple's film. Claude downloaded it, transcribed it with word-level timings, and traced the new note and wordmark from its frames, since Apple's public icon pack still has the old ones. Analyzing the sting confirmed a hunch: the two shots are driven by two different chords, a low F♯ under the icon and an A under the wordmark.

The first engine's renders: a simulated tray of oil over the note and the wordmark. Plausible, and nothing like the film yet.

The first engine was a custom WebGL2 renderer that simulated the oil (nonlinear shallow water on a grid, over a glass tile rising through it) and traced light through the surface. To match the film, it fit the oil's shape to each frame. Fitting it to pixel error failed outright: the optimizer just flattened the oil, because an undistorted logo scores well. What worked was measuring the film directly. A registration step warps the clean logo onto each of Apple's frames, and that warp is the film's refraction field: where every pixel looks through the oil.

Apple's film (top) against an early version driven by the surface captured from each frame (bottom). Close on a single frame, but it moved in steps.

Frame by frame, it got closer. In motion, it was wrong. The simulation stepped, the per-frame fits traded one value against another, and the whole thing jittered. As I put it at the time, it looked closer, "but the animation itself isn't actually smooth, which wrecks the whole thing."

The fix was to throw most of it away. The film's look is really one thing: a dome of oil over the logo, acting as a lens. So the final engine has no simulation at all. Each shot is one closed-form dome, animated by four smooth curves (its radius, height, shape and settle) with a few keys each. Every pixel is ray traced through it at a dozen wavelengths for real spectral color. The icon's whole animation now comes down to 9 fitted numbers instead of about 170 per-frame values, with the same error against the film, and about 1,700 lines of code went away. A frame is a pure function of time, so the live player, stills and 4K exports all agree.

What I learned#

  • Smooth beats close. Your eye forgives a frame that's slightly off. It doesn't forgive a sequence that jitters. A few continuous curves beat any amount of per-frame fitting, and a test now fails if any animated value jumps or kinks, so the complexity can't creep back.
  • Fit the physics, not the pixels. Pixel error rewards soft, dark frames, so it only ever got to bracket choices. Fitting to the measured refraction field gave the oil's real shape.
  • Measure the look as curves over time. For the final round, I had Claude build a scorecard: how lit, how colorful, how warm, how sharp, and how much each frame changes, each smoothed and compared against the film shot by shot. Claude formed hypotheses and tested them one at a time, and a change stayed only if the scorecard and my eyes both agreed. That took it from 14.9 to 9.35 (lower is closer).
  • It's not perfect. Apple's fringes run red on the outside and blue on the inside, and ours are mostly blue. The film's first bubble is a glassy ball lens that ours doesn't reproduce. The repo lists the known gaps.
Apple's film, the previous version and this one, at 12 moments of the sting.
The scorecard: lit area, color, warm and cool, black level, sharpness and motion over time, with Apple's film in black.

Make your own#

It's free and open source. Open the player, drop in your logo, and export a video. Or read the explainer and try it for real with a tray of oil and a bass shaker.

I'd love to see what you make!