Wanting to be there - Kinetic Web Type

Created: 05/02/12
Last Edited: 12/04/12
A HTML5/CSS3/jQuery kinetic typography project where the user's interaction causes the decay of the word, and eventually all meaning is lost, as are the words themselves.
  • Wanting to be there - Kinetic Web Typography
  • The assignment was to use a piece of web communication that was kept for sentimental or emotional reasons. I chose a message that was sent to me by some friends in Japan. While I want to go back, the reality of being able to finance a trip and visit is improbable, especially considering that the area that I'd need to travel to is well outside of the larger Tokyo region, making travel and logistics all the more difficult.

    In order to express this emotion, I started with making the typography blurry to start out with, when the user hovers their cursor over the text (or taps on a mobile device) the type gets completely blurred out. When the user clicks on the type, the type will move to a random location in the window, and a random letter will be removed. If the user does this for long enough, eventually all of the type will be removed and the dream will have disappeared.
  • ┬áDefault state, slight blurring on the text, still readable.
  • ┬áHover over state, totally illegible text.
  • Various text states showing the eventual decay of the text and its meaning, lost in the blur.
  • Want to play with my text? Check it out here, and if you like it tell your friends and appreciate this post, or whatever. Chrome, Firefox, Internet Explorer 10 Beta, and Safari only. Opera is the only uncool cat in the game that doesn't support css3 transitions and animation for text-shadow, so their lost.

Discuss This Project: ( Comments)

You must to join the conversation.