15 (More) Inspiring HTML5 Experiments

Unless you have been living under a rock you will have heard about HTML5. It’s just everywhere now, thanks to the promotion of the Apple CEO ex-CEO Steve Jobs and certain developers who believe that HTML5 can take over Flash.

Well, in fact we don’t see this situation happened yet, but HTML5 is really magical in reference to its video capabilities, canvas illustration and animation which work really well and smooth. The fact is that it’s so promising that projects are popping up all over the places that have been made as a way of testing the boundaries of HTML5.

Believe its power or not, we will be showcasing you 15 enlightening experiments which make the best use of HTML5, and guess what, you can experience gravity, music-based animation, and rendering of creatures that just works like creatures! Have a fun time with them and oops, they’re best served with the latest version ofMozilla Firefox and Google Chrome.

Just in case you’re not satisfied with these HTML5 fun, we have more for you!

• HTML5: 48 Potential Flash-Killing Demos
• HTML5: 19 Potential Web Applications

Canvas Cycle

A collaborative effort between artist Mark Ferrari and coder Joseph Huckaby, this is a gorgeous collection of moving nature scenes such as forests in winter, seascapes and stormy mountains. They are relaxing to look at and really stunning, with sounds attached to the pictures. If you want a little time to relax from work you can go through these pictures and feel your tension just melt away.

Google Gravity

Another one by the amazing Mr Doob, this one is less interactive than the first but still cool. It gives a basic copy of Google’s main search page. But when you point your cursor the whole page begins to ‘fall’ until all of them crash at the bottom. The Google logo works as an active link that refreshes the page. A good game for those great companies which hates Google, may be.

Canvas Trees

Made by Kenneth Jorgenson, this might be the only place you can see the phrase ‘Refresh for more delicious trees :)’. It is exactly what it says: you click on the website and it takes you to a white background. A black ink drawing of a tree will begin to ‘grow’ while counting on how many branches are in progress. You can refresh to see as many times as you wish.

Magnetic

This is another fun and addictive one for you to enjoy. You basically start out with a couple of ‘magnets’ that can be dragged around the screen. Particles of light orbit around them and if you shift positions you can change the shapes they make. If you want more magnets and particles you just double click and drag them to where you want them. Yes, it’s all about magnets and physics!

Celebrity Earnings Graph

Want to see a visual representation of how much television celebrities earn per episode? This is a cool little graph that shows stacks of color bars which represents how much a specific celebrity makes per taping of a television show (or made, in cases like Charlie Sheen). It was made as one of many projects and experiments by Daniel Rapp.

Canvas Ribbon

Paul Truong made this interesting application that allows you to paint using a constantly moving, multi-colored ribbon across the screen. It makes shapes and designs, and the effect is quite pretty. All you have to do is to drag it across the screen, talking about simplicity eh.

WebGL Water

Here comes a cool demo using the revolutionizing WebGL (Web-based Graphics Library), which is best served with Google Chrome. With the demo, you can draw on the water to make ripples, or drag the sphere to move it around and press some keyboard keys to set the light direction and toggle gravity, all for witness how the moved object interacts lively with the environment, scarily realistic.

Chrysaora

Yet another stunning demo applying the magic of WebGL, which you can see a group of extremely beautiful and most importantly, lively jellyfish moving in the water, irradiated by the ray of dreamlike sunlight. Witness the period that HTML5 and WebGL brings web to life, best viewed with Google Chrome.

Voxel Rain

Voxel rain means multi-colored 3D boxes descends to form a rotating big block. It’s like showcasing the possibilities of computer in 1990s, and now it comes to web browser by utilizing the power of HTML5, the brightest era of internet is not more far.

HTML5 Text Effects

Often we web designer wonder how much possibilities HTML5 can really helps us to breakthrough in web typography, and this demo gives you the answer, more than ever! You can choose to witness stereoscopic effect, neon effect, or even moving neon effect, the future of web typography is in the hand of HTML5.

Spinning HTML5 Logo

I just can’t hold the glory of HTML5, it’s spinning, it’s rotating… it’s cool.

Sketching In 3D

Bored of HTML5-based 2D sketching service? Check this out. Simply draw a line, and press Space then drag left or right, and you will see your drawing rotating in 3D perspective. 3D sketching is not more complicated with HTML5.

Mta.Me Conductor

Mta.me Conductor inspires you by spawning points that will move continually to form lines, and when the lines “collide” to each other they will triggered some interaction. All to prove that HTML5 is not just about code but interaction, and that’s what web users really care for.

Doogle Gmail

An interesting shooter type game but the hero is Gmail, free it from the evils! Just like the classic shooter game, you got the life, score, and the almighty laser beam. Probably one of the potential demos to showcase the capabilities of HTML5 doing as a game. Watch out, Flash.

W Pilot

This is such an addictive game that it should be illegal. Seriously, once you sign into one of their servers you will want to play for hours. You are basically flying around shooting things while avoiding getting shot by other players. It is simple and so fun to play, and the fact that it allows for a multiplayer experience is a serious plus that puts it above Flash games that are so popular right now.