Map Routes

2,488
0
91
A simple project that changes the route of the Google Maps embed code using the HTML component found in Proto.io using states. Use the menu below the map to navigate to switch to another route or another map format. Format 1 changes based on menu selection using Google Maps. Format 2 changes based on both menu and route on map using images.

186c533a-504d-11ed 9221-0e76797a4f7b

It’s gradients, brought to life!

3,040
0
24
This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.

Akis Ioannou

MIX & MATCH

1,300
0
1
Lets babies mix and match and make all kinds of silly halloween characters. Images from: https://www.comofazeremcasa.net/brinquedo-com-blocos-de-madeira-para-criancas-com-moldes/

7e32ae9e-1fcb-11ee bd60-0e76797a4f7b

To Do

3,300
0
59
Basic To Do prototype based on: https://www.sketchappsources.com/free-source/3625-basic-to-do-app-design-sketch-freebie-resource.html

7e32ae9e-1fcb-11ee bd60-0e76797a4f7b

Recreating Tetris

977
0
0
A simple recreation of the very popular video game Tetris. Use the buttons to move, rotate and change the block pieces. You can also use the arrows and A,B keys on your keyboard as well. Design inspired by: https://www.sketchappsources.com/free-source/3559-grdk-pro-game-system-64bit-sketch-freebie-resource.html I do not own anything related to Tetris and this is simply a very simple tribute to the creation of Alexey Pajitnov.

1866935c-504d-11ed 9221-0e76797a4f7b

Emoji Toggle Component

1,025
0
8
Mouse over and out to toggle between the active and inactive state. Click to select the active state, click again to deselect. Showcases the power of containers in Proto.io. Each emoji is converted into a container (through the right-click menu). The individual emoji containers have two states: selected and deselected. The parent container contains all the emoji containers. This parent container has 6 states: non-selected, and the active state for each emoji (5). The click/tap trigger changes the both the individual emoji state, and respective parent container state to the active emoji. Easily change the emojis to any other one you choose while maintaining all the interactions. Make sure to click into each individual emoji container and double-click the current emoji and replace the image with the new one from the asset library. Replacing the image by double-clicking the existing one preserves the grayscale in the deselected state. Enjoy!

Todd Siegel

Next