IMS - Immersive Media Spots

Simple web components that turn static pages into immersive, interactive media experiences. Drop a single HTML tag — get a full-featured 360° spinner, panorama viewer, image comparison slider, or video player.

GitHub Docs npm

The Limitations of Static Images and Video

The most familiar types of visual media content on the internet are images and videos. While formats like GIF animations provide some motion, all of these are natively supported by modern web browsers. However, are these formats sufficient for a comprehensive and engaging presentation of everything we want to share with our users?

Let’s explore scenarios where we require something more extensive—and how IMS solves them.

The Hypermedia Viewer: A Killer Feature

Before diving into individual widget types, it's essential to highlight the killer feature of IMS: Hypermedia Navigation.

By combining the universal <ims-viewer> with <ims-hotspots>, you can link different media experiences together into a single, seamless flow. This means you can let users explore a 3D product, click a hotspot to open a detailed image gallery, and then transition smoothly to a 360° panoramic interior—all without writing complex routing logic.

<ims-viewer
  src-data="./exterior-spin.json"
  url-template="./{{imsType}}/index.js"
  hotspots="./exterior-hotspots.json">
</ims-viewer>

Hotspots transform disconnected media assets into immersive, interconnected storytelling. On top of that, ims-viewer provides built-in version control — each data source can pin the exact library release it was authored with, so previously published pages keep working even as the project evolves.

Gallery

Often, when representing a subject, we require a sequenced set of images organized by context. Placing them one after another consumes vertical space, discouraging users from scrolling.

We offer a sleek, touch-friendly gallery widget with quick navigation, looping, and fullscreen modes:

Diff

When the essence of the demonstration lies in showcasing before and after states, there's nothing quite like utilizing a specialized widget:

This setup is perfect for:

Different materials or color variations
Seasonal and weather variations
Before and after completed work (e.g. restoration)
Changes over time
UI design options and screenshots

Spinner

The most comprehensive representation of an object is viewing it from all angles:

With frame-by-frame rotation, drag interaction, and autoplay, ims-spinner is ideal for online stores, antiques, scientific artifacts, and scenarios where creating full 3D models is technically complex or too expensive compared to photography.

Pano

Spherical panoramic images drastically expand the presentation of spaces:

Utilizing Three.js beneath the surface, ims-pano provides inertia-based panning, zoom, and auto-rotation suited for real estate, interior design, and 360-degree action camera footage.

Video

Classic video content remains a cornerstone of any full-fledged presentation. Rather than treating it as a standalone embed, we integrate it into the wider narrative alongside other media types — making video just another scene in your hypermedia story:

Our ims-video widget supports HLS adaptive streaming, multiple subtitle tracks, and quality switching — all delivered through the same minimal HTML tag interface as every other IMS widget.

Audio

We bring sound into the same interactive ecosystem. The ims-audio widget renders a real-time waveform visualization powered by the Web Audio API, giving listeners a visual sense of the track as it plays.

3D Model

For products and objects that demand full spatial exploration, we provide ims-model — a 3D viewer for GLTF/GLB assets with orbit controls, auto-rotation, and lighting presets, all built on Three.js.

Map

When your content has a geographic dimension, ims-map delivers an interactive map with custom marker overlays. Markers can trigger navigation to other IMS scenes, opening external links, or calling internal widget APIs — making it a powerful spatial entry point for hypermedia stories.

Why IMS? Core Features

All widgets share a universal architecture that unlocks powerful out-of-the-box capabilities:

One tag, one widget: <ims-viewer src-data="data.json"> dynamically imports exactly what it needs to render itself.
Universal compatibility: Works effortlessly in any environment (Vanilla HTML, React, Vue, Angular, Svelte) — anything that renders DOM.
Smart Loading: Adaptive resolution based on viewport and DPI, lazy initialization via IntersectionObserver.
Version Pinning: We protect backward-compatibility down to the exact library version right from your source JSON payload, ensuring long-term stability.
Mobile First: Touch gestures, responsive sizing, and native Fullscreen API integration — robust on all mobile devices.
Deep Customization: Full CSS theming via custom properties. No framework lock-in.

IMS is supported optimally across all popular browsers, powered by the minimal execution footprint of Symbiote.js.

IMS is released under the MIT license. You are completely free to deploy the project code, modify it for your setups, or collaborate with us by sending a PR!

We welcome any feedback and stars on GitHub.

npm GitHub