The job was to communicate the new and highly technical features and design of AirPods Pro while conveying a connection to the existing AirPods. We wanted to keep user interactions light but packed with simple, powerful images and benefit-led information, with the product always front and center.

The goal of the AirPods Pro site is to give the audience a feeling of having experienced AirPods Pro before ever putting them in their ears. To have the site mirror the effortless feel of the product, we strove to create a fluid, uninterrupted flow that balances the technology of a pro product with a simple, magical user experience.

Apple does not disclose this information.

The story is told through one continuous movement that passes through a fixed frame, is activated on scroll, and follows a linear narrative of how the viewer would experience AirPods Pro in person — from initial fit through exploring features. The key product feature is the ability to switch easily between noise cancellation and Transparency mode, which allows users to focus on what they’re listening to while hearing what’s happening around them. To represent this duality, the site uses light and shadow, with strong blacks and whites also serving to create a graphic visual language.

Scrubbable video wouldn’t work for all browsers or devices. Instead, we created 1600 still images out of video animation, progressively enhancing the loading frame rate and smoothing playback as assets load. A tool for displaying sound and noise animations was built using WebGL, with configurations saved as texture images that were imported into the build.

Apple does not disclose this information.