Scene player

Export a scene from Studio and mount it in your own page. The player is an open-source package. The scene is a JSON file.

Studio does not bake a full HTML page. You download the JSON, install the player, and import both.

Export from Studio

1. Open Output → Scene source.
2. Name the scene and download the JSON.
3. The file holds the title, the playback clip pool (absolute URLs), the active clip index, the FX chain, and pruned FX settings.

Clips stream from their public URLs - the player carries no media. Audio-mapped parameters render at their base amount; the player has no analyser.

Install

npm install github:SlopMotion/slopmotion-player

Or clone slopmotion-player and link it locally.

Scaffold a host

The TypeScript installer writes a Vite app that already imports the player and a scene:

npx tsx node_modules/slopmotion-player/src/install.ts --out ./player --scene ./hexa-scene.json
cd player && npm install && npm run dev

--scene is optional - without it the installer copies a demo scene.
--local links a local clone with a file: dependency instead of GitHub.

Import

import { mountPlayer } from "slopmotion-player";
import scene from "./scene.json";

mountPlayer({
  scene,
  container: document.getElementById("hexa-stage")!,
});

API

import { mountPlayer, type StandaloneScene, type MountedPlayer } from "slopmotion-player";

const player: MountedPlayer = mountPlayer({
  scene,          // StandaloneScene
  container,      // HTMLElement, default document.body
  chrome: true,   // transport bar; pass false to hide it
});

player.host.nextClip();
player.host.setPlaying(false);
player.destroy();

Keyboard: while the player is hovered or focused, space play/pause, arrows change clip, F fullscreen.