Showcase of HTML5 Websites

Note: This post was first published on the 7th June, 2010.

So you’ve heard all rumors that HTML5 would take over Adobe Flash. While most web community argues that it’s possible or not, you must be wondering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash.

That’s why this post exists; we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with another language like JavaScript, so get ready to be inspired.

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

Animation

The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is controllable animation.

Audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

html5 websites
Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

html5 websites
Blob Sallad

A HTML5-spawned creature that would please you.

html5 websites
Bomomo

With Bonomo, you can observe different atomic movements simulated with HTML5.

html5 websites
Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

html5 websites
Bubbles

Have fun by creating endless floating bubbles with different colors.

html5 websites
Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

html5 websites
Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

html5 websites
Flickr PS3 Slideshow

View your Flickr photos with PS3 style slideshow in the web browser.

html5 websites
Interactive Polaroid

An interactive demo that works pretty similar to a multi-touch interface.

html5 websites
JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

html5 websites
Kaleidoscope

A very beautiful and futuristic HTML5 kaleidoscope.

html5 websites
Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

html5 websites
Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

html5 websites
Nebula Cloud

Get lost with this wondrous HTML5 nebula.

html5 websites
Parallax

View all 2D shapes in parallel perspective.

html5 websites
Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

html5 websites
Spread

Get lost with this endless spread animation.

html5 websites
Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

html5 websites
Video Destruction

One click to boom a playing video.

html5 websites
Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

html5 websites

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

html5 websites
Cloth Simulation

A realistic, HTML5-based cloth simulation.

html5 websites
Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

html5 websites
Google Giftbox

Giant search engine Google is presented in 3D, playable view.

html5 websites
JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

html5 websites

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

html5 websites
RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

html5 websites

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

html5 websites
CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

html5 websites
Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

html5 websites
Drag Anything Here

Drag anything you can drag in the demo to show details.

html5 websites
Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

html5 websites
PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

html5 websites
Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

html5 websites
Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ‘social weather’ map, quite trivial (as stated by author) but interesting.

html5 websites

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

html5 websites
Breakout

Rebound the ball to break all bricks.

html5 websites
Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

html5 websites
Catch It

How many balls can you dodge to get your winning HTML5 square?

html5 websites
Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

html5 websites
Cubeout

Play Tetris in 3D, top-down view.

html5 websites
etchaPhysics

Draw an item to move the ball to the star, don’t forget about the gravity.

html5 websites
Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

html5 websites
Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

html5 websites
Tetris

One of the most classic game brought back to life by HTML5.

html5 websites
Torus

Yet another Tetris game in the pseudo-3D version.

html5 websites
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail