Demos of open web technologies

Mozilla supports a wide variety of exciting open web technologies, and we encourage their use.  This page offers links to interesting demonstrations of these technologies, including some that were popular in the Demo Studio, which has since been retired. If you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.

2D Graphics

APNG

• Justin's demo (works when saved locally)

Canvas

• An interactive blob using javascript and canvas (fun)
• Blob's demos
• Canvas Animation Kit Experiment (CAKE)
• Canvas3D & Flickr
• Playing with Canvas
• Using the Canvas Html element5
• RayCaster
• MSX Emulator
• processing.js
• Missile fleet
• FireWorks
• Canvas ash1
• Canvas ash2
• Canvas ash8
• 3D on 2D Canvas
• miniPaint - Image editor (source code)

SVG

• Gearflowers image Don't forget to zoom in (works when saved locally)
• SVG photo demo (visual effects and interaction)
• Bubblemenu (visual effects and interaction)
• HTML transformations using foreignObject (visual effects and transforms)
• Phonetics Guide (interactive)
• 3D objects demo (interactive)
• Blobular (interactive)
• Video embedded in SVG (or use the local download)
• Summer HTML image map creator (source code)
• SVG/CSS demo firefox developer edition design by Rober Villar from Software RVG (source code) (debug mode)

Video

• Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.
• Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.
• Streaming Anime, Movie Trailer and Interview
• Billy's Browser Firefox Flick
• Virtual Barber Shop
• Transformers Movie Trailer
• A Scanner Darkly Movie Trailer (with built in controls)
• Events firing and volume control
• Dragable and sizable videos

3D Graphics

WebGL

• Web Audio Fireworks
• IoQuake3 (source code)
• Escher puzzle (source code)
• Kai 'Opua (source code)

Virtual Reality

• The Polar Sea (source code)
• Sechelt fly-through (source code)

CSS

• CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. (debug mode)
• CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. (source code)
• Bootstrap Contact Form Design
• Paperfold
• CSS Blockout
• Rubik's cube
• Pure CSS Slides
• Planetarium (source code)
• CSS Paralax Forest
• About Us Page Design In Bootstrap
• One Page Scroll Website Template

Transformations

• Impress.js (source code)

Games

• IoQuake3 (source code)
• Kai 'Opua (source code)

HTML

•  Zen Photon Garden (source code)
• HTMl Meta Tags For SMO

Web APIs

Notifications API

• HTML5 Notifications (source code)

Web Audio API

• Web Audio Fireworks
• oscope.js - JavaScript oscilloscope
• Audio Buffer demo (source code)
• HTML5 Web Audio Showcase (source code)
• HTML5 Audio Visualizer (source code)
• Graphical Filter Editor and Visualizer (source code)

File API

• Slide My Text - presentation from plain text files

Web Workers

• Web Worker Fractals
• Photo editor
• Coral generator
• Raytracer
• HotCold Touch Typing
• Enable Leverage Browser Caching