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.

If you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.

2D Graphics

Canvas

• Blob Sallad: an interactive blob using JavaScript and canvas (code demos)
• 3D RayCaster
• processing.js
• p5js
• 3D on 2D Canvas
• miniPaint: Image editor (source code)
• Zen Photon Garden (source code)
• Multi touch in canvas demo (source code)

SVG

• 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)

Video

• Video 3D Animation "mozilla constantly evolving"
• Video 3D animation "Floating Dance"
• 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 Zen Garden
• CSS floating logo "mozilla"
• Paperfold
• CSS Blockout
• Rubik's cube
• Pure CSS Slides
• Planetarium (source code)
• Loader with blend modes
• Text reveal with clip-path
• Ambient shadow with custom properties
• Luminiscent vial
• CSS-based single page application (source code)

Transformations

• Impress.js (source code)

Games

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

Web APIs

Notifications API

• HTML5 Notifications (source code)

Web Audio API

• Web Audio Fireworks
• oscope.js - JavaScript oscilloscope
• 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