Manual Visual de OIM-Studio

OIM-Studio es el editor visual con el que Xue Studios crea, personaliza y empaqueta archivos Object Interactive Media (.oim).

Herramienta interna

OIM-Studio no es de acceso público: no hay nada que instalar ni ejecutar. Esta página explica qué hace el editor para que entiendas los archivos que produce. Los tutoriales paso a paso se publican en el blog de OIM. Para crear archivos .oim desde tu propio agente, consulta Agentes (MCP).

---

1. Arquitectura del Lienzo y Espacio de Trabajo

El espacio de trabajo de OIM-Studio está estructurado alrededor de un lienzo (canvas) responsivo de alta precisión diseñado para la autoría interactiva de capas:

• Lienzo Adaptativo: El lienzo del editor opera en coordenadas lógicas escalables que se normalizan durante la exportación a unidades Container Query Width (cqw).
• Jerarquía de Capas:
  • Capa −1 · Horneada: Lo que se fija en la imagen con Fijar en la imagen: fondos, fotos, formas y los filtros o máscaras que el autor hornea.
  • Capa 0 · Separador: Solo simbólica; no almacena nada. Marca dónde terminan los píxeles horneados y empiezan los slots vivos.
  • Capa +1 · Dinámica: Slots interactivos: texto dinámico, tipografía localizada, formas vectoriales, micro-animaciones Lottie, zonas de clic y los clipPath SVG, desenfoques o patrones animados que el autor deja vivos.
• Modos de Visualización:
  1. Modo Diseño: Edición completa, controles de transformación, guías de alineación y selección múltiple.
  2. Modo Previsualización / Live: Simulación interactiva real con efectos hover, acciones de clic y alternancia de idioma en caliente (ES | EN).
  3. Modo Parallax: Simulación de profundidad 2.5D con movimiento de capas impulsado por el ratón o scroll.

---

2. Formas Vectoriales Geométricas

OIM-Studio ofrece una biblioteca nativa de primitivas vectoriales matemáticas:

Tipo de Forma	Parámetros	Comportamiento
rectangle	width, height, borderRadius	Contenedor rectangular con redondeo adaptativo
circle	radius, strokeWidth	Límite vectorial elíptico perfecto
star	points, innerRadius, outerRadius	Polígono estrellado de múltiples vértices
polygon	sides, radius	Generador de polígonos regulares de $n$ lados
heart	scale, path	Curva Bézier cúbica en forma de corazón
freehand	pathData, tension	Trazado vectorial libre suavizado

Todas las formas admiten rellenos sólidos, degradados lineales y radiales, tokens semánticos dinámicos (Dynamic Colors) y sombras paralelas.

Marcos con foto (relleno de imagen)

Cualquier forma con área puede contener una foto en lugar de un color plano. Elige Relleno → Imagen, sube una foto y la forma se rellena con ella. Haz doble clic en la forma para reposicionar y ampliar la foto (modo recorte). El editor incrusta la foto al exportar y conserva el color de relleno debajo, que se ve si la foto falta. Las líneas y los trazos libres (scribble) no admiten relleno con foto.

Con las herramientas MCP, usa fillType: "image" con fillImageUrl (se sube automáticamente) y, opcionalmente, fillImageCrop.

Las imágenes y los marcos admiten también Filtros (blanco y negro, sepia, desenfoque, brillo, contraste, saturación, tono): cambian solo la foto, nunca el trazo del marco.

Elige Forma en el panel de la imagen o del marco para usar una de las doce formas nuevas, o SVG… para cargar un SVG propio. Los SVG subidos se sanean: solo se conserva su geometría de trazados (se eliminan scripts, atributos de evento, enlaces y estilos) y se normaliza a una caja de 0–100. Voltear refleja la foto dentro del marco. Rectángulo devuelve un marco a imagen normal cuando procede de una imagen.

---

3. Tipografía Dinámica y Motor de Animación

Las capas de texto en OIM-Studio no son píxeles acoplados, sino nodos DOM accesibles y traducibles:

• Contenido Bilingüe: Cada slot de texto admite cadenas multilingües (ej. content.en y content.es).
• Ancho Automático y Multilínea: El texto dinámico se expande fluidamente respetando los límites de contenedor (maxWidth: 110cqw).
• Animación de Onda Tipográfica:
  • Modulación senoidal calculada carácter a carácter: $$y(i) = A \cdot \sin(\omega \cdot i + \phi)$$
• Presets de Movimiento:
  • Bucles continuos: pulse, float, bounce, glow, spin.
  • Micro-interacciones: hover-grow, hover-lift, hover-underline.

{
  "id": "headline_slot",
  "type": "text",
  "position": [10.5, 20.0],
  "style": {
    "fontSize": "3.5cqw",
    "color": "var(--oim-color-primary, #ffffff)",
    "animation": "wave"
  },
  "content": {
    "en": "Experience Interactive Art",
    "es": "Experimenta el Arte Interactivo"
  }
}

---

4. Máscaras de Capa: Troquel (Cutout) vs. Ventana (Window)

OIM-Studio implementa recorte matemático avanzado mediante SVG <clipPath>:

1. Modo Troquel (Cutout):
   • Evalúa la silueta de la máscara sobre todas las capas inferiores usando la regla fill-rule="evenodd".
   • Perfora aberturas translúcidas a través de las formas inferiores conservando la imagen horneada (Capa −1) intacta.
2. Modo Ventana (Window):
   • Renderiza un marco SVG visible alrededor de la apertura del lienzo, confinando las animaciones dentro del límite del visor.

Los IDs de capa se regeneran al duplicar capas para evitar colisiones compartidas de clipPath.

---

5. Pipeline de Exportación y Sandbox de Empaquetado

Al pulsar Exportar .oim, el editor ejecuta una compilación en varios pasos:

1. Rasterización: Renderizado puro de la imagen horneada (Capa −1) en píxeles PNG limpios (excluyendo los slots de la Capa +1 · Dinámica).
2. Normalización de Dimensiones: Convierte píxeles de pantalla (px) a porcentajes relativos y unidades cqw.
3. Empaquetado y Firma ECDSA: Los metadatos se comprimen dentro del contenedor PNG como describe la especificación .oim, y el servicio de firma de Xue Studios los firma con ECDSA P-256 (ver Qué garantiza la firma).
4. Previsualización en Sandbox: El archivo .oim.png resultante es re-leído al instante por un <oim-player> incrustado en el modal de exportación para asegurar un 100% de fidelidad antes de la descarga.