The demos below have not been extensively tested on multiple browsers.

If any of them to not work, try using the latest version of Chrome or Firefox.

Single Resolution Cube

Display a single resolution cubic image with Marzipano.

Try Demo View Source
Multiresolution Cube

Display a multiresolution cubic gigapixel image with Marzipano.

Try Demo View Source
Multiresolution Flat

Display a multiresolution flat gigapixel image with Marzipano.

Try Demo View Source
Equirectangular

Display an equirectangular image with Marzipano.

Try Demo View Source
Video

Play a 360° video in equirectangular format with Marzipano. It is possible to switch between different video resolutions. Marzipano does not have any special code to handle 360° video. This demo shows how it can be implemented.

Try Demo View Source
Generated Cube

Marzipano allows media to be generated procedurally. This demo displays a multiresolution cube which is generated in such a way. After level 16 (which corresponds to cubefaces of ~280 terapixel) it is possible to see issues due to lack of precision in the number types.

Try Demo View Source
Hotspot Styles

Showcases some hotspot styles and effects that can be created with CSS.

Try Demo View Source
Embedded Hotspots

Use embedded hotspots to overlay content from different sources on a 360º image (e.g. YouTube, Google Maps, Twitter).

Try Demo View Source
Device Orientation

Control the panorama using the DeviceOrientation API (gyro) by implementing a custom ControlMethod.

Try Demo View Source
Extra Touch Gestures

A 360º image gallery which hooks into Hammer.js to add some extra touch (and mouse) gestures: double click/tap to zoom, swipe with two fingers to change panorama and press in a point to add a comment.

Try Demo View Source
Transitions

Showcases some of the transitions that can be achieved by using a custom transitionUpdate() function and the easing.js library.

Try Demo View Source
Layers

Display layered equirectangular images by loading them from files on the local hard drive. Manipulate the effects parameter on each of the images.

Try Demo View Source
Editable

Edit an equirectangular image and export it.

Try Demo View Source
Anaglyph

Display a stereoscopic panorama as an anaglyph by adding a color transformation and changing the WebGL blending mode. Includes multiple anaglyph types.

Try Demo View Source
Side-by-side rendering

Display a stereoscopic panorama side-by-side.

Try Demo View Source
WebVR

Display a stereoscopic image using the WebVR API. Requires a browser with WebVR support.

Try Demo View Source
Hotspots with rect effect

Displays multiple layers containing hotspots with a different rect effect.

Try Demo View Source