Skill: honeybee1130/mml (version 1.0.0)

--- name: mml description: "Build 3D scenes and interactive experiences using MML (Metaverse Markup Language) for the Otherside metaverse and other MML-compatible environments. Use when creating 3D objects, worlds, interactive elements, animations, models, characters, audio/video, labels, collision-based interactions, position tracking, chat integration, or any MML document. Triggers on: MML, metaverse markup, 3D scene building, Otherside world building, m-cube, m-model, m-character, m-group, m-frame, m-attr-anim." --- # MML (Metaverse Markup Language) > **Full compiled reference:** `/home/ubuntu/.openclaw/workspace/research/mml-reference.md` > Source: mml.io + DashBODK Studio (dashbodk.vercel.app/docs). All elements, attrs, events, collision patterns. MML is an HTML-like markup language for building 3D scenes. Documents are served via WebSocket and rendered by clients (Web/Three.js or Unreal Engine). MML supports scripting via inline `<script>` tags (standard DOM APIs). ## Key Concepts - **Units:** Positions in meters, rotations in degrees, font sizes in centimeters - **Coordinate system:** x (right), y (up), z (forward) - **Common attributes:** All visible elements share `x y z rx ry rz sx sy sz visible id class` - **Collision system:** Set `collision-interval` (ms) on an element to receive `collisionstart`, `collisionmove`, `collisionend` events - **Document time:** Animations and media use document lifecycle time (ms since document start) - **Scripting:** Standard DOM manipulation via `<script>` tags. Use `document.getElementById()`, `addEventListener()`, `setAttribute()`, etc. ## Elements Quick Reference | Element | Purpose | Key Attrs | |---------|---------|-----------| | `m-group` | Container, transforms children as unit | (transform only) | | `m-cube` | 3D box | `width height depth color opacity` | | `m-sphere` | 3D sphere | `radius color opacity` | | `m-cylinder` | 3D cylinder | `radius height color opacity` | | `m-plane` | Flat surface | `width height color opacity` | | `m-model` | Load 3D model (GLTF/OBJ/FBX) | `src anim-src anim-loop anim-enabled start-time pause-time` | | `m-character` | 3D character (composable with m-model children) | `src anim-src anim-loop anim-enabled start-time pause-time` | | `m-light` | Point or spotlight | `type intensity distance angle enabled cast-shadows color` | | `m-image` | Display image in 3D | `src width height emissive opacity` | | `m-video` | Display video in 3D (supports WHEP streaming) | `src width height emissive loop enabled volume start-time pause-time` | | `m-audio` | Spatial audio | `src loop loop-duration enabled volume cone-angle cone-falloff-angle start-time pause-time` | | `m-label` | Text on a plane | `content width height font-size font-color padding alignment color emissive` | | `m-frame` | Embed another MML document | `src min-x max-x min-y max-y min-z max-z load-range unload-range` | | `m-link` | Clickable link (no visual) | `href target` | | `m-prompt` | User text input on click | `message placeholder prefill onprompt` | | `m-interaction` | Action at a point in space | `range in-focus line-of-sight priority prompt oninteract` | | `m-position-probe` | Track user positions | `range interval onpositionenter onpositionmove onpositionleave` | | `m-chat-probe` | Receive chat messages | `range onchat` | | `m-attr-anim` | Keyframe animation (doc-time synced) | `attr start end start-time pause-time duration loop easing ping-pong ping-pong-delay` | | `m-attr-lerp` | Smooth attribute transitions | `attr duration easing` | ## Common Patterns ### Basic scene with transforms ```html <m-group x="0" y="1" z="-5"> <m-cube color="red" width="2" height="0.5" depth="2"></m-cube> <m-sphere color="blue" radius="0.3" y="1"></m-sphere> </m-group> ``` ### Animation (looping rotation) ```html <m-cube color="green" y="2"> <m-attr-anim attr="ry" start="0" end="360" duration="3000" loop="true"></m-attr-anim> </m-cube> ``` ### Smooth transitions on attribute changes ```html <m-cube id="box" color="red" y="1"> <m-attr-lerp attr="x,y,z" duration="500" easing="easeInOutQuad"></m-attr-lerp> </m-cube> ``` ### Click interaction ```html <m-cube id="btn" color="blue" onclick=" this.setAttribute('color', this.getAttribute('color') === 'blue' ? 'red' : 'blue'); "></m-cube> ``` ### Collision detection ```html <m-cube id="platform" width="5" height="0.2" depth="5" color="green" collision-interval="100"> </m-cube> <script> const platform = document.getElementById("platform"); platform.addEventListener("collisionstart", (e) => { platform.setAttribute("color", "yellow"); }); platform.addEventListener("collisionend", (e) => { platform.setAttribute("color", "green"); }); </script> ``` ### Position tracking ```html <m-position-probe id="probe" range="20" interval="500"></m-position-probe> <m-label id="info" content="Waiting..." y="3" width="3" height="1"></m-label> <script> const probe = document.getElementById("probe"); const info = document.getElementById("info"); probe.addEventListener("positionenter", (e) => { info.setAttribute("content", `User ${e.detail.connectionId} entered`); }); </script> ``` ### Load 3D model with animation ```html <m-model src="https://example.com/character.glb" anim-src="https://example.com/dance.glb" anim-loop="true" y="0" sx="1" sy="1" sz="1"> </m-model> ``` ### Composing documents with m-frame ```html <m-frame src="https://example.com/other-scene.html" x="10" y="0" z="0" min-x="-5" max-x="5" min-y="0" max-y="10" min-z="-5" max-z="5"> </m-frame> ``` ### Spatial audio ```html <m-audio src="https://example.com/music.mp3" loop="true" volume="0.5" x="0" y="2" z="0"> </m-audio> ``` ### Chat-reactive elements ```html <m-chat-probe id="chat" range="10"></m-chat-probe> <m-label id="msg" content="" y="3" width="4" height="1"></m-label> <script> document.getElementById("chat").addEventListener("chat", (e) => { document.getElementById("msg").setAttribute("content", e.detail.message); }); </script> ``` ## Easing Functions Available for `m-attr-anim` and `m-attr-lerp`: `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeInQuint`, `easeOutQuint`, `easeInOutQuint`, `easeInSine`, `easeOutSine`, `easeInOutSine`, `easeInExpo`, `easeOutExpo`, `easeInOutExpo`, `easeInCirc`, `easeOutCirc`, `easeInOutCirc`, `easeInElastic`, `easeOutElastic`, `easeInOutElastic`, `easeInBack`, `easeOutBack`, `easeInOutBack`, `easeInBounce`, `easeOutBounce`, `easeInOutBounce` Omit easing for linear interpolation. ## Events Reference | Event | Source | Key Properties | |-------|--------|----------------| | `click` | Any clickable element | `detail.connectionId`, `detail.position` | | `collisionstart` | Elements with `collision-interval` | `detail.connectionId`, `detail.position` | | `collisionmove` | Elements with `collision-interval` | `detail.connectionId`, `detail.position` | | `collisionend` | Elements with `collision-interval` | `detail.connectionId` | | `positionenter` | `m-position-probe` | `detail.connectionId`, `detail.position`, `detail.rotation` | | `positionmove` | `m-position-probe` | `detail.connectionId`, `detail.position`, `detail.rotation` | | `positionleave` | `m-position-probe` | `detail.connectionId` | | `chat` | `m-chat-probe` | `detail.message`, `detail.connectionId` | | `interact` | `m-interaction` | `detail.connectionId` | | `prompt` | `m-prompt` | `detail.value`, `detail.connectionId` | | `connected` / `disconnected` | Document-level | `detail.connectionId` | ## Platform Support Most elements work on both Web and Unreal. Notable exceptions: - `m-link`: Web only - `m-attr-lerp`: Web only - `m-frame` bounds/load-range: Web only - `socket` attribute: Web only ## Full Element Docs For detailed attribute lists per element, see [references/elements.md](references/elements.md).

path: references/elements.md
content: # MML Elements — Full Attribute Reference

## Table of Contents
- [m-group](#m-group)
- [m-cube](#m-cube)
- [m-sphere](#m-sphere)
- [m-cylinder](#m-cylinder)
- [m-plane](#m-plane)
- [m-model](#m-model)
- [m-character](#m-character)
- [m-light](#m-light)
- [m-image](#m-image)
- [m-video](#m-video)
- [m-audio](#m-audio)
- [m-label](#m-label)
- [m-frame](#m-frame)
- [m-link](#m-link)
- [m-prompt](#m-prompt)
- [m-interaction](#m-interaction)
- [m-position-probe](#m-position-probe)
- [m-chat-probe](#m-chat-probe)
- [m-attr-anim](#m-attr-anim)
- [m-attr-lerp](#m-attr-lerp)

---

## Shared Transform Attributes (all visible elements)

| Attr | Type | Default | Description |
|------|------|---------|-------------|
| `x` | float | 0 | Position X (meters) |
| `y` | float | 0 | Position Y (meters) |
| `z` | float | 0 | Position Z (meters) |
| `rx` | float | 0 | Rotation X (degrees) |
| `ry` | float | 0 | Rotation Y (degrees) |
| `rz` | float | 0 | Rotation Z (degrees) |
| `sx` | float | 1 | Scale X |
| `sy` | float | 1 | Scale Y |
| `sz` | float | 1 | Scale Z |
| `visible` | bool | true | Show/hide |
| `debug` | bool | false | Show debug axes |
| `socket` | string | — | Bone name to attach to (Web only) |
| `id` | string | — | Unique identifier |
| `class` | string | — | Space-separated class names |

## Shared Collision Attributes (primitives, m-model, m-character, m-image, m-video)

| Attr | Type | Default | Description |
|------|------|---------|-------------|
| `collide` | bool | true | Participate in collision detection |
| `collision-interval` | int | — | Ms between collision checks (required to enable events) |
| `oncollisionstart` | script | — | On collision start |
| `oncollisionmove` | script | — | On collision move |
| `oncollisionend` | script | — | On collision end |

---

## m-group
Container for grouping/transforming children as a unit.
- Transform attrs only + `onclick`

## m-cube
3D box primitive.

| Attr | Type | Default |
|------|------|---------|
| `width` | float | 1 (meters) |
| `height` | float | 1 (meters) |
| `depth` | float | 1 (meters) |
| `color` | string | "white" |
| `opacity` | float | 1 |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-sphere
3D sphere primitive.

| Attr | Type | Default |
|------|------|---------|
| `radius` | float | 0.5 (meters) |
| `color` | string | "white" |
| `opacity` | float | 1 |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-cylinder
3D cylinder primitive.

| Attr | Type | Default |
|------|------|---------|
| `radius` | float | 0.5 (meters) |
| `height` | float | — |
| `color` | string | "white" |
| `opacity` | float | 1 |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-plane
Flat plane primitive.

| Attr | Type | Default |
|------|------|---------|
| `width` | float | 1 (meters) |
| `height` | float | 1 (meters) |
| `color` | string | "white" |
| `opacity` | float | 1 |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-model
Load external 3D model (GLTF, OBJ, FBX).

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI to model file) |
| `anim-src` | string | — (URI to animation file) |
| `anim-loop` | bool | true |
| `anim-enabled` | bool | true |
| `start-time` | int | 0 (ms) |
| `pause-time` | int | — |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-character
3D character. Can contain `m-model` children for composition.

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI to character model) |
| `anim-src` | string | — (URI to animation) |
| `anim-loop` | bool | true |
| `anim-enabled` | bool | true |
| `start-time` | int | 0 (ms) |
| `pause-time` | int | — |
| `cast-shadows` | bool | true |
+ Transform, Collision, `onclick`

## m-light
Point or spotlight.

| Attr | Type | Default |
|------|------|---------|
| `type` | enum | "point" ("point" or "spotlight") |
| `intensity` | float | 1 (candela) |
| `distance` | float | 0 (0 = infinite) |
| `angle` | float | 45 (degrees, spotlight only) |
| `enabled` | bool | true |
| `cast-shadows` | bool | true |
| `color` | string | "white" |
+ Transform, `onclick`

## m-image
Display image in 3D.

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI) |
| `width` | float | 1 (meters) |
| `height` | float | 1 (meters) |
| `emissive` | float | 0 |
| `opacity` | float | 1 |
| `cast-shadows` | bool | true |
+ Transform, Collision

## m-video
Display video in 3D. Supports WHEP streaming (use `whep://` protocol).

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI or whep://) |
| `width` | float | 1 (meters) |
| `height` | float | 1 (meters) |
| `emissive` | float | 0 |
| `loop` | bool | true |
| `enabled` | bool | true |
| `volume` | float | 1 |
| `start-time` | int | 0 (ms) |
| `pause-time` | int | — |
| `cast-shadows` | bool | true |
+ Transform, Collision

## m-audio
Spatial audio source.

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI) |
| `loop` | bool | true |
| `loop-duration` | float | — (seconds, Web only) |
| `enabled` | bool | true |
| `volume` | float | 1 |
| `cone-angle` | float | 360 (degrees, Web only) |
| `cone-falloff-angle` | float | 0 (Web only) |
| `start-time` | int | 0 (ms) |
| `pause-time` | int | — |
+ Transform

## m-label
Text displayed on a plane.

| Attr | Type | Default |
|------|------|---------|
| `content` | string | — |
| `width` | float | 1 (meters) |
| `height` | float | 1 (meters) |
| `emissive` | float | 0 |
| `font-size` | float | 24 (centimeters) |
| `font-color` | string | "black" |
| `padding` | float | 8 (centimeters) |
| `alignment` | enum | "left" ("left", "center", "right") |
| `color` | string | "white" (background) |
| `cast-shadows` | bool | true |
+ Transform, `onclick`

## m-frame
Embed another MML document. Supports content bounds and distance-based loading.

| Attr | Type | Default |
|------|------|---------|
| `src` | string | — (URI to MML doc) |
| `min-x` | float | — (Web only) |
| `max-x` | float | — (Web only) |
| `min-y` | float | — (Web only) |
| `max-y` | float | — (Web only) |
| `min-z` | float | — (Web only) |
| `max-z` | float | — (Web only) |
| `load-range` | float | — (meters, Web only) |
| `unload-range` | float | 1 (meters, Web only) |
+ Transform

## m-link
Open URL on click. No visual — children are clickable. **Web only.**

| Attr | Type | Default |
|------|------|---------|
| `href` | string | — |
| `target` | string | "_blank" ("_self" or "_blank") |
+ Transform

## m-prompt
Text input dialog on click.

| Attr | Type | Default |
|------|------|---------|
| `message` | string | — |
| `placeholder` | string | — |
| `prefill` | string | — |
| `onprompt` | script | — |
+ Transform

## m-interaction
Contextual action at a point in space.

| Attr | Type | Default |
|------|------|---------|
| `range` | float | 5 (meters) |
| `in-focus` | bool | true (Web only) |
| `line-of-sight` | bool | false (Web only) |
| `priority` | int | 1 |
| `prompt` | string | — |
| `oninteract` | script | — |
+ Transform

## m-position-probe
Track user positions within range.

| Attr | Type | Default |
|------|------|---------|
| `range` | float | 10 (meters) |
| `interval` | int | 1000 (ms) |
| `onpositionenter` | script | — |
| `onpositionmove` | script | — |
| `onpositionleave` | script | — |
+ Transform

## m-chat-probe
Receive chat messages from nearby users.

| Attr | Type | Default |
|------|------|---------|
| `range` | float | 1 (meters) |
| `onchat` | script | — |
+ Transform

## m-attr-anim
Document-time-synchronized keyframe animation. Place as child of target element.

| Attr | Type | Default |
|------|------|---------|
| `attr` | string | — (parent attribute to animate) |
| `start` | string | — (start value) |
| `end` | string | — (end value) |
| `start-time` | int | 0 (ms) |
| `pause-time` | int | — |
| `duration` | int | 1000 (ms) |
| `loop` | bool | true |
| `easing` | enum | — (linear if omitted) |
| `ping-pong` | bool | false |
| `ping-pong-delay` | int | 0 (ms, part of duration) |

## m-attr-lerp
Smooth transitions when attributes change. Place as child. **Web only.**

| Attr | Type | Default |
|------|------|---------|
| `attr` | string | — (comma-separated attrs, or "all") |
| `duration` | int | 1000 (ms) |
| `easing` | enum | — (linear if omitted) |


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: clean (LOW)