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.
Lettera / Magoulas / Kampf / Cruz / Kootz / Covington / Teope / Whitesel /

Kinetic typography

Interactive Kinetic Typography:

Concrete Poetry Collection – Excellent reference

Words by VIV G

Interactive / Digital Typography