Surface Duo prototype

When Microsoft announced the new breed of 2 screen devices - Surface Duo and Surface Neo, I was quite excited about the prospects of novel interaction challenges that these may pose to designers and developers. The interesting thing about these 2-screen devices, along with similar devices from other manufacturers like Samsung is that, not only they have double the real estate for displaying the content, but also opportunity for richer interactions as the 2 screens can work independent of each other.

So I thought it will be an interesting experiment to emulate a 2 screen device on browser, and then mock up popular applications like Facebook, LinkedIn, Spotify etc to use 2 screens instead of 1 . Imagine having the facebook profile of a person open on one side of the screen while you scroll through their updates on the other screen. Or viewing the artist page on Spotify on screen and scrolling through albums of the artist on the other screen.

This experiment is built with React; the entire UI is coded from scratch, almost no images were used in building out the device prototype, everything is HTML/CSS.

The biggest challenge was to achieve animations at 60 FPS to emulate a real hardware device. I used Web Animation API to try and achieve the best possible frame rates I can.