I designed five interactive demos using HTML5 and CSS3. One of them called “Air Hockey”, allows users to play the virtual hockey game in Sprout’s dual-screen environment.
While designing the demo, I kept two principles in mind. The vertical screen is for consumption, which means it is used for looking up assets and experiencing content. The Mat screen is for interaction, and users touch the mat to interact with a natural environment at the right time.
See the user flow in the below animation: