docs(morph): add interactive cube-to-sphere example

README.md

@@ -21,7 +21,7 @@ npm install @layoutit/polycss-react
 # Vue
 npm install @layoutit/polycss-vue
 
-# Prepared retained models
+# Morph
 npm install @layoutit/polycss-morph
 
 ```
@@ -156,13 +156,12 @@ const html = await exportPolySceneSnapshot(scene.host);
 
 If any referenced asset cannot be inlined, the function throws `PolySceneSnapshotError` with `code: "ASSET_INLINE_FAILED"`.
 
-### Prepared retained models
+### PolyCSS Morph
 
-`@layoutit/polycss-morph` is an imperative, framework-agnostic package for
-models prepared ahead of time and updated through one retained PolyCSS DOM
-graph.
+Use `@layoutit/polycss-morph` for models built ahead of time and updated through
+a stable PolyCSS DOM graph.
 
-Preparation is explicitly Node-only:
+Preparation runs in Node:
 
 ```ts
 import { preparePolyMorphModel } from "@layoutit/polycss-morph/prepare";
@@ -203,13 +202,15 @@ updates do not rebuild topology or redraw prepared image resources.
 Prepared playback uses a two-phase sample: apply `sample.update`, then call
 `runtime.commit(sample)` only after the retained mount accepts the update.
 
-On browsers that pass PolyCSS's solid-triangle support check, Morph uses
-`corner-shape` when available and a CSS border triangle otherwise; Firefox uses
-the larger border-triangle variant. Preparation also emits packed alpha-atlas
-pages for WebKit/Safari. Every polygon receives a slice sized to its local-2D
-bounding rect. Mount creates object URLs from the already-verified package
-bytes, selects the fallback once, and revokes those URLs at teardown; it never
-refetches, generates, or redraws the atlas.
+Morph chooses the triangle paint path once when it mounts. It uses
+`corner-shape` where available, a larger CSS border triangle in Firefox, and
+prepared alpha-atlas pages in WebKit/Safari. Every polygon receives a slice
+sized to its local-2D bounding rect. Mount creates object URLs from the
+already-verified package bytes, selects the fallback once, and revokes those
+URLs at teardown; it never refetches, generates, or redraws the atlas.
+
+See the [PolyCSS Morph guide](https://polycss.com/guides/morph/), including the
+interactive cube-to-sphere example.
 
 ### Polygon Data Model
 
@@ -291,7 +292,7 @@ Each visible polygon is emitted as one leaf element; the renderer chooses the le
 | `@layoutit/polycss` | Vanilla custom elements and imperative `createPolyScene` API. |
 | `@layoutit/polycss-react` | React components, hooks, controls, and core re-exports. |
 | `@layoutit/polycss-vue` | Vue 3 components, composables, controls, and core re-exports. |
-| `@layoutit/polycss-morph` | Prepared retained-model contracts, Node preparation, browser loading, sparse deformation, controls, springs, animation, skinning, and playback. |
+| `@layoutit/polycss-morph` | Prepared-model loading, retained DOM animation, morph targets, skinning, and playback. |
 
 ## Made with PolyCSS
 

packages/morph/README.md

@@ -1,12 +1,12 @@
 # @layoutit/polycss-morph
 
-Prepared retained-model deformation and playback for PolyCSS.
+Prepare, load, and animate retained DOM models with PolyCSS.
 
 ```bash
 npm install @layoutit/polycss-morph
 ```
 
-## Boundary
+## Package entries
 
 Morph has two public entries:
 
@@ -19,9 +19,8 @@ Morph has two public entries:
   packages, mounts one retained PolyCSS graph, and exposes imperative,
   caller-driven runtimes.
 
-The generic Node preparer directly creates `static-prepared` and
-`morph-regions` models. The browser runtime executes all four validated
-profiles:
+The Node preparer creates `static-prepared` and `morph-regions` models. The
+browser runtime supports all four profiles:
 
 | Profile | Runtime contract |
 |---|---|
@@ -71,6 +70,9 @@ const frame = deformation.sample({
 mounted.apply({ leaves: frame.leafUpdates });
 ```
 
+See the [cube-to-sphere example](https://polycss.com/guides/morph/#example-cube-to-sphere)
+for a complete rendered deformation example.
+
 The browser API is intentionally imperative:
 
 - load or validate a model;
@@ -92,17 +94,15 @@ mounted model keeps the same leaf elements for its lifetime. Runtime updates do
 not rebuild topology, add or remove leaves, construct image resources, or
 redraw prepared image resources.
 
-The browser resolves prepared triangles once during mount. On browsers that
-pass PolyCSS's solid-triangle support check, Morph uses `corner-shape` when
-available and a CSS border triangle otherwise; Firefox uses the larger
-border-triangle variant. WebKit/Safari instead uses each leaf's prepared
-polygon-sized atlas slice. Mount creates object URLs from the loader's
-already-verified image bytes and revokes them at teardown; it does not refetch
-package resources. Atlas pages are generated with Node built-ins, so Morph has
-no Sharp or other native image dependency.
+Morph chooses the triangle paint path once when it mounts. It uses
+`corner-shape` where available, a larger CSS border triangle in Firefox, and
+each leaf's prepared polygon-sized atlas slice in WebKit/Safari. Mount creates
+object URLs from the loader's already-verified image bytes and revokes them at
+teardown; it does not refetch package resources. Atlas pages are generated with
+Node built-ins, so Morph has no Sharp or other native image dependency.
 
-## Consumer adapters
+## Application ownership
 
-Product-specific source cadence, schemas, input ordering, presentation, and
-oracle tooling stay in the consuming product. Product adapters own their
-prepared packages, mounting paths, presentation, and oracle evidence.
+Morph owns the prepared model format and sparse DOM updates. Your application
+owns input, timing, presentation, model-specific preparation, and product
+behavior.

website/astro.config.mjs

@@ -35,6 +35,10 @@ export default defineConfig({
           find: /^@layoutit\/polycss-fonts$/,
           replacement: repoPath('../packages/fonts/src/index.ts'),
         },
+        {
+          find: /^@layoutit\/polycss-morph$/,
+          replacement: repoPath('../packages/morph/src/index.ts'),
+        },
         {
           find: /^@layoutit\/polycss$/,
           replacement: repoPath('../packages/polycss/src/index.ts'),
@@ -97,7 +101,7 @@ export default defineConfig({
             { label: 'Performance', slug: 'guides/performance' },
             { label: 'Projections', slug: 'guides/projections' },
             { label: 'Animation', slug: 'guides/animation' },
-            { label: 'Prepared Morph Models', slug: 'guides/morph' },
+            { label: 'Morph', slug: 'guides/morph' },
           ],
         },
         {

website/package.json

@@ -16,6 +16,7 @@
     "@astrojs/starlight": "^0.38.2",
     "@layoutit/polycss": "workspace:^",
     "@layoutit/polycss-fonts": "workspace:^",
+    "@layoutit/polycss-morph": "workspace:^",
     "@layoutit/polycss-react": "workspace:^",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

website/public/morph/morph-targets/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2010-2026 three.js authors
+
+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.