Apple Music, made by code

What Apple filmed

For its first rebrand since 2015, Apple Music and TBWA\Media Arts Lab wanted the visuals to come from the music itself. Fred again.. and NEST Acoustics wrote a short sonic logo and split it into individual notes. A custom rig drove a transducer, a device that turns an audio signal into vibration, in a shallow bath of mineral oil. Acrylic versions of the note and the wordmark sat in the oil, with a clear cover in the shape of the app icon on the moving rig. Everything was captured in camera.

Two constraints came out of the tests: few notes, and low ones. Many notes, or high ones, moved the oil too much to read the logo. The finished sting is two sustained chords, an F♯ in the bass (46 Hz) under the icon, and an A (55 Hz) under the wordmark, joined by a quick upward glide.

Why it looks the way it does

Everything you see is one camera looking straight down through a moving oil surface at a bright logo on a dark floor. Five things happen to the light on the way.

1. A lens of oil. The rig pushes oil up into a dome. A dome is a plano-convex lens: the logo under it looks magnified, strongly while the dome is small and steep (about 3× in the first frames), less as it spreads. A lens with focal length f over a logo at depth D magnifies by f / (f − D).
2. Dispersion. Oil bends blue light slightly more than red. On gentle slopes the difference is invisible; on the dome's steep rim the colours land in different places, so white edges split into the rainbow fringes that define the look.
3. Index matching. Glass and mineral oil have nearly the same refractive index, so the glass icon tile disappears once oil covers it. Only its edges catch the light, which is why it reads as Liquid Glass rather than as an object.
4. Ring waves. When the dome falls, its oil leaves as a ring of waves. A crest passing over the end of a word folds the image, leaving the echoes off the Apple logo and the bar off the c.
5. A reveal. The logo only appears where the dome has reached, so each mark grows out of an orb. Whether that's lighting or compositing, it's a design choice worth copying.

Take it apart

Each figure is the live simulation, paused. Switch off one ingredient at a time.

How the simulation works

The renderer is a WebGL2 program that follows the physics above, step by step, for every pixel of every frame.

1. The dome. The oil's surface is one dome per shot, shaped by a formula: a round crown that magnifies, a shoulder that steepens it, and a steep rim in the shape of the icon or a circle. Four smooth curves animate it (its size, its height, its turn from a circle into the icon's shape, and its settling from a magnifying bubble into a flat top with a steep rim), fitted to how Apple's film bends the logo. The two notes of the sting set when each shot starts.
2. The optics. For each pixel, a ray from the camera refracts at the surface by Snell's law, once per wavelength (12 by default, with mineral oil's dispersion exaggerated), and lands on the logo on the floor. The colours recombine with spectral weights, so white stays white and only edges split. Fresnel reflection adds the studio's softboxes and walls, which draw the bright rims.
3. The camera. Several subframes per frame give motion blur, then bloom and a vignette. Every frame is a pure function of time, so the preview, stills and exported videos agree.

To match the film, we measured it: the time offset between the YouTube cut and Apple's reel (by cross-correlating their brightness), the refraction frame by frame (by warping the clean logo onto each frame), the zoom-out, the tile's size. A comparison harness renders the simulation at the film's timestamps and sets each frame beside Apple's.

Make your own, in code

1. Open the player. It plays the effect live with a demo brand.
2. Drop your icon on the picture while the first shot plays, and your wordmark during the second (or use Upload in the panel). Transparent SVGs or PNGs work best; the logo is fitted to the shot by its visible bounds.
3. Tune the oil and the light in the panel: dome strength, depth, dispersion, highlights.
4. Download MP4 renders the whole sting in your browser, at 1080p or 4K. For batch renders, the repo's pnpm render does the same in headless Chrome.

Make your own, in a dish of oil

The physical version is within reach of a weekend and a modest budget. What matters is a steady top-down camera, clean oil, low notes and a dark room.

• A shallow clear tray: a glass baking dish or an acrylic box, 3–5 cm deep.
• Mineral oil: 1–2 litres of food-grade or baby oil. Its viscosity makes ripples look like glass, and it hides clear acrylic.
• A tactile transducer: a bass shaker or "puck" exciter and a small amplifier, bolted under the tray, never in the oil.
• The logo: laser-cut clear acrylic on a black floor, or a print on transparency film over a black card, lit evenly.
• A camera: a phone's 120–240 fps slow motion is enough. Mount it straight down, as far away as you can with a long lens, to keep the view flat.
• Light: one soft LED panel off to the side. Its reflection draws the highlights on the dome and the rims.

1. Play single sine tones between 30 and 70 Hz. Start quiet; high or loud notes churn the oil into noise.
2. Short bursts read better than sustained tones: a swell, then let the oil settle on camera.
3. Push a small dome with a plunger or a clear disc on a rod under the surface for the lens shots.
4. Film many takes, pick the cleanest, and grade to black. A soft mask that grows from the centre recreates the reveal.

Keep electronics out of the oil, wipe spills straight away (oil makes floors slick), and don't heat it.

Credits

The original identity is by Apple Music and TBWA\Media Arts Lab, with music by Fred again.. and NEST Acoustics; the behind-the-scenes film was directed by Joe Jackson, produced by Optical Arts, with VFX by Time Based Arts and colour by Trafik. This page and its simulation are an unofficial study, not affiliated with Apple. Apple and Apple Music are trademarks of Apple Inc.; X is a trademark of X Corp., and the demo brand here is the author's handle.