[ OIM // SYSTEM_ECOSYSTEM ] v0.9.0_BETA

Una sola base visual. Todos los idiomas. One visual base. Every language.

OIM separa el media de su capa textual e interactiva. La imagen base permanece intacta; el player compone contenido dinámico en tiempo real usando metadata portable. OIM separates media from its textual and interactive layer. The base image stays intact while the player composes dynamic content in real time from portable metadata.

Abrir Studio Open Studio
Explorar Biblioteca Explore Library
1X ASSET BASE (PNG) BASE ASSET (PNG)
N-LANG IDIOMAS SOPORTADOS LANGUAGES SUPPORTED
0X RE-EXPORTACIÓN RE-EXPORT EFFORT
{"version": "1.0", "image": "chica-sorprendida.jpg", "slots": [{"id": "bg", "type": "base"}]} {"id": "title", "content": {"es": "Hola OIM", "en": "Hello OIM"}, "position": [12, 45]} {"style": {"fontFamily": "Lora", "fontSize": "24px", "color": "#f59e0b"}} {"layers": [{"z": 0, "opacity": 1.0}, {"z": 1, "type": "interactive"}]} {"ovm_version": "1.0", "metadata": {"fps": 30, "resolution": "1920x1080"}} {"version": "1.0", "image": "chica-sorprendida.jpg", "slots": [{"id": "bg", "type": "base"}]} {"id": "title", "content": {"es": "Hola OIM", "en": "Hello OIM"}, "position": [12, 45]} {"style": {"fontFamily": "Lora", "fontSize": "24px", "color": "#f59e0b"}} {"layers": [{"z": 0, "opacity": 1.0}, {"z": 1, "type": "interactive"}]} {"ovm_version": "1.0", "metadata": {"fps": 30, "resolution": "1920x1080"}}
OIM Concept Board Visual
01 / 08

Internacionaliza tu contenido visual Internationalize your visual content

OIM (Object Interactive Media) separa la base visual (imágenes y videos) de sus capas textuales e interactivas. En lugar de exportar múltiples archivos de imagen para cada idioma, OIM mantiene un único lienzo base limpio e inyecta dinámicamente textos, traducciones y botones en el navegador. Esto reduce drásticamente el peso de carga, facilita el mantenimiento en segundos y hace tus imágenes interactivas indexables por buscadores (SEO). OIM (Object Interactive Media) separates the visual base (images and videos) from their textual and interactive layers. Instead of exporting multiple image files for each language, OIM keeps a single clean base canvas and dynamically injects texts, translations, and buttons in the browser. This drastically reduces load weight, enables maintenance in seconds, and makes your interactive images search-engine indexable (SEO).

02 / 08

Comparativa Interactiva Interactive Comparison

Descubre el poder de Object Interactive Media. A simple vista parece una imagen tradicional, pero al interactuar descubrirás una capa de metadatos dinámicos superpuestos. Esta tecnología permite inyectar múltiples idiomas, interacciones y contenido enriquecido en un único archivo, todo sin modificar los píxeles originales ni perder calidad. ¡Arrastra el control para comparar la imagen estática base con su versión interactiva! Discover the power of Object Interactive Media. At first glance it looks like a traditional image, but interacting with it reveals a layer of dynamic overlaid metadata. This technology allows you to inject multiple languages, interactions, and rich content into a single file, all without modifying the original pixels or losing quality. Drag the slider to compare the static base image with its interactive version!

▲ REVELA PNG BASE REVEALS BASE PNG
REVELA CAPA OIM REVEALS OIM LAYER ▼
OIM interactive canvas with embedded translation and vector interactive layers
▲ OCULTA CAPA OIM HIDES OIM LAYER
OCULTA PNG BASE HIDES BASE PNG ▼
:::::: COMPRESSION // DEFLATE_RAW [wbits=-15]
[ SECURE // ECDSA_SHA256 ]
Cryptographic signature verification board ensuring visual content authenticity in OIM Ecosystem
03 / 08

Seguridad y Confianza Security and Trust

La seguridad en OIM está diseñada para proteger la propiedad intelectual de tus contenidos. La imagen original y su capa dinámica viajan juntas como una sola pieza sellada, sin servidores intermedios ni rastreadores. Security in OIM is designed to protect the intellectual property of your content. The original image and its dynamic layer travel together as a single sealed piece, with no intermediary servers or trackers.

Firma ECDSA ECDSA Signature
Cada exportación se sella con una firma criptográfica. Si alguien altera textos, traducciones o interactividad, la firma se rompe y el visor alerta la manipulación. Every export is sealed with a cryptographic signature. If anyone tampers with texts, translations or interactivity, the signature breaks and the viewer flags it.
Datos embebidos en el PNG Data embedded in the PNG
Sin bases de datos intermedias: la capa dinámica viaja comprimida (Deflate raw) dentro del propio archivo, junto a la imagen original, reduciendo la superficie de ataque. No intermediary databases: the dynamic layer travels compressed (raw Deflate) inside the file itself, alongside the original image, shrinking the attack surface.
Render 100% local 100% local rendering
La descompresión y el renderizado ocurren en el navegador de cada usuario. Sin librerías de terceros ni rastreadores de publicidad: privacidad por defecto. Decompression and rendering happen in each user's browser. No third-party libraries, no ad trackers: privacy by default.
04 / 08

El fin de la redundancia visual The end of visual redundancy

Los medios actuales están "quemados" en el archivo base, multiplicando costos y bloqueando la interactividad. Current media is "burned" into the base file, multiplying costs and blocking interactivity.

Flujo Tradicional Traditional Flow Redundante (5x) Redundant (5x)
video_es.mp4 10.4 MB
ES
video_en.mp4 10.4 MB
EN
video_zh.mp4 10.4 MB
ZH
video_fr.mp4 10.4 MB
FR
…y múltiples versiones más…and multiple more versions
Almacenamiento Total Total Storage 52.0 MB

Cada traducción requiere un renderizado completo y una compresión redundante de la pista de video base. Each translation requires a complete re-render and redundant compression of the base video track.

Flujo OVM / OIM OVM / OIM Flow Eficiente (1x) • -80% Efficient (1x) • -80%
TIENDA MODERNA
Colección de Primavera
Capa 0: Video Crudo Layer 0: Raw Video
Capa +1: Metadatos DOM Layer +1: DOM Metadata
track.json (tEXt)
{ "es": "TIENDA MODERNA" }
Simular inyección de idioma: Simulate language injection:
Almacenamiento Total Total Storage 10.4 MB -80%

Los metadatos ocupan solo 2 KB. El video base de 10.4 MB se reutiliza infinitamente para todos los idiomas. Metadata takes only 2 KB. The 10.4 MB base video is reused infinitely for all languages.

Global por diseño
Un solo archivo sirve a todo el mundo. Cambiar un texto es inmediato, sin re-renderizar horas de metraje. A single file serves the whole world. Changing text is immediate, without re-rendering hours of footage.
Calidad Intocable
La compresión repetida degrada la calidad. OIM mantiene el media base intacto con inyección pura vía FFmpeg. Repeated compression degrades quality. OIM keeps the base media intact with pure FFmpeg injection.
Interactividad Real
La interactividad es matemáticamente imposible en píxeles estáticos. OIM inyecta vida en el DOM a 60FPS. Interactivity is mathematically impossible in static pixels. OIM injects life into the DOM at 60FPS.
05 / 08

Separación en 3 capas 3-layer separation

CAPA +1 — DINÁMICA
Sistema OVM/OIM
Metadatos dinámicos y renderizado DOM a 60FPS.
CAPA 0 — BASE
Media Base — Intocable
El video crudo o la imagen limpia. Sin re-render.
CAPA −1 — PRODUCCIÓN
Filtros y Assets
Color grading y elementos estáticos permanentes.
Producción
STATIC
Base Media
Dinámica
// oim-metadata.json
{
"id": "offer-1",
"content": {
"es": "Hola OIM"
}
}
El reproductor HTML5 ensambla las capas dinámicamente en el dispositivo del cliente. The HTML5 player assembles layers dynamically on the client device.
Cero carga adicional en la GPU; el texto es vectorizado y responsivo. Zero additional GPU load; text is vectorized and responsive.
06 / 08

Ecosistema OIM: La suite integral para medios interactivos OIM Ecosystem: The end-to-end interactive media suite

Elige tu punto de partida. Cada herramienta, cada conector, cada formato. Choose your starting point. Every tool, every connector, every format.

Producción profesional, de principio a fin Professional production, end to end

Diseña visualmente, añade capas multilingües en tiempo real y distribuye imágenes y videos interactivos en un solo archivo. Visually design, add real-time multilingual layers, and distribute interactive media in a single file.

Ver guía rápida → Quick guide →
Editor Imagen OIM
07 / 08

Casos de Uso Use Cases

Explora la interactividad de OIM/OVM en acción a través de diferentes formatos y flujos de trabajo. Explore OIM/OVM interactivity in action across different formats and workflows.

E-Commerce

Fichas de producto interactivas con cambio de idioma en tiempo real y hotspots de compra. Interactive product sheets with real-time translation and purchase hotspots.

OIM Shape

Máscaras vectoriales y formas dinámicas superpuestas sobre el lienzo de la imagen base. Vector masks and dynamic shapes layered on top of the base image canvas.

OIM SVG

Formatos vectoriales escalables con hotspots interactivos integrados en coordenadas. Scalable vector formats with coordinate-based interactive hotspots.

OIM design library showcasing interactive and multilingual templates for web applications
OIM Lottie

Animaciones vectoriales de Lottie renderizadas dinámicamente y sincronizadas con eventos del visor. Lottie vector animations rendered dynamically and synced with viewer events.

OIM Animation

Efectos de parallax sutiles y animaciones basadas en físicas de interacción. Subtle parallax effects and interactive physics-based animations.

OVM Video

Videos interactivos con capas temporales, hotspots dinámicos y reproducción controlada. Interactive videos with temporal layers, dynamic hotspots, and playback control.

Ver Biblioteca Completa Our Portfolio
08 / 08

Stack e Integraciones Stack & Integrations

Construido sobre estándares abiertos y diseñado para encajar en cualquier flujo de distribución moderno. Built on open standards and designed to fit any modern distribution workflow.

OIM Core MIT
SVG Format W3C
FastAPI MIT
Pillow HPND
FFmpeg GPL
React MIT
TypeScript Apache 2.0
Zod MIT
WebCodecs W3C
Turborepo MIT
pnpm Workspaces MIT
Vite Bundler MIT
Google Fonts OFL
MediaPipe AI Apache 2.0
Tailwind CSS MIT
Zustand Store MIT
HTML5 Specs W3C
CSS3 Tokens W3C

Core / Binary

TypeScript, esquemas de validación Zod y compresión Deflate raw (RFC 1951) empaquetados en chunks tEXt de PNG. TypeScript, Zod validation schemas, and raw Deflate compression (RFC 1951) packaged in PNG tEXt chunks.

TypeScript Zod Deflate

Web Component

Un elemento nativo para el navegador escrito en Vanilla JS. Cero dependencias externas y renderizado directo en el DOM a 60FPS. A native browser element written in Vanilla JS. Zero external dependencies and direct DOM rendering at 60FPS.

Custom Elements Shadow DOM 60 FPS

Compatibilidad de Reproductores & Ad-Tech Player Compatibility & Ad-Tech

Diseñado para ser inyectado como una capa interactiva sobre cualquier reproductor HTML5 y estándares de publicidad interactiva. Designed to be injected as an interactive layer on top of any HTML5 player and interactive advertising standards.

Video.js Plugin
VAST / VPAID Ad-Tech
Shopify Headless
React / Next.js / Vite
Contacto Contact

¿Tienes dudas sobre la integración? Any integration questions?

Prueba el estándar OIM en tu propia infraestructura o hablemos sobre soporte Enterprise a la medida de tu negocio. Try the OIM standard in your own infrastructure or let's discuss custom Enterprise support for your business.

GitHub Org Comunidad de Discord

Construyamos un estándar vivo
para imagen y video. Let’s build a living standard
for image and video.

OIM es un formato abierto, un protocolo de metadatos y un ecosistema de herramientas. Empieza hoy. OIM is an open format, a metadata protocol, and a tooling ecosystem. Start today.

Visor Viewer Documentación Documentation