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
Games
- IoQuake3 (source code)
- Kai 'Opua (source code)
Web APIs
Notifications API
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)