Jan-Feb 2024
3 weeks
Typography
Interaction
HTML/CSS
Figma
Webflow
Lucas Drummond
Eye Blink is a custom modular typeface built entirely from HTML and CSS in Webflow (including each module shape) that is activated based on user interaction. Each letter has a passive and active state that is triggered when the user clicks on the letter ("blinking") while the entire specimen reacts to the position of the mouse ("looking") . This typeface is inspired by shifting eyes and the feeling of being watched.
View webpage here
I created one additional interaction in the form of a button. It changes the "pupils" of the typeface into red. I just wanted to add a final fun surprise to complete my concept.
After finalizing my concept and general shapes, I had to iterate until I found the four modules that worked best for creating each letter. At first, I did not use modules and struggled to create a cohesive system, resulting in an odd character set.