Inspired by Kinetic Typography examples, and following the rules of Interaction Design, and the steps of the interactive cycle, you will choose a pre-existing text and you will transform it into an interactive kinetic poem.
NB: you can use a text provided by your client, as. long as it is at least 20 lines long.
I will pay strong attention to the following elements:
• use at least 5 different fonts that you can download from Google fonts
• BREAK the grid! The goal of this project is to transform a pre-existing text into an experimental typography project that has NOTHING in common with the original poem.
• Use CSS Absolute and relative positioning, as well as :hover and :active, to transform the poem into an interactive version of the original.
• At the end I care about the visual and interactive experience, and the way you will enhance the meaning of the text through the usage of interactive CSS3 tools.
• Think about the user experience: there should be minimal instructions and a navigation where [without being explicit] the user will be able to remain engaged and explore the totality of the provided options.
• The purpose of this first project is to familiarize you with all the available text transformations that CSS3 provide.
Samide / Wessling / Boyd / McDougall
Lettera / Magoulas / Kampf / Cruz / Kootz / Covington / Teope / Whitesel /
Kinetic typography
Interactive Kinetic Typography:
https://santi.tv/sida
Concrete Poetry Collection – Excellent reference
http://movingpoems.com/category/videopoems/concrete-poetry/
Words by VIV G
http://movingpoems.com/2012/10/words-by-viv-g/
Interactive / Digital Typography
MESOSTIC GENERATOR http://mesostics.sas.upenn.edu/