Cassette Tape UI

About

The Cassette Tape UI began as a silly web design idea which spawned a Tape Lamp Project and some eBay finds along the way. This page documents some analog history, and the "making-of".

Purpose

Following up on the Wheels Of Steel, The Cassette Tape UI is another experiment in skeuomorphic design - a term that in the context of computers, involves digital recreations of analog design elements and functionality that serve little to no practical purpose in the digital world.

In other words: "You know what never gets old? ... Nostalgia."

Technology

This experimental UI demo uses SoundManager 2 for audio playback and control. HTML5 and/or Flash can be used by SM2 under the hood, depending on support.

The UI is driven mostly by the whileplaying() event, which results in the spooling of cassette tape between the reels as playback progresses. The tape "connecting" the two reels is drawn dynamically on a <canvas> element, as applicable.

CSS animations are used to make the reels spin at different speeds, and <canvas> is also used to apply some masking and blurring effects on the home page demo.

Credits

Thanks go out to Brian Scates, who designed graphic elements for the tape spokes, reels and textures. Kudos are also due to design + tech friends who played with early pre-release versions, found bugs and gave feedback.

Web fonts used: Just Another Hand (mixtape "label"), Ostrich Sans (Demo page headers).

Inspiration

The TDK MA-R (Metal-Alloy Reference) cassette series debuted in 1979 with a stunning design. Housed in a metal shell, the MA-R was a pretty serious piece of hardware weighing several times more than its counterparts. It was also innovative: Unlike other tapes with one-use tabs designed to be snapped and broken off, the MA-R series' tabs could be rotated in-place to prevent re-recording.

It turns out that cassette tapes, like many other things, are collectible. Rare and still-new, sealed models can go for hundreds of dollars online.

There were also some creative blends of functionality and design. It's inspiring to note that someone thought to make this tape head degausser tool transparent, exposing its unique inner circuitry.

Tangential: The Lamp Project

When searching for transparent tape designs online, I found photos of a "lamp" made by a San Francisco-based architecture firm and couldn't resist a shot at making my own. While they used larger scales and incandescent lighting, my approach was to build 1x5 and 2x5 stacks using transparent Maxell DUP-120 tapes in jewel boxes, and to light the stack with a special LED panel.

Incandescent flood lighting was tested, and turned out to be impractical (and perhaps, fire-prone).

Things improved greatly with a dimmable RGB LED panel which offered consistent illumination.

After making three 2x5 lamps (120 tapes in total), it was too tempting not to stack them.

Following up on the larger builds, I started making smaller 1x5-sized lamps for friends.

See the Cassette Tape Lamp Project set for more photos.

Live Demo

Here are some cassette tape UI skin/theme variants; the styling is a mix of HTML elements and class names.

Disclaimer: This UI is a prototype, experimental and subject to change. It is not officially "supported" as a demo, and requires a fairly-modern browser that supports CSS3 and <canvas>. It does not degrade gracefully in older browsers. Use at your own risk.