The Letter Heads

The Letter-Heads is a Firefox 4 demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. Animated with CSS3+JS. It’s mainly inspired by shadow artist Kumi Yamashita.

• Project: Firefox 4 Demo
• Client: Mozilla
• My role: Concept, Art direction, Illustration, Design and Code.

Making of

Kannan is asking in the comments if the position of the letters is arranged by hand or somehow automated?

It’s somewhat in between. ;-) After trying to write the CSS transforms by hand in a code editor, it quickly became way too tedious. Even with “live reload”. So then I created a very basic editor with JS that allows each letter to be dragged around and rotated in the browser. Once I found an arrangement that somewhat looked like a face, I just copied all the inline transforms and added it to this CSS file.

If you wanna try, you can play with the editor. To rotate: [a/s] -+25deg, [z/x] -+5deg. Could’ve been more improved by automatically generate a JSON file and read back already finished ones, but that exceeded my JS-fuu. ;-)