vexy-stax-js

Browser renderer for layered artwork as a deck of 3D glass plates — compact ↔ expanded morph, scroll-driven, exportable. ESM module · Web Component · Global script.

▶

Animated demo

Play the compact ↔ expanded transition, or toggle the two views by hand.

Open demo →
↓

Scrollspy demo

A scroll-driven story — the deck rises into view and unfolds as you scroll.

Open demo →
📖

Documentation

Installation, the Web Component, the ESM API and the shared scene format.

Read the docs →

Use it — three ways

</>

Web Component

<vexy-stax slides="a.png b.png"> — pure markup, no JS. Minimal code beside the live element.

Open demo →
📦

ES Module

createStax(el, { slides }) — one call mounts a ready instance from a URL list.

Open demo →
🌐

Global script

One classic <script> → window.VexyStax.create(...). No bundler.

Open demo →

Install

npm install vexy-stax-js
# …or skip the build step entirely — load it from the jsDelivr CDN:
# <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js"></script>

Web Component — just a list of slides

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js"></script>
<vexy-stax
  slides="layer-0.png layer-1.png https://example.com/layer-2.png"
  view="compact" mode="playable"></vexy-stax>

Web Component — the whole scene inline (no URL)

<vexy-stax view="compact" mode="playable" aspect="3">
  <script type="application/json">
  { "version": 1, "transition": { "kind": "expand_collapse" },
    "slides": [ { "src": "layer-0.png" }, { "src": "layer-1.png" } ] }
  </script>
</vexy-stax>

Drop the full scene JSON right inside the element — and aspect="3" shapes the box to 3:1 (also "3/1", "16:9", …).

ES Module — createStax

import { createStax } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js";

// One call: build a scene from a URL list, mount, wait for ready.
const stax = await createStax("#stage", {
  slides: ["layer-0.png", "https://example.com/layer-1.png"],
  gap: 480, transition: "expand_collapse", mode: "playable",
});
const mp4 = await stax.toVideo(); // seekable mp4

Global script — window.VexyStax

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.global.js"></script>
<script>
  VexyStax.create("#stage", { slides: ["a.png", "b.png", "c.png"] });
</script>