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.
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. ;-)