Happiness

visit the happiness website

Happiness is an interactive website that uses CSS animations and typography to visualize lyrics to my personal favorite song, "Happiness" by The Fray. The lyrics consistently repeat the word "happiness" and personify it with each stanza. The site plays on this poetic system by literally altering the letters of the word “happiness” to illustrate the characteristics it is given in the song.

landing page

post animation


video of animations




PROCESS

The challenge in the creation of this project was that I wanted to create all of these complex animations strictly with HTML and CSS — no JavaScript. Much of the process in coding this website was understanding the limitations and possibilities of CSS animations and how best I could implement them to illustrate the lyrics of my chosen song. Lastly, The website went through many color changes along the way without clear direction, but ended up with a neon sign font with bright yellow, glowing letters on a dark background to emulate the album cover the song "Happiness" appears on.

first, second, and third drafts

The Fray's second studio album The Fray where "Happiness" appears, inspiration for color scheme / visual identity