The rectangle behind you

The day skeuomorphism went too far

One of my favourite talks I ever gave was the game show The secrets of Pac-Man my friend Ryan Germick and I presented at Google I/O in 2011.

The entire event was a fun experiment — asking people to vote with their phones, controlling the talk with a Power Glove, the crazy half-baked game show aspect…

I also wanted to add something extra to the visuals, and I went somewhat insane on pretending our slides are a vintage computer display from the late 70s, early 80s.

The arcade-like banded font was the obvious first choice. (I like typography experiments on slides.) I then added interlace to the entire screen, because… well, mostly because that was the first thing that came to my mind. Double interlace behold!

Without interlace on the left, with interlace on the right

I added some blur behind the letters, so that they looked less crisp — as they would on a bad CRT:

Without blur on the left, with simulated blur on the right

I added random flickering:

I added slow vertical banding:

I added a little emulation of slow phosphorus… things leaving an afterimage (this was actually pretty hard to build, requiring to make a virtual copy of a slide on every transition):

And, I topped it off with some slight “analogue” resizing — something you’d see when the CRT was warming up, or powering down:

Here are all of those in context:

Garish? Yes. Over the top? You bet. A proper tribute to the age of Pac-Man? Perhaps. Fun? Hells yeah.

It was also purposeful: since the talk was in some part about celebrating modern HTML, it was great to be able to point to those effects and say that they’ve all been created using powerful, modern web technologies.

But the real moment of validation came a bit earlier than that. We arrived at the venue more than an hour earlier, to test everything. We plugged in the computer to the projector, tested the whole crazy setup, and breathed a little bit.

Some 20 minutes later, we were approached by one of the A/V technician. “We’re seeing all sorts of weird artifacts,” he muttered, perplexed and a bit ashamed. “We have no idea where they’re coming from. It’s all supposed to be digital.”

It took me a few seconds and then, it dawned on me. “Holy shit, I’m sorry! We added those on purpose.” I convinced him, eventually, and he came back to his station in a much better mood.

That’s my story of skeumorphism taken too far. Today, I can hardly look at the garish slides, but I smile every time I think of how our emulated CRT became too real.

Play with the live demo
Check out the code at GitHub

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)