@openmockup-studio/player 0.1.0 → 0.2.0

package/README.md

@@ -3,11 +3,11 @@
 `<mockup-embed>`: put an animated 3D device mockup made in openmockup Studio on any web page with one script tag.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@openmockup-studio/player@0.1.0/dist/embed.js"></script>
-<mockup-embed src="./project.json" trigger="in-view" aspect-ratio="16 / 9"></mockup-embed>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@openmockup-studio/player@0.2.0/dist/embed.js"></script>
+<mockup-embed mockup-id="…" trigger="in-view" aspect-ratio="16 / 9"></mockup-embed>
 ```
 
-`project.json` and its `assets/` folder come from **Embed → Download embed files** in the Studio. Host them next to your page (any static host works). The zip also contains a copy of the player, so the bundle runs without the CDN too.
+**Publish** in the Studio's Embed dialog uploads the scene and gives you its `mockup-id`; that is all the snippet needs. To host a scene yourself instead, use **Download files (.zip)** and point `src` at its `project.json` (any static host works). The zip also contains a copy of the player, so it runs without the CDN too.
 
 The loader (`embed.js`, a few kB) shows the poster at once and fetches the renderer only when the element is about to be seen. Three.js and each device model load as separate chunks, on demand.
 
@@ -15,7 +15,9 @@ The loader (`embed.js`, a few kB) shows the poster at once and fetches the rende
 
 | Attribute | Values | |
 | --- | --- | --- |
-| `src` | URL | The project JSON. |
+| `mockup-id` | id | A scene published from the Studio. |
+| `base` | URL | Where `mockup-id` scenes live, if not the Studio's own store. |
+| `src` | URL | A project JSON you host yourself; wins over `mockup-id`. |
 | `trigger` | `load`, `in-view`, `click`, `hover`, `scroll`, `cursor-move`, `none` | When the animation plays. Defaults to the value saved in the project. |
 | `trigger-loop` | `true`, `false`, `pingpong` | Loop mode. |
 | `trigger-delay` | ms | Delay before playing. |
@@ -28,6 +30,8 @@ The loader (`embed.js`, a few kB) shows the poster at once and fetches the rende
 | `shake-intensity` | 0–100 | Idle hand-held shake. |
 | `low-bandwidth` | `true`, `false` | Poster only. Defaults to on for Save-Data and 2G connections. |
 | `theme` | `light`, `dark` | Loader colours. |
+| `camera-zoom` | number, `100` = twice as close, `-100` = twice as far | Move the camera in or out from the saved framing. Default `0`. |
+| `background-color` | `transparent` or a CSS colour (hex, `rgb()`, `hsl()`, named) | Replace the saved backdrop with a flat colour. Also the loader background. |
 
 Attributes win over the playback settings saved in the project.
 
@@ -36,7 +40,7 @@ Attributes win over the playback settings saved in the project.
 `dist/embed.iife.js` is a single classic script for hosts that cannot load ES modules:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@openmockup-studio/player@0.1.0/dist/embed.iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@openmockup-studio/player@0.2.0/dist/embed.iife.js"></script>
 ```
 
 ## License

package/dist/{device-laptop-abUqnCPB.js → device-laptop-DlKLhrO9.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-CGnMp29N.js";
 import { A as t, H as n, I as r, M as i, P as a, R as o, U as s, Y as c, f as l, h as u, i as d, k as f, r as p, s as m, u as h, v as g, x as _ } from "./three-o_76Nw0r.js";
-import { E as v, T as y, a as b, d as x, f as S, i as C, m as w, n as T, o as E, p as D, r as O, s as k, u as A } from "./device-phone-D__ngcPt.js";
+import { D as v, E as y, a as b, d as x, f as S, i as C, m as w, n as T, o as E, p as D, r as O, s as k, u as A } from "./device-phone-DxWL5LkW.js";
 // ../devices/src/laptop/keyboard.ts
 var j = 1.646, M = 1.596, N = 1.846, P = 27.23, F = {
 	width: P,

package/dist/{device-monitor-DRfsMb1A.js → device-monitor-BkXp8a-n.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-CGnMp29N.js";
 import { A as t, H as n, I as r, L as i, M as a, P as o, W as s, Y as c, f as l, h as u, k as d, p as f, s as p, u as m, v as h, x as g } from "./three-o_76Nw0r.js";
-import { E as _, T as v, a as y, d as b, f as x, i as S, l as C, m as w, n as T, o as E, p as D, r as O, s as k } from "./device-phone-D__ngcPt.js";
+import { D as _, E as v, a as y, d as b, f as x, i as S, l as C, m as w, n as T, o as E, p as D, r as O, s as k } from "./device-phone-DxWL5LkW.js";
 // ../devices/src/monitor/build.ts
 var A = Math.PI / 180;
 function j() {