Interactive TV app prototype of Hulu's home page. Use the arrow keys on your keyboard (note: mouse click to enable keys) or map to a remote control on a television screen to explore a Hulu like home screen with proto io. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

This prototype demonstrates basic content navigation for a TV app moving focus model. TV Apps differ from web and mobile in that interactions are triggered by remote control button presses which can be mapped to key board presses with proto io. With a TV focus model every component will have a collection of "On" and "Off" states both between the components themselves i.e: the menu and items within those components i.e: a menu item such as "Movies". These interactions models must work in a way in which as one component is on, all others must be off and so on. This example will show basic interactions and how to navigate pages commonly used my modern TV apps for devices such as Apple TV, Roku, Google TV, Smart TV's etc. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

Sample food ordering prototype Add to cart

Shopping cart using variables to calculate selected item amount, and total costs using variables. Project also includes a thumbnail gallery

Swipe to see some Porsche models. Tap on a car to get more information on that car. The project is using States and State animations

The project contains numerous examples completed using variables and conditional logic.

Sliding navigation of Tab Menu

The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see swipe animations in all directions.

This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see panning animations in all directions.