About

This little distraction is brought to you by Peter Magenheimer. It's pretty much pure HTML and CSS3, with a splash of jQuery to randomize the starting positions of the blocks and to handle keyboard input. The CSS3 transition property handles most of the heavy lifting.

You can find the source on GitHub. Feel free to fork the code and experiment, and if you do, shoot me a message or tweet it to show me what you've done!

Credits

The concept was inspired in part by David Desandro's Curtis CSS Typeface, and by his other experiments with CSS3 and animation.

The typeface was adapted from a pixel font called 04b_03.

The other typefaces on this page are Bistro Script Web for headings and Omnes Pro for body type, both of which are served up by Typekit.