OIM-Studio Visual Manual

OIM-Studio is the visual editor Xue Studios uses to create, customise and package Object Interactive Media (.oim) files.

Internal tool

OIM-Studio is not publicly available: there is nothing to install or run. This page explains what the editor does so you can understand the files it produces. Step-by-step tutorials are published on the OIM blog. To create .oim files from your own agent, see Agents (MCP).

---

1. Canvas & Workspace Architecture

The OIM-Studio workspace is structured around a high-precision, responsive canvas designed for interactive layer authoring:

• Adaptive Canvas: The editor canvas operates in scalable logical coordinates that normalize upon export into Container Query Width (cqw) units.
• Layers Hierarchy:
  • Layer −1 · Baked: What is fixed in the image with Fix in image: backgrounds, photos, shapes, and any filters or masks the author bakes in.
  • Layer 0 · Separator: Symbolic only; it stores nothing. It marks where the baked pixels end and the live slots begin.
  • Layer +1 · Dynamic: Interactive slots: dynamic text, localized typography, vector shapes, Lottie micro-animations, interactive hit zones, and any SVG clip-paths, blur filters or animated patterns the author leaves live.
• View Modes:
  1. Design Mode: Full editing capabilities, transform handles, wireframes, and multi-selection guides.
  2. Preview / Live Mode: Live interactive simulation with real hover effects, click actions, and real-time language toggling (ES | EN).
  3. Parallax Mode: 2.5D depth simulation demonstrating mouse-driven or scroll-driven parallax layers.

---

2. Geometric Vector Shapes

OIM-Studio provides a built-in library of mathematical vector primitives:

Shape Type	Parameters	Behavior
rectangle	width, height, borderRadius	Box container with adaptive corner smoothing
circle	radius, strokeWidth	Perfect elliptical vector boundary
star	points, innerRadius, outerRadius	Multi-point star polygon
polygon	sides, radius	Regular $n$-sided polygon generator
heart	scale, path	Cubic Bézier heart curve
freehand	pathData, tension	Smoothed vector pen path

All shapes support solid color fills, linear/radial gradients, dynamic semantic tokens (Dynamic Colors), and drop shadows.

Photo frames (image fill)

Any shape with an area can hold a photo instead of a flat colour. Choose Fill → Image, upload a photo, and it fills the shape. Double-click the shape to reposition and zoom the photo (crop mode). The editor embeds the photo at export and keeps the fill colour underneath, which shows if the photo is missing. Lines and scribbles cannot take a photo fill.

Through the MCP tools, set fillType: "image" with fillImageUrl (uploaded automatically) and, optionally, fillImageCrop.

Images and photo frames also take Filters (black and white, sepia, blur, brightness, contrast, saturation, hue): they change the photo only, never the frame's stroke.

Choose Shape in the image or frame panel to pick one of the twelve new shapes, or SVG… to load your own SVG. Uploaded SVGs are sanitised: only their path geometry is kept (scripts, event attributes, links and styles are dropped), normalised to a 0–100 box. Flip mirrors the photo inside the frame. Rectangle turns a frame back into a plain picture when it came from one.

---

3. Dynamic Typography & Animation Engine

Text layers in OIM-Studio are not flattened pixels; they are fully accessible, translatable DOM nodes:

• Bilingual Content: Every text slot accepts multi-language strings (e.g., content.en and content.es).
• Auto-Width & Multi-Line: Dynamic text expands fluidly with container-query constraints (maxWidth: 110cqw).
• Character Wave Animation:
  • Sine wave text modulation calculated character by character: $$y(i) = A \cdot \sin(\omega \cdot i + \phi)$$
• Motion Presets:
  • Continuous loops: pulse, float, bounce, glow, spin.
  • Micro-interactions: 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. Layer Masks: Cutout vs. Window

OIM-Studio implements advanced mathematical masking via SVG <clipPath>:

1. Cutout Mode (Die-Cut):
   • Evaluates the silhouette of the mask shape across all underlying layers using fill-rule="evenodd".
   • Punches out translucent holes through lower shapes while preserving the baked image (Layer −1).
2. Window Mode:
   • Renders an explicit SVG frame around the canvas aperture, confining animations within a visible viewport boundary.

Unique layer IDs are regenerated during layer duplication to avoid shared clipPath collisions.

---

5. Export Pipeline & Packaging Sandbox

When you click Export .oim, the studio executes a multi-step compilation:

1. Rasterization: Pure rendering of the baked image (Layer −1) into clean PNG pixels (excluding the Dynamic slots of Layer +1).
2. Dimension Normalization: Converts screen pixels (px) into relative percentages and cqw units.
3. Packaging & ECDSA Signing: The metadata is compressed into the PNG container as described in the .oim specification, and the Xue Studios signing service signs it with ECDSA P-256 (see What the signature guarantees).
4. Sandbox Preview: The resulting .oim.png is instantly re-read by an embedded <oim-player> inside the export modal to guarantee 100% fidelity before disk download.