While at ZURB, one of my favorite projects was Samsung Milk Music for web and TV.
A short (5-week) project, we were contracted to create an interactive prototype in HTML/CSS based on After Effects mockups provided by the client. I handled the JavaScript and collaborated with another designer, Jonathan Smiley, who created the CSS effects and developed the SVG masking technique for the slider bar.
The main interactions of the music app: the user selects "stations" by sliding a rainbow selector bar. The genres of the stations (roughtly 3-4 stations per genre) are moved counter to the slider bar's movement in order to make them all accessible while retaining a comfortable spacing.
The original requirement was that the code work in the latest version of Google Chrome and be suitable for handing off to a development team. After delivery, however, we recieved feedback from the client that they were considering using the JavaScript I had written (structured as a jQuery plugin) for the production version of the app (plus additional polyfills to support SVG masking in older browsers).
Most of the elements in the prototype triggered some sort of action or animation. These were, for the most part, coded from scratch.
Genres that the user dislikes can be completely removed from the selector by dragging them off of the selector bar.
A number of extensions had to the added to the Foundation Off-Canvas plugin that we were using in order to support custom animations and multi-level off-canvas menus.
One of the most interesting technical challenges was simulating the effects of preference sliders on a dynamic word cloud.
One of the client's requirements was an "Executive Mode" that removed ads when presenting to internal stakeholders. We implemented it such that the ads were removed by entering the Konami Code (Up-Down-Up-Down-Left-Right-Left-Right-B-A).
