spine-html 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 firejune (Joon Kyoung)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,19 @@
+# Third-party notices
+
+## Spine Runtimes
+
+This project depends on `@esotericsoftware/spine-core`, part of the
+[Spine Runtimes](https://github.com/EsotericSoftware/spine-runtimes),
+Copyright (c) 2013-2025 Esoteric Software LLC, licensed under the
+[Spine Runtimes License Agreement](https://esotericsoftware.com/spine-runtimes-license).
+
+Key obligation that propagates to users of this project: integration of the Spine
+Runtimes into software (including via this renderer) is permitted **provided that each
+user of the resulting product obtains their own Spine Editor license**, and any
+redistribution includes the Spine Runtimes license and copyright notice.
+
+## Example assets
+
+The spineboy skeleton, atlas, and images used by the demo are owned by Esoteric
+Software. They are **not redistributed** in this repository; `scripts/fetch-assets.sh`
+downloads them from the official spine-runtimes repository for local evaluation.

package/README.md

@@ -0,0 +1,124 @@
+# spine-html
+
+Render [Spine](https://esotericsoftware.com/) skeletal animations as **plain DOM** — one
+absolutely-positioned `<img>` per slot, posed with a single CSS `matrix()` write per frame.
+No canvas, no WebGL for the rigid tier.
+
+## Why
+
+Every Spine web runtime rasterizes into a canvas. But `spine-core` is fully
+renderer-independent: it computes bone world transforms — and even deformed mesh
+vertices — on the CPU. For **region attachments** (the rigid parts of a skeleton), a bone
+transform is a plain affine map, and CSS `transform: matrix()` expresses that *exactly*.
+So the rigid tier of a Spine skeleton can live in the DOM, composited by the browser,
+inspectable in devtools, styled with CSS.
+
+The idea has been floated on the official forum three times since 2014 and was never
+built — the blockers named were meshes, clipping, and DOM update overhead. This project
+is the experiment: how far does the DOM actually go, and how cheap is it?
+
+Measured so far (PoC, Chromium on Apple silicon):
+
+- Rigid only (spineboy-ess): 10 skeletons / 180 slot images at **~0.03 ms skeleton math
+  + ~0.22 ms DOM writes per frame** — about 1.5% of a 60 fps frame budget.
+- With meshes (spineboy-pro): 1 skeleton = **~0.05 ms + ~0.5 ms render** (8 mesh
+  canvases, 323 triangles); 10 running skeletons = **~4.4 ms/frame** total.
+
+## Status
+
+**Proof of concept.**
+
+- ✅ Region attachments (rigid parts): exact affine mapping, draw-order via `z-index`,
+  attachment swaps, alpha
+- ✅ Atlas unpacking at load time (90°-packed regions restored), so the rigid per-frame
+  path never touches a canvas
+- ✅ Mesh attachments (deform tier): small per-part canvases sized to the mesh's world
+  bounds, interleaved with the rigid `<img>` slots in one stacking context — the DOM
+  handles the bones, a rasterizer handles the warps
+- ✅ Blend modes via `mix-blend-mode` (additive = `plus-lighter`)
+- ✅ Crack-free mesh seams on clip-antialiasing browsers (Safari): each triangle's
+  clip polygon is expanded 0.5px from its centroid so neighbours overlap — the
+  texture is continuous across shared edges, so the overlap is invisible
+  (`?expand=0` shows the cracks for comparison)
+- ⬜ Clipping — deliberately unsupported (counted and skipped); layered transparent
+  parts + `overflow: hidden` cover the practical cases
+- ⬜ RGB tinting (alpha works); DPR-aware mesh canvas backing store
+- ⬜ WebKit mesh-canvas cost: Safari rasterizes the per-triangle path noticeably
+  slower than Chromium (measured ~7.6ms vs ~0.5ms per frame headless) — dirty-check
+  skipping and/or an optional WebGL blit backend are the candidates
+
+## Install
+
+```bash
+npm i spine-html @esotericsoftware/spine-core
+```
+
+```ts
+import { TextureAtlas, AtlasAttachmentLoader, SkeletonJson, Skeleton,
+  AnimationState, AnimationStateData, Physics } from '@esotericsoftware/spine-core';
+import { SpineHtmlRenderer, DomTexture, unpackRegions } from 'spine-html';
+
+// Load: parse the atlas, attach page images, unpack per-region bitmaps once.
+const atlas = new TextureAtlas(atlasText);
+const pageImages = new Map<string, HTMLImageElement>();
+for (const page of atlas.pages) {
+  const image = await loadImage(page.name); // your loader
+  page.setTexture(new DomTexture(image));
+  pageImages.set(page.name, image);
+}
+const regionImages = await unpackRegions(atlas, pageImages);
+const data = new SkeletonJson(new AtlasAttachmentLoader(atlas)).readSkeletonData(jsonText);
+
+// A positioned element becomes the skeleton origin (Spine is Y-up: the
+// skeleton grows upward from it).
+const skeleton = new Skeleton(data);
+const state = new AnimationState(new AnimationStateData(data));
+state.setAnimation(0, 'walk', true);
+const renderer = new SpineHtmlRenderer(rootElement, regionImages);
+
+function frame(delta: number) {
+  state.update(delta);
+  state.apply(skeleton);
+  skeleton.update(delta);
+  skeleton.updateWorldTransform(Physics.update);
+  renderer.render(skeleton);
+}
+```
+
+`spine-html` is a third-party renderer and is not affiliated with or endorsed by
+Esoteric Software.
+
+## Demo (this repository)
+
+```bash
+bun install
+bun run dev
+```
+
+The official spineboy example assets are downloaded automatically on first `dev`/`build`
+(they are owned by Esoteric Software and not redistributed in this repository — see
+[NOTICE.md](NOTICE.md)); `bun run fetch-assets` runs the same idempotent step manually.
+
+## How it works
+
+1. `@esotericsoftware/spine-core` loads the skeleton and drives `AnimationState`,
+   constraints, and physics — all CPU-side, renderer-agnostic.
+2. At load time each atlas region is cut into its own bitmap (rotation restored), one
+   blob URL per region.
+3. Per frame, for each slot in draw order: `computeWorldVertices` yields the region's
+   four corners in world space (order **BL, UL, UR, BR** — note the comments inside
+   `computeWorldVertices` are stale). Flip Y (Spine is Y-up), derive the affine from
+   three corners, write one `matrix()` string. That's the whole render path.
+
+## License
+
+The code in this repository is MIT licensed.
+
+It depends on the [Spine Runtimes](https://github.com/EsotericSoftware/spine-runtimes)
+(`@esotericsoftware/spine-core`), which are licensed under the
+[Spine Runtimes License](https://esotericsoftware.com/spine-runtimes-license):
+**integrating the Spine Runtimes — including through this project — requires each user
+to have their own valid Spine Editor license.** See [NOTICE.md](NOTICE.md).
+
+Example assets (spineboy) are owned by Esoteric Software and are fetched from the
+official repository at setup time, not redistributed here.

package/dist/DomTexture.d.ts

@@ -0,0 +1,29 @@
+import { Texture, TextureAtlas, type TextureFilter, type TextureWrap } from '@esotericsoftware/spine-core';
+/**
+ * Minimal Texture implementation for the DOM renderer. spine-core only needs
+ * it as a handle attached to atlas pages; filtering/wrapping are GPU concepts
+ * with no DOM equivalent, so they are no-ops.
+ */
+export declare class DomTexture extends Texture {
+    setFilters(_minFilter: TextureFilter, _magFilter: TextureFilter): void;
+    setWraps(_uWrap: TextureWrap, _vWrap: TextureWrap): void;
+    dispose(): void;
+}
+export interface RegionImage {
+    /** Blob URL of the unpacked (rotation-restored) region pixels. */
+    url: string;
+    /** Unpacked width in atlas pixels. */
+    width: number;
+    /** Unpacked height in atlas pixels. */
+    height: number;
+}
+/**
+ * Cuts every atlas region out of the page image into its own bitmap once at
+ * load time, restoring 90° packing rotation, so the per-frame path never
+ * touches a canvas. Returns blob URLs keyed by region name.
+ *
+ * This is a loading-pipeline step, not a rendering step: after this runs,
+ * rendering is pure DOM (one <img> per slot, one CSS matrix write per frame).
+ */
+export declare function unpackRegions(atlas: TextureAtlas, pageImages: Map<string, HTMLImageElement>): Promise<Map<string, RegionImage>>;
+//# sourceMappingURL=DomTexture.d.ts.map

package/dist/DomTexture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomTexture.d.ts","sourceRoot":"","sources":["../src/DomTexture.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,YAAY,EAEZ,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,OAAO;IACrC,UAAU,CAAC,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,GAAG,IAAI;IACtE,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI;IACxD,OAAO,IAAI,IAAI;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAsB,aAAa,CACjC,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,GACxC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAiCnC"}

package/dist/DomTexture.js

@@ -0,0 +1,52 @@
+import { Texture, } from '@esotericsoftware/spine-core';
+/**
+ * Minimal Texture implementation for the DOM renderer. spine-core only needs
+ * it as a handle attached to atlas pages; filtering/wrapping are GPU concepts
+ * with no DOM equivalent, so they are no-ops.
+ */
+export class DomTexture extends Texture {
+    setFilters(_minFilter, _magFilter) { }
+    setWraps(_uWrap, _vWrap) { }
+    dispose() { }
+}
+/**
+ * Cuts every atlas region out of the page image into its own bitmap once at
+ * load time, restoring 90° packing rotation, so the per-frame path never
+ * touches a canvas. Returns blob URLs keyed by region name.
+ *
+ * This is a loading-pipeline step, not a rendering step: after this runs,
+ * rendering is pure DOM (one <img> per slot, one CSS matrix write per frame).
+ */
+export async function unpackRegions(atlas, pageImages) {
+    const result = new Map();
+    for (const region of atlas.regions) {
+        const atlasRegion = region;
+        const image = pageImages.get(atlasRegion.page.name);
+        if (!image)
+            throw new Error(`Missing page image: ${atlasRegion.page.name}`);
+        const w = region.width;
+        const h = region.height;
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('2d context unavailable');
+        if (region.degrees === 90) {
+            // The region is packed rotated: it occupies an h×w rect in the page.
+            // Rotate it back so the bitmap is in artwork orientation.
+            ctx.translate(0, h);
+            ctx.rotate(-Math.PI / 2);
+            ctx.drawImage(image, atlasRegion.x, atlasRegion.y, h, w, 0, 0, h, w);
+        }
+        else {
+            ctx.drawImage(image, atlasRegion.x, atlasRegion.y, w, h, 0, 0, w, h);
+        }
+        const blob = await new Promise((resolve, reject) => {
+            canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob failed'))), 'image/png');
+        });
+        result.set(atlasRegion.name, { url: URL.createObjectURL(blob), width: w, height: h });
+    }
+    return result;
+}
+//# sourceMappingURL=DomTexture.js.map

package/dist/DomTexture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomTexture.js","sourceRoot":"","sources":["../src/DomTexture.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,GAKR,MAAM,8BAA8B,CAAC;AAEtC;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAO;IACrC,UAAU,CAAC,UAAyB,EAAE,UAAyB,IAAS,CAAC;IACzE,QAAQ,CAAC,MAAmB,EAAE,MAAmB,IAAS,CAAC;IAC3D,OAAO,KAAU,CAAC;CACnB;AAWD;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,KAAmB,EACnB,UAAyC;IAEzC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAuB,CAAC;IAE9C,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QACnC,MAAM,WAAW,GAAG,MAA4B,CAAC;QACjD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,IAAI,CAAC,KAAK;YAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAE5E,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;QACvB,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;QACjB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAClB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,GAAG;YAAE,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAEpD,IAAI,MAAM,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;YAC1B,qEAAqE;YACrE,0DAA0D;YAC1D,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACpB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YACzB,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACvD,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;QAC3F,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IACxF,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/SpineHtmlRenderer.d.ts

@@ -0,0 +1,67 @@
+import { type Skeleton } from '@esotericsoftware/spine-core';
+import type { RegionImage } from './DomTexture';
+/**
+ * Renders a spine-core Skeleton as DOM, split by slot type:
+ *
+ * - Region attachments (rigid parts) become one absolutely-positioned <img>
+ *   posed with a single CSS matrix() write per frame — exact, since bone
+ *   transforms are affine.
+ * - Mesh attachments (deform parts) each get a small per-part <canvas> sized
+ *   to the mesh's world bounding box, redrawn per frame with the standard
+ *   per-triangle clip+transform+drawImage mapping.
+ *
+ * Both element kinds share one stacking context, so draw order interleaves
+ * freely via z-index (rear hair canvas < torso img < front hair canvas).
+ * Clipping attachments are deliberately unsupported (transparent layered
+ * parts make them unnecessary); they are counted in clipSkipCount.
+ *
+ * Coordinate mapping: Spine is Y-up, CSS is Y-down — world Y is negated.
+ * spine-core computes everything (bones, constraints, physics, deformed
+ * vertices) on the CPU; this class only draws.
+ */
+export declare class SpineHtmlRenderer {
+    private readonly root;
+    private readonly regionImages;
+    /** Clipping attachments encountered (visible but unsupported). */
+    clipSkipCount: number;
+    /** Mesh canvases drawn last frame. */
+    meshCount: number;
+    /** Triangles rasterized last frame. */
+    triangleCount: number;
+    /**
+     * How far (px) each triangle's clip polygon is expanded from its centroid.
+     * Closes antialiased-clip cracks between adjacent triangles (Safari);
+     * set to 0 to see them.
+     */
+    triangleExpand: number;
+    private readonly views;
+    private meshVertices;
+    /**
+     * @param root Positioned element (e.g. position:absolute) that becomes the
+     *   skeleton origin. The renderer only appends slot elements to it — layout
+     *   and scaling of the root belong to the caller.
+     * @param regionImages Unpacked per-region bitmaps (for the rigid tier).
+     */
+    constructor(root: HTMLElement, regionImages: Map<string, RegionImage>);
+    render(skeleton: Skeleton): void;
+    dispose(): void;
+    private renderRegion;
+    private renderMesh;
+    /**
+     * Standard canvas triangle texture mapping (same math as the official
+     * spine-canvas renderer): derive the affine that sends the triangle's
+     * texture-space corners to its screen-space corners, clip, draw the page.
+     *
+     * The clip polygon is expanded outward from the centroid by a fraction of
+     * a pixel. Browsers that antialias clip paths (Safari) otherwise leave
+     * hairline cracks between adjacent triangles; the expanded clips overlap
+     * into the neighbouring triangle, and since the texture is continuous
+     * across the shared edge the overlap draws the same pixels — cracks close
+     * with no visible cost. The texture-mapping affine itself stays exact.
+     */
+    private drawTriangle;
+    private applyCommon;
+    private view;
+    private hide;
+}
+//# sourceMappingURL=SpineHtmlRenderer.d.ts.map

package/dist/SpineHtmlRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpineHtmlRenderer.d.ts","sourceRoot":"","sources":["../src/SpineHtmlRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAId,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAqChD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,iBAAiB;IAwB1B,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAxB/B,kEAAkE;IAClE,aAAa,SAAK;IAClB,sCAAsC;IACtC,SAAS,SAAK;IACd,uCAAuC;IACvC,aAAa,SAAK;IAClB;;;;OAIG;IACH,cAAc,SAAO;IAErB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,OAAO,CAAC,YAAY,CAAyB;IAE7C;;;;;OAKG;gBAEgB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC;IAGzD,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IA2BhC,OAAO,IAAI,IAAI;IAOf,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,UAAU;IAiFlB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,YAAY;IAwCpB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,IAAI;IAiCZ,OAAO,CAAC,IAAI;CAOb"}

package/dist/SpineHtmlRenderer.js

@@ -0,0 +1,306 @@
+import { BlendMode, ClippingAttachment, MeshAttachment, RegionAttachment, } from '@esotericsoftware/spine-core';
+const regionVertices = new Float32Array(8);
+/** Push a point away from (cx, cy) by `amount` pixels. */
+function expandPoint(x, y, cx, cy, amount) {
+    const dx = x - cx;
+    const dy = y - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len < 1e-6)
+        return [x, y];
+    const s = amount / len;
+    return [x + dx * s, y + dy * s];
+}
+const BLEND_CSS = {
+    [BlendMode.Normal]: '',
+    [BlendMode.Additive]: 'plus-lighter',
+    [BlendMode.Multiply]: 'multiply',
+    [BlendMode.Screen]: 'screen',
+};
+/**
+ * Renders a spine-core Skeleton as DOM, split by slot type:
+ *
+ * - Region attachments (rigid parts) become one absolutely-positioned <img>
+ *   posed with a single CSS matrix() write per frame — exact, since bone
+ *   transforms are affine.
+ * - Mesh attachments (deform parts) each get a small per-part <canvas> sized
+ *   to the mesh's world bounding box, redrawn per frame with the standard
+ *   per-triangle clip+transform+drawImage mapping.
+ *
+ * Both element kinds share one stacking context, so draw order interleaves
+ * freely via z-index (rear hair canvas < torso img < front hair canvas).
+ * Clipping attachments are deliberately unsupported (transparent layered
+ * parts make them unnecessary); they are counted in clipSkipCount.
+ *
+ * Coordinate mapping: Spine is Y-up, CSS is Y-down — world Y is negated.
+ * spine-core computes everything (bones, constraints, physics, deformed
+ * vertices) on the CPU; this class only draws.
+ */
+export class SpineHtmlRenderer {
+    root;
+    regionImages;
+    /** Clipping attachments encountered (visible but unsupported). */
+    clipSkipCount = 0;
+    /** Mesh canvases drawn last frame. */
+    meshCount = 0;
+    /** Triangles rasterized last frame. */
+    triangleCount = 0;
+    /**
+     * How far (px) each triangle's clip polygon is expanded from its centroid.
+     * Closes antialiased-clip cracks between adjacent triangles (Safari);
+     * set to 0 to see them.
+     */
+    triangleExpand = 0.5;
+    views = new Map();
+    meshVertices = new Float32Array(256);
+    /**
+     * @param root Positioned element (e.g. position:absolute) that becomes the
+     *   skeleton origin. The renderer only appends slot elements to it — layout
+     *   and scaling of the root belong to the caller.
+     * @param regionImages Unpacked per-region bitmaps (for the rigid tier).
+     */
+    constructor(root, regionImages) {
+        this.root = root;
+        this.regionImages = regionImages;
+    }
+    render(skeleton) {
+        this.clipSkipCount = 0;
+        this.meshCount = 0;
+        this.triangleCount = 0;
+        const drawOrder = skeleton.drawOrder.appliedPose;
+        const skeletonAlpha = skeleton.color.a;
+        for (let i = 0, n = drawOrder.length; i < n; i++) {
+            const slot = drawOrder[i];
+            const pose = slot.appliedPose;
+            const attachment = pose.attachment;
+            if (!slot.bone.active) {
+                this.hide(slot);
+                continue;
+            }
+            if (attachment instanceof RegionAttachment) {
+                this.renderRegion(slot, pose, attachment, i, skeletonAlpha);
+            }
+            else if (attachment instanceof MeshAttachment) {
+                this.renderMesh(skeleton, slot, pose, attachment, i, skeletonAlpha);
+            }
+            else {
+                if (attachment instanceof ClippingAttachment)
+                    this.clipSkipCount++;
+                this.hide(slot);
+            }
+        }
+    }
+    dispose() {
+        for (const view of this.views.values())
+            view.el.remove();
+        this.views.clear();
+    }
+    // --- rigid tier -----------------------------------------------------------
+    renderRegion(slot, pose, attachment, zIndex, skeletonAlpha) {
+        const sequence = attachment.sequence;
+        const region = sequence.regions[sequence.resolveIndex(pose)];
+        const regionImage = region && this.regionImages.get(region.name);
+        if (!regionImage) {
+            this.hide(slot);
+            return;
+        }
+        const view = this.view(slot, 'image');
+        const img = view.el;
+        if (view.regionName !== region.name) {
+            view.regionName = region.name;
+            img.src = regionImage.url;
+            img.width = regionImage.width;
+            img.height = regionImage.height;
+        }
+        attachment.computeWorldVertices(slot, attachment.getOffsets(pose), regionVertices, 0, 2);
+        // Corner order from spine-core is BL, UL, UR, BR — derived from
+        // computeUVs, whose per-vertex UVs are (u,v2), (u,v), (u2,v), (u2,v2).
+        // (The br/bl/ul/ur comments inside computeWorldVertices are stale.)
+        // Flip Y for CSS (Spine is Y-up).
+        const blx = regionVertices[0], bly = -regionVertices[1];
+        const ulx = regionVertices[2], uly = -regionVertices[3];
+        const urx = regionVertices[4], ury = -regionVertices[5];
+        const w = regionImage.width;
+        const h = regionImage.height;
+        const a = (urx - ulx) / w;
+        const b = (ury - uly) / w;
+        const c = (blx - ulx) / h;
+        const d = (bly - uly) / h;
+        img.style.transform = `matrix(${a},${b},${c},${d},${ulx},${uly})`;
+        this.applyCommon(view, slot, zIndex, skeletonAlpha * pose.color.a * attachment.color.a);
+    }
+    // --- deform tier ----------------------------------------------------------
+    renderMesh(skeleton, slot, pose, attachment, zIndex, skeletonAlpha) {
+        const sequence = attachment.sequence;
+        const sequenceIndex = sequence.resolveIndex(pose);
+        const region = sequence.regions[sequenceIndex];
+        const page = region?.texture?.getImage();
+        if (!page) {
+            this.hide(slot);
+            return;
+        }
+        const count = attachment.worldVerticesLength;
+        if (this.meshVertices.length < count)
+            this.meshVertices = new Float32Array(count);
+        const vertices = this.meshVertices;
+        attachment.computeWorldVertices(skeleton, slot, 0, count, vertices, 0, 2);
+        // World bounds (in CSS coords: Y negated).
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (let v = 0; v < count; v += 2) {
+            const x = vertices[v];
+            const y = -vertices[v + 1];
+            vertices[v + 1] = y;
+            if (x < minX)
+                minX = x;
+            if (x > maxX)
+                maxX = x;
+            if (y < minY)
+                minY = y;
+            if (y > maxY)
+                maxY = y;
+        }
+        const pad = 1;
+        minX = Math.floor(minX) - pad;
+        minY = Math.floor(minY) - pad;
+        const w = Math.ceil(maxX) + pad - minX;
+        const h = Math.ceil(maxY) + pad - minY;
+        if (w <= 0 || h <= 0) {
+            this.hide(slot);
+            return;
+        }
+        const view = this.view(slot, 'canvas');
+        const canvas = view.el;
+        // NOTE: 1x backing store for the PoC; the example atlas is 0.5-scale
+        // anyway. DPR-aware backing is a follow-up.
+        if (view.canvasW !== w || view.canvasH !== h) {
+            view.canvasW = w;
+            view.canvasH = h;
+            canvas.width = w;
+            canvas.height = h;
+        }
+        canvas.style.transform = `translate(${minX}px,${minY}px)`;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.clearRect(0, 0, w, h);
+        const uvs = sequence.getUVs(sequenceIndex);
+        const triangles = attachment.triangles;
+        const uw = page.width - 1;
+        const uh = page.height - 1;
+        for (let t = 0; t < triangles.length; t += 3) {
+            const i0 = triangles[t] * 2;
+            const i1 = triangles[t + 1] * 2;
+            const i2 = triangles[t + 2] * 2;
+            this.drawTriangle(ctx, page, vertices[i0] - minX, vertices[i0 + 1] - minY, uvs[i0] * uw, uvs[i0 + 1] * uh, vertices[i1] - minX, vertices[i1 + 1] - minY, uvs[i1] * uw, uvs[i1 + 1] * uh, vertices[i2] - minX, vertices[i2 + 1] - minY, uvs[i2] * uw, uvs[i2 + 1] * uh);
+        }
+        this.meshCount++;
+        this.triangleCount += triangles.length / 3;
+        this.applyCommon(view, slot, zIndex, skeletonAlpha * pose.color.a * attachment.color.a);
+    }
+    /**
+     * Standard canvas triangle texture mapping (same math as the official
+     * spine-canvas renderer): derive the affine that sends the triangle's
+     * texture-space corners to its screen-space corners, clip, draw the page.
+     *
+     * The clip polygon is expanded outward from the centroid by a fraction of
+     * a pixel. Browsers that antialias clip paths (Safari) otherwise leave
+     * hairline cracks between adjacent triangles; the expanded clips overlap
+     * into the neighbouring triangle, and since the texture is continuous
+     * across the shared edge the overlap draws the same pixels — cracks close
+     * with no visible cost. The texture-mapping affine itself stays exact.
+     */
+    drawTriangle(ctx, img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
+        const cx = (x0 + x1 + x2) / 3;
+        const cy = (y0 + y1 + y2) / 3;
+        const expand = this.triangleExpand;
+        ctx.beginPath();
+        ctx.moveTo(...expandPoint(x0, y0, cx, cy, expand));
+        ctx.lineTo(...expandPoint(x1, y1, cx, cy, expand));
+        ctx.lineTo(...expandPoint(x2, y2, cx, cy, expand));
+        ctx.closePath();
+        x1 -= x0;
+        y1 -= y0;
+        x2 -= x0;
+        y2 -= y0;
+        u1 -= u0;
+        v1 -= v0;
+        u2 -= u0;
+        v2 -= v0;
+        let det = u1 * v2 - u2 * v1;
+        if (det === 0)
+            return;
+        det = 1 / det;
+        const a = (v2 * x1 - v1 * x2) * det;
+        const b = (v2 * y1 - v1 * y2) * det;
+        const c = (u1 * x2 - u2 * x1) * det;
+        const d = (u1 * y2 - u2 * y1) * det;
+        const e = x0 - a * u0 - c * v0;
+        const f = y0 - b * u0 - d * v0;
+        ctx.save();
+        ctx.transform(a, b, c, d, e, f);
+        ctx.clip();
+        ctx.drawImage(img, 0, 0);
+        ctx.restore();
+    }
+    // --- shared plumbing -------------------------------------------------------
+    applyCommon(view, slot, zIndex, alpha) {
+        if (view.zIndex !== zIndex) {
+            view.zIndex = zIndex;
+            view.el.style.zIndex = String(zIndex);
+        }
+        // Alpha only; RGB tinting has no cheap DOM equivalent (out of scope).
+        if (view.opacity !== alpha) {
+            view.opacity = alpha;
+            view.el.style.opacity = alpha === 1 ? '' : String(alpha);
+        }
+        const blendMode = slot.data.blendMode;
+        if (view.blendMode !== blendMode) {
+            view.blendMode = blendMode;
+            view.el.style.mixBlendMode = BLEND_CSS[blendMode];
+        }
+        if (!view.visible) {
+            view.visible = true;
+            view.el.style.display = '';
+        }
+    }
+    view(slot, kind) {
+        let view = this.views.get(slot);
+        if (view && view.kind !== kind) {
+            view.el.remove();
+            view = undefined;
+        }
+        if (!view) {
+            const el = kind === 'image' ? document.createElement('img') : document.createElement('canvas');
+            if (el instanceof HTMLImageElement)
+                el.draggable = false;
+            el.style.position = 'absolute';
+            el.style.left = '0';
+            el.style.top = '0';
+            el.style.transformOrigin = '0 0';
+            el.style.pointerEvents = 'none';
+            el.style.userSelect = 'none';
+            el.style.display = 'none';
+            view = {
+                kind,
+                el,
+                regionName: '',
+                visible: false,
+                zIndex: -1,
+                opacity: 1,
+                blendMode: BlendMode.Normal,
+                canvasW: 0,
+                canvasH: 0,
+            };
+            this.views.set(slot, view);
+            this.root.appendChild(el);
+        }
+        return view;
+    }
+    hide(slot) {
+        const view = this.views.get(slot);
+        if (view && view.visible) {
+            view.visible = false;
+            view.el.style.display = 'none';
+        }
+    }
+}
+//# sourceMappingURL=SpineHtmlRenderer.js.map

package/dist/SpineHtmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpineHtmlRenderer.js","sourceRoot":"","sources":["../src/SpineHtmlRenderer.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { SpineHtmlRenderer } from './SpineHtmlRenderer';
+export { DomTexture, unpackRegions, type RegionImage } from './DomTexture';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { SpineHtmlRenderer } from './SpineHtmlRenderer';
+export { DomTexture, unpackRegions } from './DomTexture';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAoB,MAAM,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "spine-html",
+  "version": "0.1.0",
+  "description": "Render Spine skeletal animations as plain DOM — rigid slots as <img> posed by CSS matrix, deform meshes on small per-part canvases, interleaved in one stacking context.",
+  "type": "module",
+  "license": "MIT",
+  "author": "firejune",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firejune/spine-html.git"
+  },
+  "homepage": "https://github.com/firejune/spine-html#readme",
+  "bugs": "https://github.com/firejune/spine-html/issues",
+  "keywords": [
+    "spine",
+    "spine2d",
+    "skeletal-animation",
+    "mesh-deformation",
+    "dom",
+    "css-transform",
+    "renderer",
+    "2d",
+    "animation",
+    "character-animation"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "NOTICE.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "predev": "bash scripts/fetch-assets.sh",
+    "dev": "vite",
+    "prebuild": "bash scripts/fetch-assets.sh",
+    "build": "tsc --noEmit && vite build",
+    "build:lib": "rm -rf dist && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview",
+    "fetch-assets": "bash scripts/fetch-assets.sh"
+  },
+  "peerDependencies": {
+    "@esotericsoftware/spine-core": "^4.3.0"
+  },
+  "devDependencies": {
+    "@esotericsoftware/spine-core": "^4.3.13",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}