@vosjs/elements

The vos element system — text / image / SVG / video / audio renderers for Three.js overlays, shipped as both a typed ESM factory and an injectable IIFE bundle.

Part of vos, the open visual operating system behind vosso. Renders 2D overlay elements (text, images, SVG, video) as Three.js meshes positioned over a scene, plus non-visual audio elements synced to the master clock. three is an optional peer dependency and is provided at runtime (never bundled).

Install

pnpm add @vosjs/elements three

Two entry points

@vosjs/elements — typed ESM factory

For app/build-time use (e.g. client-side export pipelines):

import * as THREE from 'three'
import { createVosElements } from '@vosjs/elements'

const elements = createVosElements(THREE)
const map = await elements.renderElements(elementsConfig, overlayScenes, resolution)
// ...
elements.disposeElements(map)

@vosjs/elements/bundle — injectable IIFE string

For injecting into a sandboxed render context (the iframe/Worker that runs compiled Vos templates). The string defines a global __vosElementsFactory:

import { generateRenderTemplate } from '@vosjs/core/runtime'
import { elementsBundleCode } from '@vosjs/elements/bundle'

const html = generateRenderTemplate(compiledCode, {
  mode: 'playback',
  elementsBundleCode,
})

License

MIT © vosso