Who loves music and 27-inch monitors?

I had a little fun this morning making a very large theme for the Simplify music controller. I wanted something that made use of the background screen real estate on my Thunderbolt display. “Sidecar” is what I came up with… keep in mind it was pretty early in the morning. Naming things before 6am is not my strong point.

Sidecar takes up the entire side of my Thunderbolt display background, and it doesn’t currently scale to other size displays. I toyed around with making a version for my 13” Air, but it doesn’t make as much sense in a confined desktop area. I’m planning to recreate it as a horizontal version for smaller displays (eventually). In the meantime, if you happen to use Simplify and own a 27” monitor (2560x1440)…

It uses varying levels of transparency and CSS3 transforms to create a two tone bar, the lower portion’s height determined by the length of the artist name. The artist name and track title are displayed vertically at a -90° tilt. Then, a solid blue background is underlayed which slides down as a progress meter for the current song. When the song ends, it slides back up to the top for the next track. Nifty.

YouTube Video

It currently doesn’t have any player controls, mostly because I never use the desktop widget as a controller. I primarily use hotkeys (my Hyper key with arrow keys) and occasionally the mini player. I didn’t see any point in junking up the works with additional controls. Feel free to hack, however.

Updated 5/6/13 10:30am: kicking in the CSS3 3d engine, slowing down the animation, making it linear and polling slightly more often… end result, an almost smooth progress indicator.

By the way, if you want to take it apart to see what’s going on, just rename the “.jacket” file to “.zip” and open that. The whole thing is just a css file and an HTML file with some JavaScript for the Simplify API. Plenty of examples in their Github repo.