Skip to content

wity-scene

Headless, isomorphic XML scene-graph for spatial overlays and compositing. Zero dependencies. Pure determinism.

wity-scene

A spatial scene-graph format for rendering layered visual overlays — title cards, film credits, lower thirds, motion graphics — into any rendering target.

For AI coding agents: llms.txt · llms-full.txt · llms-api.txt

Packages

PackagePurposeEnvironment
@wity/scene-coreParse, evaluate, serialize, validate — the full headless engineBrowser + Node.js
@wity/scene-headlessAuthoring state — selection, history, undo, snap, timelineBrowser + Node.js
@wity/scene-playerHeadlessPlayer — drives evaluate() at playback rate via RAFBrowser + Node.js
@wity/scene-to-videoGraphics compiler — ws-rect/ws-text/ws-image → MP4 via node-canvas + FFmpegNode.js / Lambda
@wity/scene-composeFull compositor — ws-video + ws-audio + graphics overlay → final MP4Node.js / Lambda
@wity/scene-to-pdfDocument renderer — scene snapshot → PDF (standard or print-ready)Node.js / Lambda
@wity/scene-to-pptxPresentation renderer — scene snapshots → PowerPoint / Keynote / Google SlidesNode.js / Lambda
@wity/sceneConvenience re-export of scene-coreBrowser + Node.js

Services

Standalone Lambda services that are not published as npm packages.

ServicePurposeEnvironment
witySceneRenderRender gateway — single public entry point for all scene rendering (mp4, pdf, pptx)Node.js / Lambda
wityAudioProfileMeasure windowed RMS loudness over time — per-element and power-mixed, in dBFSNode.js / Lambda

Quick start

js
import { parse, evaluate } from '@wity/scene-core';

const xml = `
<wity-scene version="1.0" width="1920" height="1080" dur="6.0">
  <ws-layer id="overlay" z="10">
    <ws-text x="50%" y="40%" anchor="center"
             font-size="5%" color="#ffffff"
             animate-in="fade-up" animate-dur="0.6">
      Opening Night
    </ws-text>
  </ws-layer>
</wity-scene>`;

const scene = parse(xml);
const frame = evaluate(scene, 1.0); // t = 1 second

for (const el of frame.elements) {
  if (el.visible) {
    console.log(el.tag, el.x, el.y, el.opacity, el.content);
  }
}