Nice to meet you

Thanks for taking the time to reach out! Have a project to discuss, an interesting position available, or just liked my work? I'm happy to chat about anything and everything.

Thank you! Your submission has been received!
Close window
Oops! Something went wrong while sending this email.
Did you remember to fill in all of the fields?


Tango is a web-based news reader that responsively adjusts its layout based on how far away you are from your computer. 


We typically see websites that are responsive to the device that you are using. This allows for sites to adjust their layouts to make things easier to read and more legible on smaller devices.

However, this only assumes that you are viewing it at a typical distance from your device. As people get further away from their computer, how does their perception of the typography change then?

Working together with Ramya Mallya, Ayobami Olubeko, and Barath Chandrashekar, we wanted to experiment with a method to provide people with the best viewing experience regardless of how they used their computer to consume content.

We built Tango during a 24-hour hackathon at Carnegie Mellon University called HackCMU and was named “Most Innovative Hack” by Dropbox.


Design Solution

Using the built-in webcam on our laptops, we implemented a Javascript face-tracking library to detect distance between a person’s eyes. Using the distance information, we were able calculate changes in the distances between the viewer and the screen. We used that information to update the interface according to what we felt was most natural.

We prototyped Tango to respond to 3 distances:

  1. Leaning back (Medium): Shows an overview of articles with an image, headline, and the first few lines of the article
  2. Leaning in (Close): Displays the full length article for you to read
  3. Walk away (Far): Automatically plays the article video and cycles through next videos
We mapped out the various states and prioritized the content displayed depending on distance and legibility.

Design Decisions

We were inspired by existing natural and intuitive interactions when reading a newspaper or watching television. This led us to create digital counterparts for consuming the same type of content on the web.

We were inspired by existing natural interactions such as reading a newspaper or watching television.

We also wanted to share this interaction technique with the world, and the use of the ubiquitous built-in webcam and web browser made it accessible to a wide audience with no additional hardware required.


During our prototyping process, we quickly discovered that the facial structure of each person, in addition to their natural lean-in/lean-back gestures would be different enough to throw off the threshold to change the layout. We implemented an automatic calibration step to adjust to each new user’s face, as well as how far they would need to move for the adjustment to happen.

We tried several computer vision methods for distance detection before settling on a javascript library

Live Demo

We completed this project in September of 2013. Without maintenance, we don't expect this to work in all browsers as standards change, however we have posted our demo below if you would like to see it live.

Try a Live Demo of Tango
Thanks for taking a look! Please feel free to see my other projects or reach out to me about your project or company. I'd love to chat.
Email meLinkedIn