// 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 = 'Artifact→Runtime→Experience'; root.append(caption); return async () => { resizeObserver.disconnect(); caption.remove(); await runtime.destroy(instance); };