Developers — Embed Interactive Mockups

Every mckp.live scene can be embedded as a live, interactive 3D mockup: a web component, an iframe or a plain URL. The Get Code button in the editor prints a ready snippet with the scene's current settings; this page lists what you can change by hand.

Settings resolve in this order: attribute → settings saved in the scene → built-in default. Set only what you want to change.

Web component

Load the script once per page; any number of players can use it.

<script src="https://embed.mckp.live/embed.js" async></script>

<mockup-player mockup-id="SCENE-UUID" aspect-ratio="16 / 9"></mockup-player>

React

import { useEffect } from "react";

export default function Mockup() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://embed.mckp.live/embed.js";
    s.async = true;
    document.head.appendChild(s);
  }, []);

  return <mockup-player mockup-id="SCENE-UUID" aspect-ratio="16 / 9" />;
}

Vue

<script setup>
import { onMounted } from "vue";
// vite: vue({ template: { compilerOptions: { isCustomElement: (t) => t === "mockup-player" } } })
onMounted(() => {
  const s = document.createElement("script");
  s.src = "https://embed.mckp.live/embed.js";
  s.async = true;
  document.head.appendChild(s);
});
</script>

<template>
  <mockup-player mockup-id="SCENE-UUID" aspect-ratio="16 / 9" />
</template>

iframe and URL

The same settings go in as query parameters with the same names and values (?attr=val, spaces as %20).

<iframe
  src="https://embed.mckp.live/embed.html?uid=SCENE-UUID&trigger=click&zoom-amount=60"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

Direct link: https://embed.mckp.live/embed.html?uid=SCENE-UUID&trigger=scroll&trigger-range=0%20100

Player

Attribute	Values	Default	What it does
`mockup-id (or uid)`	scene UUID	—	Which scene to load. Required.
`aspect-ratio`	e.g. 16 / 9	—	Responsive sizing by aspect ratio.
`width / height`	600, 600px, 100%	—	Fixed size; a bare number is pixels.
`theme`	light \| dark	light	Loader and UI theme.
`loader`	true \| false	false	Loading overlay with a progress bar.
`progressive`	true \| false	true	Load a light model first, then upgrade textures; false loads full quality directly.
`low-bandwidth`	true \| false	false	On a slow connection, show the static preview image instead of the 3D scene.

Trigger

“scene” means the value saved in the scene is used.

Attribute	Values	Default	What it does
`trigger`	load \| click \| hover \| scroll \| inview \| mousemove	scene	What starts the animation.
`trigger-delay`	ms	scene	load: delay before it starts.
`trigger-loop`	true \| false	scene	load, inview: loop the animation.
`trigger-target`	object \| scene	scene	click, hover: react to the device or to the whole scene.
`trigger-restart`	true \| false	scene	click, hover: restart on repeat; load: a click starts it over.
`trigger-range`	start end (0–100)	scene	scroll, mousemove: the range the animation maps to.
`trigger-affect-page`	true \| false	scene	scroll: follow the whole page scroll.
`trigger-axis`	vertical \| horizontal	scene	mousemove: which mouse axis drives it.
`trigger-threshold`	0–1	0.5	inview: how much of the player must be visible.

Live effects and camera

Setting any shake or zoom parameter turns that effect on, unless you pass shake-enabled="false" or zoom-enabled="false".

Attribute	Values	Default	What it does
`cursor-enabled`	true \| false	on	Parallax that follows the cursor.
`cursor-affect-page`	true \| false	true	Follow the cursor across the whole page.
`cursor-range`	edges 0–100	50 50 50 50	Parallax strength per edge.
`click-enabled`	true \| false	on	Reaction to a click.
`click-range`	edges 0–100	50 50 50 50	Click reaction strength per edge.
`shake-enabled`	true \| false	off	Shake effect.
`shake-intensity / shake-z / shake-angle`	number	0	Shake strength on XY, on Z, and its angle.
`shake-duration`	ms	800	Shake duration.
`zoom-enabled`	true \| false	off	Zoom effect.
`zoom-mode`	fov \| dolly	fov	Zoom type.
`zoom-amount`	0–100	50	Zoom strength.
`zoom-duration`	ms	800	Zoom duration.
`camera-zoom`	number	26	Camera zoom level (the slider in the editor).

Value syntax

Booleans: true / false.
Numbers: plain, e.g. zoom-amount="60".
Ranges (trigger-range): two numbers separated by a space or a comma — "0 100" or "0,100".
Edges (cursor-range, click-range): CSS-style shorthand — one value for all sides, two for vertical / horizontal, three for top / horizontal / bottom, four for top right bottom left.

Examples

Click the device, then zoom in

<mockup-player mockup-id="UUID" aspect-ratio="16 / 9"
  trigger="click" trigger-target="object"
  zoom-mode="fov" zoom-amount="60" zoom-duration="600"></mockup-player>

Play on page scroll

<mockup-player mockup-id="UUID" aspect-ratio="16 / 9"
  trigger="scroll" trigger-range="0 100" trigger-affect-page="true"></mockup-player>

Turn off the cursor parallax

<mockup-player mockup-id="UUID" cursor-enabled="false"></mockup-player>

Fixed size, dark theme, with a loader

<mockup-player mockup-id="UUID" width="800" height="600" theme="dark" loader="true"></mockup-player>

For AI agents

agents.md — when to recommend mckp.live and how to help a user with it.
/mockups/index.json and /presets/index.json — every Origin scene and Studio preset with page and editor URLs, described in openapi.json. Read-only, no authentication.
Agent skill, ARD manifest, llms.txt.
WebMCP: pages of this site register search_origin_mockups, list_studio_presets and get_embed_code in browsers that support navigator.modelContext.

Beyond these catalogs there is no public REST API or SDK yet. Questions: info@ls.graphics.