Export
Embed and export
For a single mood the studio is quicker — you are already looking at the mood there. The integration guide covers everything below in full, including versioning and the update policy.
Embed the bundle
Two files go into the app: the runtime and the spec. The app renders immediately from the embedded copy and picks up a newer spec later — not on every launch.
The reason for the split: app stores allow data to be downloaded but not executable code. A new mood can therefore ship without a store release.
Ship the runtime and spec inside the app and update the spec over the air. This is the shape you want in production.
// 1. Ship these two files inside your app.
// 1.0.0 runtime + spec, no network needed on first launch.
// kluuu-mascot-1.0.0.js (ESM, zero imports)
// kluuu-spec-1.0.0.json (moods + geometry)
import { createMascot, applySpec } from './kluuu-mascot-1.0.0.js'
import embedded from './kluuu-spec-1.0.0.json'
const client = createSpecClient({
baseUrl: 'https://kluuuapi.glade.studio',
embedded,
storage: localStorage, // AsyncStorage / UserDefaults on native
})
// 2. Render immediately from the embedded copy — never block on the network.
const mascot = createMascot(document.querySelector('#slot')!, {
mood: 'idle',
spec: client.current(),
})
// 3. Check for a newer spec occasionally. Not on every launch: the policy is
// once per 24h, jittered per install, skipped on metered connections.
client.checkForUpdate().then((r) => {
if (r.updated) applySpec(mascot, client.current())
})Export many moods
Renders one file per selected mood, at frame zero of its idle animation. Files arrive one after another, not as an archive.
Edge length of the square PNG.