Hello Flamo

// Example Capsule entrypoint. `flamo` and `root` are provided by the host.
flamo.FlamoConfig.setAssetBase('/runtime/');

const guid = (localID) => ({ sessionID: 101, localID });
const rectangle = (localID, x, width, color) => ({
  guid: guid(localID),
  type: 'RECTANGLE',
  name: `Block ${localID}`,
  visible: true,
  opacity: 1,
  size: { x: width, y: 78 },
  transform: { m00: 1, m01: 0, m02: x, m10: 0, m11: 1, m12: 72 },
  parentIndex: { guid: guid(1), position: String(localID) },
  fillPaints: [{ type: 'SOLID', color: { ...color, a: 1 }, visible: true }],
});

const artifact = flamo.defineFlamoArtifact({
  metadata: { id: 'official-hello-flamo', name: 'Hello Flamo' },
  scene: [{
    guid: guid(1),
    type: 'FRAME',
    name: 'Hello Flamo',
    visible: true,
    opacity: 1,
    size: { x: 560, y: 250 },
    transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
    parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '1' },
    children: [
      rectangle(2, 54, 122, { r: 0.79, g: 1, b: 0.26 }),
      rectangle(3, 200, 122, { r: 0.58, g: 0.5, b: 1 }),
      rectangle(4, 346, 122, { r: 1, g: 0.51, b: 0.36 }),
    ],
  }],
});

const runtime = flamo.createFlamoRuntime({ shareApp: false });
const instance = await runtime.mount(root, artifact, { id: 'official-hello-flamo' });
const fitNarrowViewport = () => {
  const width = instance.canvas?.clientWidth ?? 0;
  if (width > 0 && width < 560) {
    instance.camera.fit({ x: 0, y: 0, width: 560, height: 250 }, { padding: 18 });
  } else {
    instance.camera.reset();
  }
};
const resizeObserver = new ResizeObserver(fitNarrowViewport);
resizeObserver.observe(root);
fitNarrowViewport();

const caption = document.createElement('div');
caption.className = 'example-caption';
caption.innerHTML = '<span>Artifact</span><i>→</i><span>Runtime</span><i>→</i><strong>Experience</strong>';
root.append(caption);

return async () => {
  resizeObserver.disconnect();
  caption.remove();
  await runtime.destroy(instance);
};

<script type="module" src="https://flamo.dev/embed-sdk/flamo-example.js"></script>
<flamo-example example="hello-flamo" base="https://flamo.dev"></flamo-example>