Eye Blink Interactive Typeface

Timeline

Jan-Feb 2024
3 weeks

Skills

Typography
Interaction
HTML/CSS

Tools

Figma
Webflow

Instructor

Lucas Drummond

Overview

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

Eye Blink Type Specimen

Full Specimen

X-Ray Vision

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.


Process

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.

Next Project: Canopy