31 Modern HTML5 Demos That Can Beat Flash

31 Modern HTML5 Demos That Can Beat Flash

Recently there has been a lot of talk about HTML5, mostly, because of the apple and Adobe conflict. A lot of people even started comparing HTML5 to Adobe’s Flash. Even if Flash can be rather extensive and can create some magical breath-taking things it is not without its bugs and does tend to crash computers a fair bit when it’s not developed right. When this happens, HTML5 comes as a great alternative to the ever-loved Flash.

31 Modern HTML5 Demos That Can Beat Flash

31 Modern and Cool HTML5 Demos

Ball Pool
It is an awesome experiment, where you can drag multi-colored balls and also create some new ones.

Ball Pool

Bomomo
In this experiment by using some small balls you may create 15+ different kinds of shapes, circles, and forms.

Bomomo

The Wilderness Down Town
Nice HTML5 Experiment, with a great “flash-like” look, originally built for Google Chrome browsers.

The Wilderness Down Town

Spread
Great multi-colored shapes-creator built with Flash Canvas. FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to Internet Explorer. It renders shapes and images via Flash drawing API, and in many cases, runs faster than other similar libraries which use VML or Silverlight.

Spread

Fireworks
Fireworks creator, build with javascript, with the gravity changing ability. Works great with Chrome.

Fireworks

Sandbox HTML5 Experiment
Sandbox is a red-particles shooter that “attacks” some black boxes that fall from the “sky”.

Sandbox HTML5 Experiment

HTML 5 Video Distruction
Block based destruction of different HTML5 video, best viewed in webkit-based browsers.

HTML 5 Video Distruction

9 Elements Experiment
Canvas, is an HTML5 experiment built by 9 Elements. It moves multi-colored particles after the mouse movements.

9 Elements Experiment

Parcycle
Parcycle is a Mr. Speaker experiment. It creates a “fire-like” substance that is moving after the mouse. It has a lot of configuration options, like: Speed, Sharpness, Size and Number of Particles.

Parcycle

HTML 5 Tiler 3D
Tiler 3D aims to slide show an unlimited number of equal sized images in a grid of 3d rotating tiles.

HTML 5 Tiler 3D

Sinuous
Sinous is a simple and interesting HTML5 Game, where you control a blue ball and should avoid some other red circles that “attack” you.

Sinuous

Magnetic HTML5 Experiment
Magnetic is an HTML5 experiment, created by Hakim. The particles orbit around magnets which can be dragged around.

Magnetic HTML5 Experiment

Key Light
Key Light is an experiment where a playhead travels between keys, which resonate in sound depending on where they are placed in the room.

Key Light

Anevent Apart HTML5 Experiment
ColorBlendy is an HTML5 experiment useful for designers. It blends colors with different modes like: multiply, overlay, dodge. It also shows the hex value of the indicated color.

Anevent Apart HTML5 Experiment

Anevent Apart HTML5 Experiment 2
The HTML5 Experiment created by Anevent Apart show some beautiful “Night Lights” created on an earth shape.

Anevent Apart HTML5 Experiment 2

Cloth
Cloth is an HTML5 Experiment built by Andrew Hoyer. It moves points and lines by a simple dragging.

Cloth

Defend Yourself
Defend Yourself is an interesting game built with HTML5. You own one gun, which shoots bubbles in different brown circles.

Defend Yourself

3D Chess
3D Chess by nihilogic is a work-in-progress 3D Javascript chess game, rendered using the canvas element.

3D Chess

Canvas Nebula
Canvas Nebula is a simple demonstration of a nebula effect using the HTML5 Canvas element. The effect is created by layering three images, derived from a larger single bitmap source, that fade in and out while increasing in scale.

Canvas Nebula

Monster
Monster is a custom 3 dimensional red shape. It was created by Dean McNamee with the Pre3d tool.

Monster

Drag Anything
Grab anything and drag it in to the drop zone. There is included some text below, but you can drag URLs, bookmarklets, files, anything.

Drag Anything

HTML5 Landscape
Modern 3D landscape built on HTML5 Canvas. Originally created by Seb Lee-Delisle.

HTML5 Landscape

Javascript Particle Engine
JaVortex is a gravitational attraction particle engine n-body simulator in Javascript.

Javascript Particle Engine

Canvas Photo
Canvas Photo is a HTML5 experiment that allows you to import images on a wooden texture and to modify their position as you wish, then export the result to a .PNG or .JPG image.

Canvas Photo

Projekktor HTML5 Experiment
Projekktor is a free HTML5 based video- and audio- player written in Javascript. It solves cross browser and compatibility issues, offers flash fallback for ancient browsers, adds some eye candy and provides powerful non standard features.

Projekktor HTML5 Experiment

Video for Everybody
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 element, falling back to Flash automatically, without the use of JavaScript or browser sniffing.

Video for Everybody

Where am I?
Where I Am is a modern HTML5 application that will plot your approximate location and display it on a map.

Where am I?

Hakim HTML5 Experiment
Core is a modern and interesting HTML5 game built by Hakim. The main idea of the game is to stop the red dots that attack you.

Hakim HTML5 Experiment

Bio Lab
Biolab Disaster is a game, purely made in HTML5 and Javascript. Working best with Chrome and Safari.

Bio Lab

Entanglement
Entanglement is an HTML5 game, done by Gopher Wood Studios and is a part of the Chrome Experiments.

Entanglement

Google Gravity
Google Gravity is a modern project by Mr. Doob. While accessing the web page, all of the elements fall too the footer of the webpage, remaining active.

Google Gravity

Other Resources

Conclusion

Even if with HTML5, beautiful, modern and interesting things can be made, you shouldn’t forget about Adobe Flash, as it is still the leader between the HTML5 vs. Flash fight.

Stelian Subotin is a enthusiast and design fan from Republic of Moldova. Right now he is working on his new design-related blog called Rocket Graphics.

Comments

  1. / Reply

    By reading this kind of articles whats the future of flash in webdesign?Already Jquery reduces the using of flash and there is big clash between Apple and adobe ….Now HTML5 almost going to replace the flash…and also Its a good article

  2. / Reply

    Flash allows you to create animations without needing to know programming. So never stop being used to have this facility.

    1. / Reply

      But what you think about in the performance wise.I have seen lot of websites taking so much time to load.Most of the users get frustrated.

    • Steven,
    • December 10, 2010
    / Reply

    You lost me at “…Flash…is not without its bugs and does tend to crash computers a fair bit when it’s not developed right. When this happens, HTML5 comes as a great alternative to the ever-loved Flash.”

    HTML5 can also crash a browser if not deployed correctly. This ‘bug’ as you call it, can be applied to HTML4, HTML5, XHTML, XML, CSS, PHP, ASP, .NET … and so on.

    As you have not made a case for HTML5 beating Flash, bur rather just showcasing some nice HTML5 experiments, would it not be more fitting to either focus on how these experiments beat comparative Flash work, or instead just write about how you prefer HTML5 over Flash!?

    • Tomas,
    • December 11, 2010
    / Reply

    So Google Maps suddenly included in html5?
    Compare pixlr or alternativa3d to some weak html5 demos not even work in half of the browsers.

    Yeah html5 will work ok but flash is too good to leave. Look at the youtube vimeo, flash is the main choice.

    • André,
    • December 11, 2010
    / Reply

    Articles like these are just stupid.
    Flash and Html5 are both here for you to use them, not to make a war.

    1. / Reply

      Some comments are stupid…

        • Rod,
        • December 28, 2010
        / Reply

        Some replies are even worse…

      • Mark,
      • December 11, 2010
      / Reply

      No one is making war. Admittedly, the title of this article is provocative.

      However, HTML5 is making a stride for a unification of paradigms (a.k.a. making it easier to do advanced web design) whereas Flash sits atop buggy, proprietary software with which web designers often feel “at war.”

        • Steven,
        • December 11, 2010
        / Reply

        Mark,

        By unification, do you mean making it easier for users to experience otherwise-advanced web design? or do you mean making it easier for anbody to dabble in web design (widgets, frameworks, plugins) that would otherwise be too advanced?

        If the latter, good HTML5 and good Flash design is seldom buggy and reflects good web design – obviously, buggy web design reflects buggy designers. If you meant the former, then progression in the unification of paradigms is never going to advance if most web designers are recyling other peoples stuff onto users … it is only new and exciting (ground-breaking) web design that is going to continue making that an easier and more rewarding experience for users.

    • jack,
    • December 11, 2010
    / Reply

    yeah…html5 video is going to kill flash…uhh…what about the new stagevideo api for the flash player 10.2 thatll be released before any standard adoption of html5 video…its cool though…i still love you

    • idiot,
    • December 11, 2010
    / Reply

    Where is deviatART Muro

    • Marco,
    • December 11, 2010
    / Reply

    A better title for this article would have been “31 Modern HTML5 Demos That Might Have Beaten Flash 10 years ago.”

    • Andy,
    • December 11, 2010
    / Reply

    What gobbledygook is this about Flash “crashing computers when it’s not developed right”? Good grief. Javascript will hang or crash your computer when IT’S not developed right. So will any programming language?
    And “Not without its bugs. . .”??? First of all, what in the world of computational technology isn’t without its bugs? Most of these HTML5 demos that are supposedly better than Flash will only work in two of the 5 major browsers — and are either BUGGY or don’t work at all in the others. Flash, on the other hand, works in every browser and operating system where it is installed.
    Articles with titles like this one should be posted with a warning label: “This is bait. We’re trolling. You serve our purposes by being here, but don’t expect much else.”

  3. / Reply

    these demos may compete with flash but can’t really beat flash. Flash is not only for header animation or slideshows it can do great wonders and I don’t think it can be eliminated from web.

  4. / Reply

    Go fish! A considerable number of Internet users are using mobile phones to access information. Not 1 of the 31 HTML5 was I able to navigate via touch, unlike Flash. Plus, Flash does NOT require a browse. There have been several Flash website intros that we have provided clients to use as loops for trade shows or fully function tools for sales teams that don’t have Internet access. HTML5 will be better marketed as “gravey” to the world wide web window, rather than a replacement for Flash.

    Gibron Williams, Head Honcho at Oevae Marketing Consultants, the best marketing consultants in the world – ask Google

    • James,
    • December 13, 2010
    / Reply

    This sort of article is why people are confused about using the right technology for the job much of the time. There’s not much in that list “beats” flash because it’s done in HTML5. It’s just a different angle and tech to use.

    Pretty much all of those experiments can and have been done well in Flash over the years and while I don’t do Flash work myself, I don’t think that it’s sensible or correct to replace it in applications just because you can if there’s no need.

    J.

    • andy,
    • December 14, 2010
    / Reply

    All of these demos share one common feature – if you were implementing them for real, rather than as a tech demo, you would be better off doing them in Flash. You’d cover far more users in far more browsers, and in many of the demos you’d get better performance as well.

    You’re not doing HTML5 any favors by being dishonest. It’s inane to pretend that these demos couldn’t be done in Flash, or ignore the fact that >60% of the world’s users can’t even see them.

  5. / Reply

    Great demos….its awesome…..

    • Katie,
    • December 20, 2010
    / Reply

    This is great and all, but all of these would be a lot smoother and more graceful in flash.

      • Rod,
      • December 28, 2010
      / Reply

      +1

    • Tom,
    • February 24, 2011
    / Reply

    Suggest some of you knuckle-dragging reactionary yunksters who’ve invested your careers in dead-end technologies revisit this nearly 50 year-old song –> http://www.youtube.com/watch?v=vCWdCKPtnYE

  6. / Reply

    The technology is amazing, it’s beyond my imagination and my knowledge.

    • dave,
    • February 24, 2012
    / Reply

    Really nice list. I’d would also add real-time HTML5 video pixel manipulation on canvas: http://rocha.la/fun-with-pixels-html5-video-canvas

    • Sam,
    • March 13, 2012
    / Reply

    I’ve got a virus notification on Javascript Particle Engine

  7. / Reply

    Check out Picozu at http://www.picozu.com, amazing HTML5 Adobe Photoshop clone.

    • Pry,
    • September 6, 2012
    / Reply

    these demos may compete with flash but can’t really beat flash. Flash is not only for header animation or slideshows it can do great wonders and I don’t think it can be eliminated from web……..

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals