@machinal/scenes 0.0.0-stage → 0.1.0

package/dist/runtime/video.d.ts

@@ -0,0 +1,90 @@
+export interface VideoEffects {
+    brightness?: number;
+    contrast?: number;
+    saturation?: number;
+    hue?: number;
+    blur?: number;
+    grayscale?: number;
+    sepia?: number;
+    invert?: number;
+    vignette?: number;
+    scanlines?: number;
+}
+export declare const videoLooks: {
+    original: {};
+    cinematic: {
+        contrast: number;
+        saturation: number;
+        vignette: number;
+    };
+    noir: {
+        grayscale: number;
+        contrast: number;
+        vignette: number;
+    };
+    vintage: {
+        sepia: number;
+        saturation: number;
+        contrast: number;
+        vignette: number;
+    };
+    warm: {
+        sepia: number;
+        saturation: number;
+        brightness: number;
+    };
+    cool: {
+        hue: number;
+        saturation: number;
+        contrast: number;
+    };
+    vivid: {
+        saturation: number;
+        contrast: number;
+    };
+    faded: {
+        contrast: number;
+        brightness: number;
+        saturation: number;
+    };
+    dreamy: {
+        blur: number;
+        brightness: number;
+        saturation: number;
+    };
+    dramatic: {
+        contrast: number;
+        brightness: number;
+        vignette: number;
+    };
+    sepia: {
+        sepia: number;
+        contrast: number;
+    };
+    negative: {
+        invert: number;
+    };
+    night: {
+        brightness: number;
+        saturation: number;
+        hue: number;
+        vignette: number;
+    };
+    retro: {
+        saturation: number;
+        sepia: number;
+        contrast: number;
+        scanlines: number;
+        vignette: number;
+    };
+};
+export type VideoLook = keyof typeof videoLooks;
+export declare function resolveVideoEffects(look?: VideoLook, effects?: VideoEffects): VideoEffects;
+export declare function videoFilter(effects: VideoEffects): string;
+export declare function videoTime(time: number, duration: number, options?: {
+    start?: number;
+    end?: number;
+    offset?: number;
+    playbackRate?: number;
+    loop?: boolean;
+}): number;

package/dist/runtime/video.js

@@ -0,0 +1,46 @@
+import { clamp } from './math.js';
+export const videoLooks = {
+    original: {},
+    cinematic: { contrast: 1.2, saturation: 0.85, vignette: 0.35 },
+    noir: { grayscale: 1, contrast: 1.45, vignette: 0.45 },
+    vintage: { sepia: 0.5, saturation: 0.7, contrast: 0.9, vignette: 0.3 },
+    warm: { sepia: 0.25, saturation: 1.15, brightness: 1.06 },
+    cool: { hue: 20, saturation: 0.8, contrast: 1.1 },
+    vivid: { saturation: 1.65, contrast: 1.15 },
+    faded: { contrast: 0.75, brightness: 1.12, saturation: 0.65 },
+    dreamy: { blur: 2, brightness: 1.12, saturation: 0.85 },
+    dramatic: { contrast: 1.6, brightness: 0.85, vignette: 0.55 },
+    sepia: { sepia: 1, contrast: 1.1 },
+    negative: { invert: 1 },
+    night: { brightness: 0.65, saturation: 0.55, hue: 25, vignette: 0.5 },
+    retro: { saturation: 0.8, sepia: 0.2, contrast: 1.2, scanlines: 0.25, vignette: 0.3 },
+};
+export function resolveVideoEffects(look = 'original', effects = {}) {
+    return { ...videoLooks[look], ...effects };
+}
+function bounded(value, fallback, min, max) {
+    return clamp(value !== undefined && Number.isFinite(value) ? value : fallback, min, max);
+}
+export function videoFilter(effects) {
+    return [
+        `brightness(${bounded(effects.brightness, 1, 0, 4)})`,
+        `contrast(${bounded(effects.contrast, 1, 0, 4)})`,
+        `saturate(${bounded(effects.saturation, 1, 0, 4)})`,
+        `hue-rotate(${bounded(effects.hue, 0, -360, 360)}deg)`,
+        `blur(${bounded(effects.blur, 0, 0, 40)}px)`,
+        `grayscale(${bounded(effects.grayscale, 0, 0, 1)})`,
+        `sepia(${bounded(effects.sepia, 0, 0, 1)})`,
+        `invert(${bounded(effects.invert, 0, 0, 1)})`,
+    ].join(' ');
+}
+export function videoTime(time, duration, options = {}) {
+    const start = bounded(options.start, 0, 0, duration);
+    const end = bounded(options.end, duration, start, duration);
+    const rate = bounded(options.playbackRate, 1, -8, 8);
+    const offset = options.offset !== undefined && Number.isFinite(options.offset) ? options.offset : 0;
+    const elapsed = Math.max(0, time - offset) * rate;
+    const span = end - start;
+    const position = rate < 0 ? span + elapsed : elapsed;
+    const local = options.loop && span > 0 && !(rate < 0 && elapsed === 0) ? ((position % span) + span) % span : clamp(position, 0, span);
+    return clamp(start + local, 0, Math.max(start, end - 0.000001));
+}

package/dist/svelte/SceneCanvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useScene } from './context.js';
+
+  let { children, background = 'transparent' }: { children: Snippet; background?: string } = $props();
+  const scene = useScene();
+</script>
+
+<div style:width="{scene.frame.config.width}px" style:height="{scene.frame.config.height}px" style:background={scene.frame.config.transparent ? 'transparent' : background}>
+  {@render children()}
+</div>
+
+<style>
+  div { position: relative; overflow: hidden; }
+</style>

package/dist/svelte/SceneCanvas.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    background?: string;
+};
+declare const SceneCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type SceneCanvas = ReturnType<typeof SceneCanvas>;
+export default SceneCanvas;

package/dist/svelte/SceneThree.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { untrack } from 'svelte';
+  import { useScene } from './context.js';
+  import type { SceneThreeSetup } from './three.js';
+  import { createThreeSession } from './three-session.js';
+
+  let { setup, width, height, label = '3D scene' }: { setup: SceneThreeSetup; width?: number; height?: number; label?: string } = $props();
+  const scene = useScene();
+  let canvas = $state<HTMLCanvasElement>();
+  const size = $derived({ width: width ?? scene.frame.config.width, height: height ?? scene.frame.config.height });
+  let renderFrame: (() => void) | undefined;
+
+  $effect(() => {
+    if (!canvas) return;
+    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(1);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    const world = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
+    camera.position.z = 5;
+    let renderWidth = 0;
+    let renderHeight = 0;
+    renderFrame = () => {
+      const scale = scene.frame.renderScale ?? 1;
+      if (renderer.getPixelRatio() !== scale) renderer.setPixelRatio(scale);
+      if (renderWidth !== size.width || renderHeight !== size.height) {
+        renderer.setSize(size.width, size.height, false);
+        renderWidth = size.width;
+        renderHeight = size.height;
+      }
+      camera.aspect = size.width / size.height;
+      if (!session.update(scene.frame)) return;
+      camera.updateProjectionMatrix();
+      renderer.render(world, camera);
+      // Capture needs a completed GPU frame; ordinary playback must not block on it.
+      if (scene.frame.capture !== false) renderer.getContext().finish();
+    };
+    const session = createThreeSession(context => untrack(() => setup(context)),
+      { THREE, renderer, world, camera, resources: scene.resources }, () => renderFrame?.(), () => {
+        renderer.dispose();
+        renderer.forceContextLoss();
+      });
+    return () => {
+      renderFrame = undefined;
+      session.dispose();
+    };
+  });
+
+  $effect(() => {
+    scene.frame;
+    size;
+    renderFrame?.();
+  });
+</script>
+
+<canvas bind:this={canvas} aria-label={label} style:width="{size.width}px" style:height="{size.height}px"></canvas>
+
+<style>
+  canvas { display:block; }
+</style>

package/dist/svelte/SceneThree.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SceneThreeSetup } from './three.js';
+type $$ComponentProps = {
+    setup: SceneThreeSetup;
+    width?: number;
+    height?: number;
+    label?: string;
+};
+declare const SceneThree: import("svelte").Component<$$ComponentProps, {}, "">;
+type SceneThree = ReturnType<typeof SceneThree>;
+export default SceneThree;

package/dist/svelte/SceneVideo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { clamp, resolveVideoEffects, videoFilter, videoTime, type VideoEffects, type VideoLook } from '../runtime/index.js';
+  import { useScene } from './context.js';
+
+  let {
+    src, width, height, start = 0, end, offset = 0, playbackRate = 1, loop = false,
+    fit = 'contain', look = 'original', effects = {}, label = 'Scene video',
+  }: {
+    src: string; width?: number; height?: number; start?: number; end?: number; offset?: number;
+    playbackRate?: number; loop?: boolean; fit?: 'contain' | 'cover' | 'fill';
+    look?: VideoLook; effects?: VideoEffects; label?: string;
+  } = $props();
+
+  const scene = useScene();
+  let duration = $state(0);
+  const treatment = $derived(resolveVideoEffects(look, effects));
+  const time = $derived(videoTime(scene.frame.time, duration, { start, end, offset, playbackRate, loop }));
+  const advancing = $derived(scene.frame.time >= offset && (loop || time < Math.min(end ?? duration, duration) - 0.000002));
+</script>
+
+<div class="surface" style:width="{width ?? scene.frame.config.width}px" style:height="{height ?? scene.frame.config.height}px">
+  <!-- Scene media is silent; captions and narration are authored separately. -->
+  <!-- svelte-ignore a11y_media_has_caption -->
+  <video {src} muted playsinline preload="auto" aria-label={label} data-scene-video-time={time}
+    data-scene-video-rate={advancing ? playbackRate : 0}
+    onloadedmetadata={(event) => duration = event.currentTarget.duration}
+    style:object-fit={fit} style:filter={videoFilter(treatment)}></video>
+  {#if treatment.vignette}<div class="vignette" style:opacity={clamp(treatment.vignette)}></div>{/if}
+  {#if treatment.scanlines}<div class="scanlines" style:opacity={clamp(treatment.scanlines)}></div>{/if}
+</div>
+
+<style>
+  .surface { position:relative; overflow:hidden; }
+  video { display:block; width:100%; height:100%; }
+  .vignette, .scanlines { position:absolute; inset:0; pointer-events:none; }
+  .vignette { background:radial-gradient(ellipse at center, transparent 35%, #000 100%); }
+  .scanlines { background:repeating-linear-gradient(to bottom, transparent 0 2px, #000 2px 3px); }
+</style>

package/dist/svelte/SceneVideo.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type VideoEffects, type VideoLook } from '../runtime/index.js';
+type $$ComponentProps = {
+    src: string;
+    width?: number;
+    height?: number;
+    start?: number;
+    end?: number;
+    offset?: number;
+    playbackRate?: number;
+    loop?: boolean;
+    fit?: 'contain' | 'cover' | 'fill';
+    look?: VideoLook;
+    effects?: VideoEffects;
+    label?: string;
+};
+declare const SceneVideo: import("svelte").Component<$$ComponentProps, {}, "">;
+type SceneVideo = ReturnType<typeof SceneVideo>;
+export default SceneVideo;

package/dist/svelte/context.d.ts

@@ -0,0 +1,12 @@
+import type { FrameContext, ResourceScope, SceneObjectRegistry } from '../runtime/index.js';
+export declare const SCENE_CONTEXT: unique symbol;
+export interface SvelteSceneContext {
+    readonly frame: FrameContext;
+    readonly resources: ResourceScope;
+    readonly objects: SceneObjectRegistry;
+    readonly time: FrameContext['time'];
+    readonly progress: FrameContext['progress'];
+    readonly config: FrameContext['config'];
+    readonly random: FrameContext['random'];
+}
+export declare function useScene(): SvelteSceneContext;

package/dist/svelte/context.js

@@ -0,0 +1,8 @@
+import { getContext } from 'svelte';
+export const SCENE_CONTEXT = Symbol('direction.scene');
+export function useScene() {
+    const scene = getContext(SCENE_CONTEXT);
+    if (!scene)
+        throw new Error('useScene() must be used inside a mounted scene');
+    return scene;
+}

package/dist/svelte/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@webgpu/types" />
+export { mountSvelteScene } from './mount.svelte.js';
+export { useScene, type SvelteSceneContext } from './context.js';
+export { default as SceneCanvas } from './SceneCanvas.svelte';
+export { default as SceneThree } from './SceneThree.svelte';
+export { default as SceneVideo } from './SceneVideo.svelte';
+export { type SceneThreeSetup, type SceneThreeContext, type SceneThreeAnimation } from './three.js';
+export { setCameraOrbit, createStudioLighting, type OrbitPose, type StudioLightOptions } from './three-rigs.js';
+export { loadSceneModel, loadSceneTexture } from './model-assets.js';

package/dist/svelte/index.js

@@ -0,0 +1,8 @@
+export { mountSvelteScene } from './mount.svelte.js';
+export { useScene } from './context.js';
+export { default as SceneCanvas } from './SceneCanvas.svelte';
+export { default as SceneThree } from './SceneThree.svelte';
+export { default as SceneVideo } from './SceneVideo.svelte';
+export {} from './three.js';
+export { setCameraOrbit, createStudioLighting } from './three-rigs.js';
+export { loadSceneModel, loadSceneTexture } from './model-assets.js';

package/dist/svelte/model-assets.d.ts

@@ -0,0 +1,4 @@
+import * as THREE from 'three';
+import { type ResourceScope } from '../runtime/index.js';
+export declare function loadSceneModel(source: string, resources: ResourceScope): Promise<THREE.Group>;
+export declare function loadSceneTexture(source: string, resources: ResourceScope): Promise<THREE.Texture>;

package/dist/svelte/model-assets.js

@@ -0,0 +1,42 @@
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { decodeModelData, pngDimensions, validateGLB } from '../runtime/index.js';
+import { disposeThreeWorld } from './three.js';
+export function loadSceneModel(source, resources) {
+    resources.signal.throwIfAborted();
+    const bytes = decodeModelData(source);
+    validateGLB(bytes);
+    const manager = new THREE.LoadingManager();
+    manager.setURLModifier(url => {
+        if (!url.startsWith('blob:'))
+            throw new Error('GLB loader only accepts internally embedded blob resources');
+        return url;
+    });
+    const loader = new GLTFLoader(manager);
+    const loading = loader.parseAsync(bytes.buffer, '').then(result => {
+        if (resources.signal.aborted) {
+            disposeThreeWorld(result.scene);
+            resources.signal.throwIfAborted();
+        }
+        return result.scene;
+    });
+    return resources.track(loading);
+}
+export function loadSceneTexture(source, resources) {
+    resources.signal.throwIfAborted();
+    const prefix = 'data:image/png;base64,';
+    if (typeof source !== 'string' || !source.startsWith(prefix) || source.length > prefix.length + Math.ceil(5 * 1024 * 1024 / 3) * 4)
+        throw new Error('Use an approved embedded PNG texture of at most 5 MiB');
+    const decoded = atob(source.slice(prefix.length));
+    if (decoded.length > 5 * 1024 * 1024)
+        throw new Error('PNG texture exceeds its byte limit');
+    pngDimensions(Uint8Array.from(decoded, character => character.charCodeAt(0)));
+    return resources.track(new THREE.TextureLoader().loadAsync(source).then(texture => {
+        if (resources.signal.aborted) {
+            texture.dispose();
+            resources.signal.throwIfAborted();
+        }
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return texture;
+    }));
+}

package/dist/svelte/mount.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type Component } from 'svelte';
+import { type MountOptions, type SceneController, type SceneProps, type SceneRequest } from '../runtime/index.js';
+export declare function mountSvelteScene<P extends SceneProps>(component: Component<P>, target: HTMLElement, request: SceneRequest, defaults: P, options?: MountOptions): SceneController;

package/dist/svelte/mount.svelte.js

@@ -0,0 +1,42 @@
+import { mount, tick, unmount } from 'svelte';
+import { mountScene, seededRandom } from '../runtime/index.js';
+import { SCENE_CONTEXT } from './context.js';
+export function mountSvelteScene(component, target, request, defaults, options) {
+    return mountScene({
+        id: request.sceneId,
+        defaults,
+        async create({ target: element, props, config, resources, objects }) {
+            const random = (key) => seededRandom(request.seed ?? 'scene-engine', key);
+            let frame = $state({
+                frame: 0,
+                time: 0,
+                progress: 0,
+                config,
+                random,
+                renderScale: options?.renderScale ?? 1,
+                capture: options?.capture ?? true,
+            });
+            const context = {
+                get frame() { return frame; },
+                resources,
+                objects,
+                // Saved AI components also use these fields directly on useScene().
+                get time() { return frame.time; },
+                get progress() { return frame.progress; },
+                config,
+                random,
+            };
+            const instance = mount(component, { target: element, props, context: new Map([[SCENE_CONTEXT, context]]) });
+            await tick();
+            return {
+                async update(next) {
+                    frame = next;
+                    await tick();
+                },
+                async dispose() {
+                    await unmount(instance);
+                },
+            };
+        },
+    }, target, request, options);
+}

package/dist/svelte/three-rigs.d.ts

@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+export interface OrbitPose {
+    target?: readonly [number, number, number];
+    radius: number;
+    azimuth: number;
+    elevation: number;
+}
+/** Assign an absolute camera pose on each frame; angles are radians. */
+export declare function setCameraOrbit(camera: THREE.PerspectiveCamera, { target, radius, azimuth, elevation }: OrbitPose): void;
+export interface StudioLightOptions {
+    intensity?: number;
+    keyColor?: THREE.ColorRepresentation;
+    rimColor?: THREE.ColorRepresentation;
+}
+export declare function createStudioLighting(world: THREE.Scene, { intensity, keyColor, rimColor }?: StudioLightOptions): {
+    ambient: THREE.HemisphereLight;
+    key: THREE.DirectionalLight;
+    fill: THREE.DirectionalLight;
+    rim: THREE.DirectionalLight;
+};

package/dist/svelte/three-rigs.js

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+/** Assign an absolute camera pose on each frame; angles are radians. */
+export function setCameraOrbit(camera, { target = [0, 0, 0], radius, azimuth, elevation }) {
+    if (![...target, radius, azimuth, elevation].every(Number.isFinite) || radius <= 0)
+        throw new Error('Camera orbit needs finite values and a positive radius');
+    const horizontal = radius * Math.cos(elevation);
+    camera.position.set(target[0] + horizontal * Math.sin(azimuth), target[1] + radius * Math.sin(elevation), target[2] + horizontal * Math.cos(azimuth));
+    camera.lookAt(...target);
+}
+export function createStudioLighting(world, { intensity = 1, keyColor = '#fff1db', rimColor = '#91baff' } = {}) {
+    if (!Number.isFinite(intensity) || intensity < 0)
+        throw new Error('Lighting intensity must be finite and nonnegative');
+    const ambient = new THREE.HemisphereLight('#dce9ff', '#25212b', 0.8 * intensity);
+    const key = new THREE.DirectionalLight(keyColor, 3 * intensity);
+    const fill = new THREE.DirectionalLight('#d7e8ff', 1.1 * intensity);
+    const rim = new THREE.DirectionalLight(rimColor, 2 * intensity);
+    key.position.set(4, 5, 6);
+    fill.position.set(-4, 1, 3);
+    rim.position.set(1, 3, -5);
+    world.add(ambient, key, fill, rim);
+    return { ambient, key, fill, rim };
+}

package/dist/svelte/three-session.d.ts

@@ -0,0 +1,6 @@
+import type { FrameContext } from '../runtime/index.js';
+import { type SceneThreeContext, type SceneThreeSetup } from './three.js';
+export declare function createThreeSession(setup: SceneThreeSetup, context: SceneThreeContext, onReady: () => void, releaseRenderer: () => void): {
+    update(frame: FrameContext): boolean;
+    dispose: () => void;
+};

package/dist/svelte/three-session.js

@@ -0,0 +1,66 @@
+import { disposeThreeWorld } from './three.js';
+export function createThreeSession(setup, context, onReady, releaseRenderer) {
+    let state = { phase: 'pending' };
+    let rendererCleanup = releaseRenderer;
+    function clearWorld() {
+        disposeThreeWorld(context.world);
+        context.world.clear();
+        context.world.background = null;
+        context.world.environment = null;
+    }
+    function dispose() {
+        const previous = state;
+        state = { phase: 'disposed' };
+        try {
+            if (previous.phase === 'ready')
+                previous.animation.dispose?.();
+        }
+        finally {
+            clearWorld();
+            const cleanup = rendererCleanup;
+            rendererCleanup = undefined;
+            cleanup?.();
+        }
+    }
+    const pending = Promise.resolve().then(() => {
+        if (state.phase === 'disposed')
+            return;
+        context.resources.signal.throwIfAborted();
+        return setup(context);
+    }).then(value => {
+        if (state.phase === 'disposed') {
+            try {
+                value?.dispose?.();
+            }
+            finally {
+                clearWorld();
+            }
+            return;
+        }
+        if (!value || typeof value.update !== 'function')
+            throw new Error('SceneThree setup must return update(frame)');
+        state = { phase: 'ready', animation: value };
+        onReady();
+    }).catch(error => {
+        // Setup can add resources after an earlier unmount, then reject instead of returning them.
+        dispose();
+        throw error;
+    });
+    void pending.catch(() => undefined);
+    try {
+        context.resources.track(pending);
+    }
+    catch (error) {
+        dispose();
+        throw error;
+    }
+    return {
+        update(frame) {
+            if (state.phase !== 'ready')
+                return false;
+            state.animation.update(frame);
+            return true;
+        },
+        dispose,
+    };
+}

package/dist/svelte/three.d.ts

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+import type { FrameContext, ResourceScope } from '../runtime/index.js';
+export interface SceneThreeContext {
+    THREE: typeof THREE;
+    renderer: THREE.WebGLRenderer;
+    world: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    resources: ResourceScope;
+}
+export interface SceneThreeAnimation {
+    update(frame: FrameContext): void;
+    dispose?(): void;
+}
+export type SceneThreeSetup = (context: SceneThreeContext) => SceneThreeAnimation | Promise<SceneThreeAnimation>;
+export declare function disposeThreeWorld(world: THREE.Object3D): void;

package/dist/svelte/three.js

@@ -0,0 +1,33 @@
+import * as THREE from 'three';
+export function disposeThreeWorld(world) {
+    const geometries = new Set();
+    const materials = new Set();
+    const textures = new Set();
+    const images = new Set();
+    world.traverse(object => {
+        const mesh = object;
+        if (mesh.geometry)
+            geometries.add(mesh.geometry);
+        for (const material of Array.isArray(mesh.material) ? mesh.material : mesh.material ? [mesh.material] : []) {
+            materials.add(material);
+            for (const value of Object.values(material))
+                if (value instanceof THREE.Texture)
+                    textures.add(value);
+        }
+    });
+    if (world instanceof THREE.Scene) {
+        if (world.background instanceof THREE.Texture)
+            textures.add(world.background);
+        if (world.environment instanceof THREE.Texture)
+            textures.add(world.environment);
+    }
+    textures.forEach(texture => {
+        if (typeof ImageBitmap !== 'undefined' && texture.image instanceof ImageBitmap)
+            images.add(texture.image);
+        texture.dispose();
+    });
+    images.forEach(image => image.close());
+    materials.forEach(material => material.dispose());
+    geometries.forEach(geometry => geometry.dispose());
+    world.clear();
+}

package/examples/quickstart/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Machinal scenes quickstart</title>
+  </head>
+  <body>
+    <main>
+      <h1>@machinal/scenes</h1>
+      <div id="scene"></div>
+      <p>
+        <button id="play" type="button" disabled>Play</button>
+        <label>Frame <input id="frame" type="range" min="0" max="179" value="0" disabled /></label>
+        <output id="status" role="status">Preparing scene...</output>
+      </p>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/examples/quickstart/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "machinal-scenes-quickstart",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "setup": "machinal-scenes setup",
+    "doctor": "machinal-scenes doctor",
+    "render": "vite build && machinal-scenes render",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc --noEmit"
+  },
+  "dependencies": {
+    "@machinal/scenes": "^0.1.0",
+    "svelte": "^5.15.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@types/node": "^24.0.0",
+    "svelte-check": "^4.7.6",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.4"
+  }
+}