PortalStudio
OIM Ecosystem

English

Español

English

Español

Appearance

Ecosystem Use Cases & Feature Flags ​

The OIM ecosystem delivers interactive media that is lightweight, accessible, and easily adaptable to diverse business needs. Rather than requiring heavy client-side playground engines on documentation pages, this guide provides complete, production-ready code examples and architectural diagrams for every real-world application.

1. Production Use Cases ​

A. Shoppable E-Commerce & Interactive Catalogs ​

In conventional e-commerce, images are flat and unclickable. OIM turns promotional banners into interactive micro-storefronts where each item can be independently clicked to reveal details or trigger a checkout action.

text
┌────────────────────────────────────────────────────────┐
│ Layer +1: Dynamic Interactive Slots                    │
│  [ Hoodie Tag: $89.00 ]  ──> Click ──> emit(oim:action)│
│  [ Sneakers:  $140.00 ]  ──> Click ──> emit(oim:action)│
├────────────────────────────────────────────────────────┤
│ Layer 0: Separator (symbolic, stores nothing)          │
├────────────────────────────────────────────────────────┤
│ Layer −1: Baked Base Image                             │
│  (Photo: model wearing the products, baked in)         │
└────────────────────────────────────────────────────────┘

Complete Implementation Code: ​

html
<!-- Shoppable Banner HTML -->
<oim-player
  id="hero-banner"
  src="/media/store/autumn-lookbook.oim.png"
  lang="en"
  fit="contain">
</oim-player>

<script>
  const player = document.getElementById('hero-banner');

  // Intercept interactive product clicks
  player.addEventListener('oim:action', (event) => {
    const { name, slot, action } = event.detail;

    if (name === 'add_to_cart') {
      event.preventDefault(); // Stop default browser navigation
      cartService.addItem({
        sku: slot.customData?.sku || slot.id,
        price: slot.customData?.price,
        title: slot.content?.en || 'Store Item'
      });
      showCartToast(`Added ${slot.content?.en} to cart!`);
    }
  });
</script>

B. Global Multilingual Marketing Campaigns ​

Marketing teams typically produce, translate, and upload dozen of static JPG or WebP variants for every target country. OIM collapses this into a single file with embedded translation dictionaries.

text
                  ┌── [lang="en"] ──> "Summer Flash Sale: 50% Off"
[ single .oim ] ──┼── [lang="es"] ──> "Venta Flash de Verano: 50% Dto"
                  └── [lang="fr"] ──> "Vente Flash d'Été: -50%"

Complete Implementation Code: ​

html
<!-- Localized Banner with Language Switcher -->
<div class="banner-wrapper">
  <oim-player
    id="global-campaign"
    src="/media/campaigns/promo-2026.oim.png"
    lang="en">
  </oim-player>

  <!-- External Site Language Controls -->
  <div class="lang-controls">
    <button onclick="switchLang('en')">English</button>
    <button onclick="switchLang('es')">Español</button>
    <button onclick="switchLang('fr')">Français</button>
  </div>
</div>

<script>
  function switchLang(locale) {
    const player = document.getElementById('global-campaign');
    // Instant runtime locale change without reloading the image
    player.setLang(locale);
  }
</script>

C. Adaptive Theming with Dynamic Colors ​

Allow brand visuals to seamlessly conform to your website or application's dark and light mode palettes without re-rendering raster graphics.

text
Host CSS Variables               Dynamic Color Slots in .oim
--oim-color-primary: #f59e0b ──> [ Brand Accent Heading ]
--oim-color-surface: #121316 ──> [ Card Tag Background  ]
--oim-color-text:    #f3f4f6 ──> [ CTA Label Text      ]

Complete Implementation Code: ​

html
<style>
  /* Host application theme tokens */
  :root[data-theme="dark"] {
    --oim-color-primary: #f59e0b;
    --oim-color-surface: #18191d;
    --oim-color-text: #f3f4f6;
  }
  :root[data-theme="light"] {
    --oim-color-primary: #d97706;
    --oim-color-surface: #ffffff;
    --oim-color-text: #111827;
  }
</style>

<!-- Theme-Adaptive Asset -->
<oim-player
  src="/media/graphics/dashboard-hero.oim.png"
  allow-dynamic-colors="true">
</oim-player>

D. Interactive Video Stories & Decision Branching (.ovm) ​

For interactive tutorials, non-linear video advertisements, and branching storylines, .ovm pairs standard MP4/WebM video with frame-synced decision points.

text
00:00 ─── Video Intro ─── 00:15 ─── [ Choice Point: Left or Right? ]
                                      ├── Choice A ──> Jumps to 00:16 (Path A)
                                      └── Choice B ──> Jumps to 00:45 (Path B)

Complete Implementation Code: ​

html
<ovm-player
  id="interactive-story"
  src="/media/video/interactive-demo.ovm"
  autoplay
  controls>
</ovm-player>

<script>
  const ovm = document.getElementById('interactive-story');

  ovm.addEventListener('ovm:branch', (e) => {
    console.log('User selected story branch:', e.detail.branchId);
  });
</script>

2. Feature Flags & Hardware Performance Tuning ​

<oim-player> provides declarative attributes to toggle optional sub-systems on or off to accommodate low-power mobile devices, accessibility standards, or fixed-layout requirements.

Disabling Lottie Micro-Animations (allow-lottie="false") ​

When displaying hundreds of assets in an infinite grid or targeting battery-constrained mobile phones, you can deactivate the embedded Lottie player engine:

html
<!-- Completely skips loading and executing the Lottie animation engine -->
<oim-player
  src="/media/cards/product-grid-item.oim.png"
  allow-lottie="false">
</oim-player>
  • Memory Impact: Saves approximately 60 KB of memory per player instance.
  • CPU Impact: Zero animation loop overhead when idle.

Enforcing Reduced Motion (disable-animations="true") ​

For accessibility compliance with WCAG 2.2 and users who have enabled OS-level reduced motion preferences:

html
<!-- Halts sine-wave text ripples, floating physics, and elastic bounces -->
<oim-player
  src="/media/banners/announcement.oim.png"
  disable-animations="true">
</oim-player>

When embedding an <oim-player> inside an anchor link (<a>) or card component that handles navigation at the container level:

html
<a href="/products/hoodie" class="product-card">
  <!-- Disable internal slot hit-testing to prevent pointer competition -->
  <oim-player
    src="/media/products/hoodie.oim.png"
    disable-actions="true">
  </oim-player>
  <h3>Classic Urban Hoodie</h3>
</a>

Enabling Inspection Zoom (allow-zoom="true") ​

For detailed infographics, schematics, or art galleries:

html
<!-- Enables pinch-to-zoom on touch screens and wheel-zoom on desktop -->
<oim-player
  src="/media/diagrams/system-architecture.oim.png"
  allow-zoom="true"
  min-zoom="1.0"
  max-zoom="4.0">
</oim-player>

3. Summary of Feature Configuration Attributes ​

AttributeAccepted ValuesDefaultArchitectural Impact
allow-lottie"true" | "false""true"When "false", skips Lottie engine initialization and saves CPU
disable-animations"true" | "false""false"When "true", renders all layers in static rest state (WCAG)
disable-actions"true" | "false""false"When "true", slot hover and click detection are disabled
allow-zoom"true" | "false""false"When "true", enables touch-pinch and mouse-wheel zoom
allow-dynamic-colors"true" | "false""true"When "false", ignores host CSS tokens and preserves authored hex
auto-rotate-langnumber | "false""false"When set to milliseconds (e.g. 3000), cycles locales automatically
mode"full" | "image""full"In "image" mode, runs as pure zero-overhead raster image