iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect.

Similar to folders in iOS, this effect lets users to scan a list of items and open one up in place. This has advantages over more traditional pop-up windows and mode changes, which can obscure content and cause the user to lose their place in the list.

A second aspect of this feature is that it uses content to enhance the chrome. In the detailed view, the background and text colors are generated algorithmically from album art. This not only serves a practical purpose in making the detailed view stand out from the list, but creates a nice (in most cases) aesthetic effect and a sense of feeling that differentiates one album from the next. The intrepid Seth Thompson and Wade Cosgrove have already recreated this, using Mathematica and Cocoa respectively. Apple’s algorithm, it turns out, is pretty sophisticated.

Here’s my take, using HTML, CSS, and Javascript.

And you can check it out for yourself here:

Details

The demo is built with App Folders, with behavior and style modified to mimic iTunes. Color Thief is used to derive colors on-the-fly from album art using a median cut algorithm. On top of this, I selected colors for acceptable contrast by converting RGB to YIQ, a color space that better reflects human perceptions. Last but not least, Mustache is used to pull album data from a JSON file into templates.

I got to play with several exciting HTML5 and CSS3 properties in making this demo, including text-overflow, multi-columns, transitions, animations, and canvas. Unfortunately, this means the demo requires a modern browser. The future can’t come fast enough.