I wanted this to follow the progressive enhancement notion of graceful degradation, so the pre-rendered HTML page is normal <p> tags surrounding each line of text.

On page requests, I call letterize.js to splice every character inside the header. this enables the characters to be isolated and manipulated independently.

Once you click inside the container, the animation function is triggered. The animation type is randomized. There are x# total animations.

Then I toggled animations randomly for each time the section is clicked.

p5.js was used as the animation engine. If i were to remake, i'd use vanilla JS. but this project came about as an experiment in p5.js so its kind of baked-in.