12 Fun & Clever Examples of HTML5

I hope you enjoy the inspiration. The web is waiting for you to make it awesome!

The Wilderness Downtown by Google & The Arcade Fire

Ever wanted your life to be featured in one of your favorite band’s music videos?  Thanks to HTML5, that experience is not only possible, but it’s native to your browser.  Head on over to The Wilderness Downtown and type in the address of the home you grew up in.  Then, watch as Google Maps and Chris Milk (the video’s director) take you on an impressive journey through your past with a soundtrack by The Arcade Fire.

The Wilderness Downtown

Jolicloud

This slick little OS is Linux based and makes no bones about cutting out everything in your way when it comes to accessing the apps you want – whether they be web or native.

Wordmark.it

Want to see how a word or phrase looks in every font on your computer in a slightly better layout than a drop-down menu?  Well, here it is.  Check it out!

Wordmark.it

Z-Type

Where was this game at when I was in grade school and learning to type?  Seriously, if you can tear yourself away from this game before “wave 10″ then you are a stronger person than I.  Z-type uses HTML5 Canvas, Audio, Javascript, and a space invaders/asteroids theme to incentivize typing quickly and correctly.  Go ahead, give it a go!

Ztype game

Nike Better World

Who says something has to be flashy (pun intended) and in your face to be siiiiick?  Not Nike, because this beautifully subtle site shows how HTML5 can bring native beauty to a whole new level.  Head on over and give it a scroll.

Nike Better World

Klowdz

The newest and arguably best way to prove what you see when you look at the sky is to draw it on this HTML5 canvas created by the folks over at Klowdz.  You can even buy prints of your own work!  They’re also saying that soon they will create a “battle” section where you can face off against your friends in endless contests of who is the most right-brained.

Klowdz

Canvas Cycle

Another cool Chrome Experiment, Canvas Cycle is like having an editing panel on your super nintendo.  You can pick from a number of different 8-bit scenes and control the audio, zoom, cycle speed (on the water/audio), cycle type, and of course – the color.

GraphyCalc

This is an HTML5 built 3d calculator that actually allows you to explore a 3d function by rotating the graph with your mouse.  What else is there to say?  Give it a whirl!

Google Maps + Dynamic Canvas

This mashup has me geeking out more than all of the other examples.  Why?  Because Google Maps provides an API that allows you to create custom overlays using HTML5 Canvas.  The most exciting part about this example is that the possibilities I can image are seemingly infinite and useful.  This particular overlay shows how many bicycles are available for hire at London Cycle hire stations via data provided by the Boris Bikes API.

Darkroom

This web app allows  you to pull up pictures from various web services like flickr and edit/save them using some basic but powerful editing tools.

20 Things

As part of their ongoing support campaign for HTML5, Google made this nifty ebook called “20 Things I Learned About Browsers & The Web” using – you guessed it – HTML5.  It’s a clean site, er, book, with smooth animations and a very handy table of contents page/dock.

Agent 8-Ball

I don’t play games online a whole lot, but this one scores points for a nice design and flash free implementation.  Isn’t it nice to know that when you do want to play a compulsory game every now and then that the flash plug-in your running won’t crash your browser?

Bonus!

Apple launched the HTML5 version of their site!

Sources

www.html5gallery.com

www.chromeexperiments.com

http://webdesignledger.com

Ping your blog, website, or RSS feed for Free Sitetag