diff --git a/bench/README.md b/bench/README.md
index dfc44e4..1512046 100644
--- a/bench/README.md
+++ b/bench/README.md
@@ -17,11 +17,13 @@ contributors to verify perf claims and catch render regressions.
 pnpm bench:serve            # static server on :4400 with an index page
 pnpm bench:perf             # build bundles + run all 4 renderers × 5 scenarios
 pnpm bench:animated-human   # build bundles + run the animated human run bench
+pnpm bench:nonvoxel-drag-trace  # build bundles + trace a Playwright drag orbit on teapot
 pnpm bench:lossy            # compare lossless / previous lossy / auto lossy counts
 pnpm bench:visual           # screenshot diff against bench/baselines/*.png
 pnpm bench:visual --record  # capture new baselines (after intentional renderer changes)
 pnpm bench:build            # just rebuild the bench bundles (rarely needed alone)
 node bench/nonvoxel-rotation-bench.mjs  # non-voxel vanilla rotation probe
+node bench/nonvoxel-drag-trace.mjs --label teapot-drag  # pointer-drag trace, no auto-rotate
 node bench/nonvoxel-frame-buckets.mjs --no-trace  # non-voxel rAF cadence buckets
 node bench/nonvoxel-visual-compare.mjs  # non-voxel variant visual parity
 ```
@@ -38,6 +40,7 @@ node bench/lossy-optimizer-bench.mjs --json bench/results/lossy-optimizer.json
 node bench/lossy-optimizer-bench.mjs --models ducky,shark,bicycle
 node bench/perf-visual.mjs --mesh chicken --tolerance 0.005
 node bench/nonvoxel-rotation-bench.mjs --models teapot,bicycle --variants baseline,order-tile4 --run-order round-robin
+node bench/nonvoxel-drag-trace.mjs --mesh teapot --degrees 360 --drag-ms 1500 --label teapot-drag --frame-details --no-print-json
 node bench/nonvoxel-frame-buckets.mjs --mesh glb:Elephant.glb --variant baseline --no-trace
 node bench/nonvoxel-visual-compare.mjs --models bicycle,elephant,policecar --variants scene-split-target,scene-transform-perspective
 ```
@@ -141,6 +144,19 @@ tests above what the gallery's OBJs cover.
 Use `domOrder` for pure post-render DOM-order probes; `polygonOrder` changes
 the polygon array before render planning and is only for diagnostics.
 
+`nonvoxel-drag-trace.mjs` is the focused user-input lane for the same page.
+It loads a non-voxel mesh (`teapot` by default), leaves OrbitControls
+auto-rotate off, performs real Playwright mouse drags until the requested
+camera yaw delta is reached, and writes `bench/results/<label>.trace.json`
+plus `bench/results/<label>.json`. A 360 degree run uses clutched drags inside
+the viewport because OrbitControls maps 4 pointer pixels to 1 degree of yaw.
+Pass `--variant <id>` to reuse the non-voxel variant params from the rotation
+bench, or `--trace-out <path>` / `--json <path>` for explicit outputs.
+`--frame-details` aligns page-side frame work with Chrome trace events, adding
+per-frame `rotationFrames` / `slowestFrames` breakdowns; use
+`--frame-details-limit <n>` to keep every rotation frame and `--no-print-json`
+when the full result is too large for terminal output.
+
 `animated-human.html` is the focused animated-model page. It loads
 `/gallery/glb/poly-pizza/animated-human.glb` by default, chooses the run-like
 clip when available, and drives `createPolyAnimationMixer.update(dt)` into
@@ -155,12 +171,11 @@ Playwright runner accepts `--mode baked,dynamic`, `--clip <name|index|run>`,
 `--stable-triangle-color-max-step <channel-delta>`,
 `--animation-driver js|progressive-style-cache|js-style-cache|typed-om-style-cache|css-keyframes`,
 `--compare-stable-triangle-debug`, `--require-solid-triangles`, `--trace`, and
-the same GPU lane flags as the other browser benches. The color freeze option
-keeps exact baked colors but staggers leaf color writes across frames; adaptive
-color policy spends a capped write budget on leaves with the largest accumulated
-color error first. The max-step option caps the per-write RGB channel delta so
-cadence updates drift toward the next baked color instead of jumping directly to
-it. `css-keyframes` is a bench-only prototype that samples the clip into
+the same GPU lane flags as the other browser benches. The default baked color
+path uses 8-channel quantized colors, staggers leaf color writes over a
+12-frame cadence, and caps the per-write RGB channel delta so updates drift
+toward the next baked color instead of jumping directly to it. `css-keyframes`
+is a bench-only prototype that samples the clip into
 per-leaf CSS animations, removing per-frame JS playback from the measurement
 window. The solid-triangle guard fails the run if the page leaves the baked
 `<u>` path. Use `--stable-triangle-color-freeze-frames 0` to keep the initial
@@ -199,6 +214,10 @@ bench/
                          GPU-default Playwright runner for the animated
                          human run sequence. Reports FPS, mixer/update cost,
                          setPolygons cost, render stats, and optional trace.
+  nonvoxel-drag-trace.mjs
+                         Vanilla-only non-voxel pointer-input trace bench.
+                         Uses Playwright mouse drags through OrbitControls
+                         instead of scene auto-rotation.
   lossy-optimizer-bench.mjs
                          Polygon-count strategy bench for lossless,
                          previous pair-only lossy, forced grouped lossy,
diff --git a/bench/animated-human-bench.mjs b/bench/animated-human-bench.mjs
index ce939de..8b39176 100644
--- a/bench/animated-human-bench.mjs
+++ b/bench/animated-human-bench.mjs
@@ -86,7 +86,7 @@ const ANIMATION_FRAME_CACHE_FRAMES = optNum(
   optNum("animationFrameCacheFrames", 60),
 );
 const KEYFRAME_SAMPLES = optNum("keyframe-samples", optNum("keyframeSamples", 24));
-const DEFAULT_STABLE_TRIANGLE_COLOR_STEPS = 0;
+const DEFAULT_STABLE_TRIANGLE_COLOR_STEPS = 8;
 const DEFAULT_STABLE_TRIANGLE_COLOR_POLICY = "cadence";
 const DEFAULT_STABLE_TRIANGLE_COLOR_FREEZE_FRAMES = 12;
 const DEFAULT_STABLE_TRIANGLE_COLOR_BUDGET = 0.16;
@@ -96,7 +96,7 @@ const HAS_STABLE_TRIANGLE_COLOR_STEPS =
   hasOpt("stable-triangle-color-steps") || hasOpt("stableTriangleColorSteps");
 const STABLE_TRIANGLE_COLOR_STEPS = optNum(
   "stable-triangle-color-steps",
-  optNum("stableTriangleColorSteps", 0),
+  optNum("stableTriangleColorSteps", DEFAULT_STABLE_TRIANGLE_COLOR_STEPS),
 );
 const HAS_STABLE_TRIANGLE_COLOR_POLICY =
   hasOpt("stable-triangle-color-policy") || hasOpt("stableTriangleColorPolicy");
@@ -610,6 +610,9 @@ async function runScenario(port, scenario) {
       animation_update: summarizeDurations(pageResult.animationSamples, "updateMs"),
       set_polygons: summarizeDurations(pageResult.animationSamples, "setPolygonsMs"),
       sample_and_mixer: summarizeDurations(pageResult.animationSamples, "nonSetPolygonsMs"),
+      triangleFrameApplied: pageResult.animationSamples.filter((sample) =>
+        sample?.triangleFrameApplied === true
+      ).length,
       animation_sample_count: pageResult.animationSamples.length,
       polyCount: pageResult.polyCount,
       renderStats: pageResult.renderStats,
@@ -697,6 +700,7 @@ try {
       `p95=${result.fps_p95.toFixed(1).padStart(5)}fps ` +
       `update p50=${result.animation_update.p50_ms.toFixed(2)}ms ` +
       `setPolys p50=${result.set_polygons.p50_ms.toFixed(2)}ms ` +
+      `typed=${result.triangleFrameApplied}/${result.animation_sample_count} ` +
       `clip=${result.animation?.clip?.name ?? "?"}${tagNote}${traceNote}${profileNote}\n`,
     );
   }
diff --git a/bench/animated-human.html b/bench/animated-human.html
index 81671a6..aaf3901 100644
--- a/bench/animated-human.html
+++ b/bench/animated-human.html
@@ -88,7 +88,7 @@
         : "";
     const stableTriangleColorSteps = params.has("stableTriangleColorSteps")
       ? numberParam("stableTriangleColorSteps", 0)
-      : 0;
+      : 8;
     const stableTriangleColorPolicyRaw = params.get("stableTriangleColorPolicy");
     const stableTriangleColorPolicy =
       stableTriangleColorPolicyRaw === "adaptive" ? "adaptive" : "cadence";
@@ -400,6 +400,7 @@
 
       let lastSetPolygonsMs = 0;
       let lastAnimatedPolygons = initialPolygons.length;
+      let lastTriangleFrameApplied = false;
       const keyframeInfo = animationDriver === "css-keyframes"
         ? await installCssKeyframeAnimation(mesh, renderParsed.animation, clip)
         : null;
@@ -583,13 +584,31 @@
         return;
       }
 
+      const triangleFrameTargetSymbol = Symbol.for("polycss.animation.triangleFrameTarget");
+      const meshTriangleFrameTarget = mesh[triangleFrameTargetSymbol];
       const animationTarget = {
         setPolygons(polygons) {
+          lastTriangleFrameApplied = false;
           const start = performance.now();
           mesh.setPolygons(polygons, animationSetPolygonsOptions());
           lastSetPolygonsMs = performance.now() - start;
           lastAnimatedPolygons = polygons.length;
         },
+        [triangleFrameTargetSymbol](frame) {
+          if (typeof meshTriangleFrameTarget !== "function") return false;
+          const start = performance.now();
+          const applied = meshTriangleFrameTarget.call(
+            mesh,
+            frame,
+            animationSetPolygonsOptions(),
+          );
+          if (applied) {
+            lastTriangleFrameApplied = true;
+            lastSetPolygonsMs = performance.now() - start;
+            lastAnimatedPolygons = frame.polygonCount;
+          }
+          return applied;
+        },
       };
       const mixer = createPolyAnimationMixer(animationTarget, renderParsed.animation);
       const action = mixer.clipAction(clip.name);
@@ -627,6 +646,7 @@
           setPolygonsMs: lastSetPolygonsMs,
           nonSetPolygonsMs: Math.max(0, updateMs - lastSetPolygonsMs),
           polygons: lastAnimatedPolygons,
+          triangleFrameApplied: lastTriangleFrameApplied,
         });
         if (window.__perf__.animationSamples.length > 1800) {
           window.__perf__.animationSamples.splice(
diff --git a/bench/nonvoxel-drag-trace.mjs b/bench/nonvoxel-drag-trace.mjs
new file mode 100644
index 0000000..82e8766
--- /dev/null
+++ b/bench/nonvoxel-drag-trace.mjs
@@ -0,0 +1,803 @@
+#!/usr/bin/env node
+/**
+ * Non-voxel drag trace bench.
+ *
+ * Loads the vanilla non-voxel bench page, drives PolyOrbitControls with real
+ * Playwright mouse input, rotates the camera by the requested number of degrees,
+ * and writes both a Chrome trace file and a compact JSON summary.
+ *
+ * Usage:
+ *   node bench/nonvoxel-drag-trace.mjs
+ *   node bench/nonvoxel-drag-trace.mjs --mesh teapot --mode baked --label teapot-drag
+ *   node bench/nonvoxel-drag-trace.mjs --degrees 360 --drag-ms 1500 --steps 120
+ *   node bench/nonvoxel-drag-trace.mjs --variant force-atlas --trace-out bench/results/teapot.trace.json
+ *   node bench/nonvoxel-drag-trace.mjs --frame-details --no-print-json
+ */
+import { createServer } from "node:http";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { dirname, extname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+import { chromiumArgsWithGpuDefault } from "./chromium-defaults.mjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(__dirname, "..");
+const benchDir = resolve(repoRoot, "bench");
+const galleryDir = resolve(repoRoot, "website/public/gallery");
+
+const argv = process.argv.slice(2);
+const flag = (name) => argv.indexOf(`--${name}`);
+const optStr = (name, dflt = "") => {
+  const i = flag(name);
+  if (i >= 0) return argv[i + 1] ?? dflt;
+  const prefixed = argv.find((arg) => arg.startsWith(`--${name}=`));
+  return prefixed ? prefixed.slice(name.length + 3) : dflt;
+};
+const optNum = (name, dflt) => {
+  const raw = optStr(name);
+  if (raw.trim() === "") return dflt;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : dflt;
+};
+const optAll = (name) => {
+  const values = [];
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === `--${name}` && argv[i + 1]) {
+      values.push(argv[i + 1]);
+      i += 1;
+    } else if (arg.startsWith(`--${name}=`)) {
+      values.push(arg.slice(name.length + 3));
+    }
+  }
+  return values;
+};
+const hasFlag = (name) => flag(name) >= 0 || argv.includes(`--${name}=true`);
+
+const PIXELS_PER_DEGREE = 4;
+const MESH = optStr("mesh", "teapot");
+const MODE = optStr("mode", "baked");
+const VARIANT = optStr("variant", "baseline");
+const DEGREES = optNum("degrees", 360);
+const WARMUP_MS = optNum("warmup", 1000);
+const DRAG_MS = optNum("drag-ms", 1500);
+const SETTLE_MS = optNum("settle", 250);
+const STEPS = Math.max(1, Math.round(optNum("steps", 120)));
+const VIEWPORT_WIDTH = Math.max(320, Math.round(optNum("viewport-width", 1280)));
+const VIEWPORT_HEIGHT = Math.max(240, Math.round(optNum("viewport-height", 800)));
+const LABEL = optStr("label");
+const JSON_PATH = optStr("json");
+const TRACE_PATH = optStr("trace-out");
+const FRAME_DETAILS = hasFlag("frame-details");
+const FRAME_DETAILS_LIMIT = Math.max(0, Math.round(optNum("frame-details-limit", 24)));
+const PRINT_JSON = !hasFlag("no-print-json");
+const TRACE = !hasFlag("no-trace");
+const HEADED = hasFlag("headed");
+const BROWSER_EXECUTABLE = optStr("browser-executable");
+const SOFTWARE_BACKEND = hasFlag("software-backend");
+const CHROMIUM_ARGS = chromiumArgsWithGpuDefault([
+  ...optAll("chromium-arg"),
+  ...optAll("chromium-args").flatMap((value) => value.split(/\s+/).filter(Boolean)),
+], { softwareBackend: SOFTWARE_BACKEND });
+
+if (MODE !== "baked" && MODE !== "dynamic") {
+  throw new Error(`--mode must be baked or dynamic; got "${MODE}"`);
+}
+if (!Number.isFinite(DEGREES) || DEGREES === 0) {
+  throw new Error("--degrees must be a non-zero number");
+}
+
+const VARIANT_PARAMS = {
+  baseline: {},
+  "css-keyframes": { rotationDriver: "css-keyframes" },
+  "order-depth": { domOrder: "initial-depth" },
+  "order-tile4": { domOrder: "tile4-screen" },
+  "order-area": { domOrder: "area-desc" },
+  "no-border-shape": { disableStrategies: "i" },
+  "no-stable-tri": { disableStrategies: "u" },
+  "force-atlas": { disableStrategies: "b,i,u" },
+  "no-will-change": { sceneTransformMode: "no-will-change" },
+  "leaf-buckets-64": { leafBucketSize: "64" },
+  "leaf-buckets-128": { leafBucketSize: "128" },
+  "leaf-buckets-256": { leafBucketSize: "256" },
+  "scene-matrix3d": { sceneTransformMode: "matrix3d" },
+  "scene-split-target": { sceneTransformMode: "split-target" },
+  "scene-host-perspective": { sceneTransformMode: "host-perspective" },
+  "scene-transform-perspective": { sceneTransformMode: "transform-perspective" },
+};
+
+if (!VARIANT_PARAMS[VARIANT]) {
+  throw new Error(`Unknown --variant "${VARIANT}". Known: ${Object.keys(VARIANT_PARAMS).join(", ")}`);
+}
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".mjs": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".obj": "text/plain; charset=utf-8",
+  ".mtl": "text/plain; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gltf": "application/json; charset=utf-8",
+  ".glb": "model/gltf-binary",
+  ".vox": "application/octet-stream",
+};
+
+const TRACE_CATEGORIES = [
+  "devtools.timeline",
+  "disabled-by-default-devtools.timeline",
+  "blink",
+  "blink.user_timing",
+  "cc",
+  "gpu",
+  "viz",
+  "renderer.scheduler",
+].join(",");
+
+const EVENT_GROUPS = {
+  style: ["UpdateLayoutTree", "RecalculateStyles"],
+  layout: ["Layout"],
+  prePaint: ["PrePaint"],
+  paint: ["Paint"],
+  raster: ["RasterTask", "ImageDecodeTask", "Decode Image"],
+  script: ["FunctionCall", "EvaluateScript", "EventDispatch", "TimerFire", "FireAnimationFrame"],
+  compositorMain: [
+    "ProxyMain::BeginMainFrame",
+    "WebFrameWidgetImpl::UpdateLifecycle",
+    "PaintArtifactCompositor::Update",
+    "Layerize",
+    "Commit",
+    "ProxyImpl::ReadyToCommit",
+  ],
+  compositorImpl: [
+    "LayerTreeImpl::UpdateDrawProperties",
+    "LayerTreeImpl::UpdateDrawProperties::CalculateDrawProperties",
+    "draw_property_utils::ComputeDrawPropertiesOfVisibleLayers",
+    "LayerTreeHostImpl::PrepareToDraw",
+    "MainFrame.Draw",
+    "SubmitCompositorFrame",
+  ],
+};
+
+const KEY_EVENTS = [
+  "EventDispatch",
+  "FunctionCall",
+  "FireAnimationFrame",
+  "UpdateLayoutTree",
+  "Layout",
+  "PrePaint",
+  "Paint",
+  "PaintArtifactCompositor::Update",
+  "Layerize",
+  "Commit",
+  "ProxyMain::BeginMainFrame",
+  "LayerTreeImpl::UpdateDrawProperties",
+  "LayerTreeImpl::UpdateDrawProperties::CalculateDrawProperties",
+  "draw_property_utils::ComputeDrawPropertiesOfVisibleLayers",
+  "LayerTreeHostImpl::PrepareToDraw",
+  "MainFrame.Draw",
+  "SubmitCompositorFrame",
+  "RasterTask",
+  "DirectRenderer::DrawFrame",
+  "DirectRenderer::DrawRenderPass",
+];
+
+function startServer() {
+  return new Promise((resolveStart, rejectStart) => {
+    const server = createServer(async (req, res) => {
+      try {
+        const u = new URL(req.url, "http://localhost");
+        const safe = u.pathname.replace(/\/+/g, "/");
+        if (safe.includes("..")) {
+          res.writeHead(403);
+          res.end("forbidden");
+          return;
+        }
+        const abs = safe.startsWith("/gallery/")
+          ? resolve(galleryDir, safe.slice("/gallery/".length))
+          : resolve(benchDir, safe === "/" ? "nonvoxel-vanilla.html" : safe.slice(1));
+        const data = await readFile(abs);
+        res.writeHead(200, {
+          "Content-Type": MIME[extname(abs).toLowerCase()] || "application/octet-stream",
+          "Cache-Control": "no-store",
+        });
+        res.end(data);
+      } catch (error) {
+        res.writeHead(404);
+        res.end(String(error?.message ?? error));
+      }
+    });
+    server.on("error", rejectStart);
+    server.listen(0, "127.0.0.1", () => {
+      const addr = server.address();
+      resolveStart({ server, port: typeof addr === "object" ? addr.port : 0 });
+    });
+  });
+}
+
+function stopServer(server) {
+  return new Promise((resolveStop) => server.close(resolveStop));
+}
+
+function safeLabel(value) {
+  return value.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "").toLowerCase() || "run";
+}
+
+function outputPaths() {
+  const label = LABEL || `nonvoxel-drag-${safeLabel(MESH)}-${MODE}-${safeLabel(VARIANT)}`;
+  return {
+    label,
+    json: resolve(repoRoot, JSON_PATH || `bench/results/${label}.json`),
+    trace: resolve(repoRoot, TRACE_PATH || `bench/results/${label}.trace.json`),
+  };
+}
+
+function urlFor(port) {
+  const params = new URLSearchParams({
+    mesh: MESH,
+    mode: MODE,
+    motion: "drag",
+    ...(FRAME_DETAILS ? { frameWork: "1" } : {}),
+    ...VARIANT_PARAMS[VARIANT],
+  });
+  return `http://127.0.0.1:${port}/nonvoxel-vanilla.html?${params.toString()}`;
+}
+
+function quantile(sorted, q) {
+  if (sorted.length === 0) return 0;
+  const i = (sorted.length - 1) * q;
+  const lo = Math.floor(i);
+  const hi = Math.ceil(i);
+  if (lo === hi) return sorted[lo];
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (i - lo);
+}
+
+function summarizeFrameTimes(samples) {
+  const rawDts = samples.map((sample) => sample.dt).filter((dt) => Number.isFinite(dt) && dt > 0);
+  const dts = rawDts.filter((dt) => dt < 2000).sort((a, b) => a - b);
+  const p50 = quantile(dts, 0.5);
+  const p95 = quantile(dts, 0.95);
+  const p99 = quantile(dts, 0.99);
+  const duration = samples.length >= 2
+    ? samples[samples.length - 1].t - samples[0].t
+    : 0;
+  return {
+    fps_p50: p50 > 0 ? +(1000 / p50).toFixed(2) : 0,
+    fps_p95: p95 > 0 ? +(1000 / p95).toFixed(2) : 0,
+    frame_time_p50_ms: +p50.toFixed(3),
+    frame_time_p95_ms: +p95.toFixed(3),
+    frame_time_p99_ms: +p99.toFixed(3),
+    sample_count: dts.length,
+    sample_count_raw: rawDts.length,
+    sample_count_filtered: rawDts.length - dts.length,
+    sample_duration_ms: +duration.toFixed(3),
+  };
+}
+
+function findTraceMark(events, name) {
+  return events.find((event) => event?.name === name && Number.isFinite(event?.args?.data?.startTime)) ??
+    events.find((event) => event?.name === "TimeStamp" && event?.args?.data?.message === name);
+}
+
+function makeFrameWindows(samples, startPerfNow, endPerfNow) {
+  return samples
+    .filter((sample) => Number.isFinite(sample?.dt) && sample.dt > 0 && sample.dt < 2000)
+    .filter((sample) => sample.t - sample.dt >= startPerfNow && sample.t <= endPerfNow)
+    .map((sample, index) => ({
+      index,
+      start: sample.t - sample.dt,
+      end: sample.t,
+      dt: sample.dt,
+    }));
+}
+
+function frameIndexAt(frames, perfNow) {
+  let lo = 0;
+  let hi = frames.length - 1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const frame = frames[mid];
+    if (perfNow < frame.start) hi = mid - 1;
+    else if (perfNow > frame.end) lo = mid + 1;
+    else return mid;
+  }
+  return -1;
+}
+
+function addDuration(map, name, durationMs) {
+  const entry = map.get(name) ?? { count: 0, duration_ms: 0 };
+  entry.count += 1;
+  entry.duration_ms += durationMs;
+  map.set(name, entry);
+}
+
+function addAggregate(map, name, count, durationMs) {
+  const entry = map.get(name) ?? { count: 0, duration_ms: 0 };
+  entry.count += count;
+  entry.duration_ms += durationMs;
+  map.set(name, entry);
+}
+
+function frameWorkForFrame(frameWorkSamples, frame, startIndex) {
+  if (!Array.isArray(frameWorkSamples) || frameWorkSamples.length === 0) {
+    return { sample: null, nextIndex: startIndex };
+  }
+
+  let index = Math.max(0, startIndex);
+  while (index + 1 < frameWorkSamples.length && frameWorkSamples[index + 1].t <= frame.end + 1) {
+    index += 1;
+  }
+  const sample = frameWorkSamples[index];
+  if (sample && sample.t >= frame.start - 1 && sample.t <= frame.end + 1) {
+    return { sample, nextIndex: index };
+  }
+  return { sample: null, nextIndex: index };
+}
+
+function serializePageOps(ops) {
+  const out = {};
+  if (!ops || typeof ops !== "object") return out;
+  for (const [name, entry] of Object.entries(ops)) {
+    out[name] = {
+      count: entry.count ?? 0,
+      duration_ms: +((entry.duration_ms ?? 0)).toFixed(4),
+    };
+  }
+  return out;
+}
+
+function summarizeFrameDetails(events, samples, frameWorkSamples, startPerfNow, endPerfNow) {
+  if (!FRAME_DETAILS || FRAME_DETAILS_LIMIT === 0) return null;
+  const startMark = findTraceMark(events, "polycss-drag-trace-start");
+  const endMark = findTraceMark(events, "polycss-drag-trace-end");
+  if (!startMark?.args?.data?.startTime || !endMark?.args?.data?.startTime) {
+    return {
+      error: "Trace markers were not captured; frame details cannot be aligned.",
+    };
+  }
+
+  const tracePerfOffsetMs = (startMark.ts / 1000) - startMark.args.data.startTime;
+  const alignedStartPerfNow = startMark.args.data.startTime || startPerfNow;
+  const alignedEndPerfNow = endMark.args.data.startTime || endPerfNow;
+  const frames = makeFrameWindows(samples, alignedStartPerfNow, alignedEndPerfNow);
+  const groupByEvent = new Map();
+  for (const [group, names] of Object.entries(EVENT_GROUPS)) {
+    for (const name of names) groupByEvent.set(name, group);
+  }
+
+  const frameTotals = frames.map((frame) => ({
+    ...frame,
+    groups: new Map(),
+    events: new Map(),
+    completeEventMs: 0,
+    pageOps: {},
+  }));
+
+  let frameWorkIndex = 0;
+  for (const frame of frameTotals) {
+    const result = frameWorkForFrame(frameWorkSamples, frame, frameWorkIndex);
+    frameWorkIndex = result.nextIndex;
+    frame.pageOps = serializePageOps(result.sample?.ops);
+  }
+
+  for (const event of events) {
+    if (event?.ph !== "X" || typeof event.dur !== "number" || !Number.isFinite(event.ts)) continue;
+    const durationMs = event.dur / 1000;
+    const midpointPerfNow = ((event.ts + event.dur / 2) / 1000) - tracePerfOffsetMs;
+    const index = frameIndexAt(frameTotals, midpointPerfNow);
+    if (index < 0) continue;
+    const frame = frameTotals[index];
+    frame.completeEventMs += durationMs;
+    addDuration(frame.events, event.name, durationMs);
+    const group = groupByEvent.get(event.name);
+    if (group) addDuration(frame.groups, group, durationMs);
+  }
+
+  const serializeMap = (map, keys) => {
+    const out = {};
+    for (const key of keys) out[key] = +((map.get(key)?.duration_ms ?? 0)).toFixed(4);
+    return out;
+  };
+  const serializeGroups = (map) => serializeMap(map, Object.keys(EVENT_GROUPS));
+  const serializeKeyEvents = (map) => serializeMap(map, KEY_EVENTS);
+  const topEvents = (map) => [...map.entries()]
+    .map(([event, total]) => ({
+      event,
+      count: total.count,
+      duration_ms: +total.duration_ms.toFixed(4),
+    }))
+    .sort((a, b) => b.duration_ms - a.duration_ms)
+    .slice(0, 12);
+  const topPageOps = (map) => [...map.entries()]
+    .map(([operation, total]) => ({
+      operation,
+      count: total.count,
+      duration_ms: +total.duration_ms.toFixed(4),
+    }))
+    .sort((a, b) => b.duration_ms - a.duration_ms)
+    .slice(0, 12);
+
+  const serializeFrame = (frame) => ({
+    index: frame.index,
+    start_ms: +frame.start.toFixed(3),
+    end_ms: +frame.end.toFixed(3),
+    dt_ms: +frame.dt.toFixed(3),
+    complete_event_ms: +frame.completeEventMs.toFixed(3),
+    page_ops: frame.pageOps,
+    groups_ms: serializeGroups(frame.groups),
+    key_events_ms: serializeKeyEvents(frame.events),
+    topEvents: topEvents(frame.events),
+  });
+
+  const framesOut = frameTotals
+    .slice()
+    .sort((a, b) => b.dt - a.dt)
+    .slice(0, FRAME_DETAILS_LIMIT)
+    .map(serializeFrame)
+    .sort((a, b) => a.index - b.index);
+  const rotationFrames = frameTotals
+    .filter((frame) =>
+      frame.pageOps["input.pointermove"] ||
+      frame.pageOps["controls.change"] ||
+      frame.pageOps["camera.update"] ||
+      frame.pageOps["scene.applyCamera"])
+    .slice(0, FRAME_DETAILS_LIMIT)
+    .map(serializeFrame);
+
+  const totals = new Map();
+  const pageTotals = new Map();
+  for (const frame of frameTotals) {
+    for (const [event, total] of frame.events) addAggregate(totals, event, total.count, total.duration_ms);
+    for (const [operation, total] of Object.entries(frame.pageOps)) {
+      addAggregate(pageTotals, operation, total.count ?? 0, total.duration_ms ?? 0);
+    }
+  }
+
+  return {
+    tracePerfOffsetMs: +tracePerfOffsetMs.toFixed(3),
+    frameCount: frameTotals.length,
+    includedFrames: framesOut.length,
+    slowestFrames: framesOut,
+    rotationFrames,
+    topPageOps: topPageOps(pageTotals),
+    topEvents: topEvents(totals),
+  };
+}
+
+function summarizeTraceEvents(events) {
+  const byName = new Map();
+  let completeEventCount = 0;
+  let totalDurationUs = 0;
+  for (const event of events) {
+    if (event?.ph !== "X" || typeof event.dur !== "number") continue;
+    completeEventCount += 1;
+    totalDurationUs += event.dur;
+    const prev = byName.get(event.name) ?? { count: 0, durationUs: 0 };
+    prev.count += 1;
+    prev.durationUs += event.dur;
+    byName.set(event.name, prev);
+  }
+
+  const group = (names) => {
+    let count = 0;
+    let durationUs = 0;
+    for (const name of names) {
+      const entry = byName.get(name);
+      if (!entry) continue;
+      count += entry.count;
+      durationUs += entry.durationUs;
+    }
+    return { count, duration_ms: +(durationUs / 1000).toFixed(3) };
+  };
+
+  const groups = Object.fromEntries(
+    Object.entries(EVENT_GROUPS).map(([name, names]) => [name, group(names)]),
+  );
+
+  const topEvents = [...byName.entries()]
+    .sort((a, b) => b[1].durationUs - a[1].durationUs)
+    .slice(0, 20)
+    .map(([name, entry]) => ({
+      name,
+      count: entry.count,
+      duration_ms: +(entry.durationUs / 1000).toFixed(3),
+    }));
+
+  return {
+    eventCount: events.length,
+    completeEventCount,
+    totalCompleteDurationMs: +(totalDurationUs / 1000).toFixed(3),
+    groups,
+    topEvents,
+  };
+}
+
+function metricMap(metrics) {
+  const out = new Map();
+  for (const metric of metrics?.metrics ?? []) out.set(metric.name, metric.value);
+  return out;
+}
+
+function diffPerformanceMetrics(before, after) {
+  const a = metricMap(before);
+  const b = metricMap(after);
+  const keys = [
+    "Timestamp",
+    "Documents",
+    "Frames",
+    "JSEventListeners",
+    "Nodes",
+    "LayoutCount",
+    "RecalcStyleCount",
+    "LayoutDuration",
+    "RecalcStyleDuration",
+    "ScriptDuration",
+    "TaskDuration",
+    "JSHeapUsedSize",
+    "JSHeapTotalSize",
+  ];
+  const out = {};
+  for (const key of keys) {
+    const beforeValue = a.get(key);
+    const afterValue = b.get(key);
+    if (beforeValue === undefined || afterValue === undefined) continue;
+    const value = key === "Timestamp" || key === "Documents" || key === "Frames" ||
+      key === "JSEventListeners" || key === "Nodes" ||
+      key === "JSHeapUsedSize" || key === "JSHeapTotalSize"
+      ? afterValue
+      : afterValue - beforeValue;
+    out[key] = Number(value.toFixed(key.endsWith("Duration") ? 6 : 3));
+  }
+  return out;
+}
+
+function buildGesturePlan(hostBox) {
+  const margin = Math.max(24, Math.min(96, hostBox.width * 0.15));
+  const left = hostBox.x + margin;
+  const right = hostBox.x + hostBox.width - margin;
+  const y = hostBox.y + hostBox.height / 2;
+  const usable = Math.max(1, right - left);
+  const totalDx = -DEGREES * PIXELS_PER_DEGREE;
+  const direction = Math.sign(totalDx);
+  let remaining = Math.abs(totalDx);
+  const gestures = [];
+
+  while (remaining > 0) {
+    const distance = Math.min(remaining, usable);
+    gestures.push(direction < 0
+      ? { startX: right, endX: right - distance, y, pixels: distance }
+      : { startX: left, endX: left + distance, y, pixels: distance });
+    remaining -= distance;
+  }
+
+  let remainingSteps = STEPS;
+  const totalPixels = gestures.reduce((sum, gesture) => sum + gesture.pixels, 0);
+  gestures.forEach((gesture, index) => {
+    if (index === gestures.length - 1) {
+      gesture.steps = Math.max(1, remainingSteps);
+    } else {
+      gesture.steps = Math.max(1, Math.round(STEPS * (gesture.pixels / totalPixels)));
+      remainingSteps = Math.max(1, remainingSteps - gesture.steps);
+    }
+  });
+
+  return {
+    pixelsPerDegree: PIXELS_PER_DEGREE,
+    requestedDegrees: DEGREES,
+    expectedRotYDelta: -totalDx / PIXELS_PER_DEGREE,
+    totalDx,
+    totalPixels,
+    durationMs: DRAG_MS,
+    stepCount: gestures.reduce((sum, gesture) => sum + gesture.steps, 0),
+    gestures,
+  };
+}
+
+async function startTrace(cdp) {
+  const events = [];
+  cdp.on("Tracing.dataCollected", (payload) => {
+    if (Array.isArray(payload.value)) events.push(...payload.value);
+  });
+  await cdp.send("Performance.enable");
+  await cdp.send("Tracing.start", {
+    transferMode: "ReportEvents",
+    categories: TRACE_CATEGORIES,
+  });
+  return events;
+}
+
+async function stopTrace(cdp, events) {
+  const done = new Promise((resolveDone) => {
+    cdp.once("Tracing.tracingComplete", resolveDone);
+  });
+  await cdp.send("Tracing.end");
+  await done;
+  return events;
+}
+
+async function performDrag(page, plan) {
+  const delayMs = plan.durationMs / Math.max(1, plan.stepCount);
+  const first = plan.gestures[0];
+  await page.mouse.move(first.startX, first.y);
+
+  for (let gestureIndex = 0; gestureIndex < plan.gestures.length; gestureIndex += 1) {
+    const gesture = plan.gestures[gestureIndex];
+    if (gestureIndex > 0) await page.mouse.move(gesture.startX, gesture.y);
+    await page.mouse.down();
+    for (let step = 1; step <= gesture.steps; step += 1) {
+      const t = step / gesture.steps;
+      const x = gesture.startX + (gesture.endX - gesture.startX) * t;
+      await page.mouse.move(x, gesture.y);
+      if (delayMs > 0) await page.waitForTimeout(delayMs);
+    }
+    await page.mouse.up();
+    if (gestureIndex + 1 < plan.gestures.length) await page.waitForTimeout(40);
+  }
+}
+
+async function run() {
+  const paths = outputPaths();
+  const { server, port } = await startServer();
+  console.log(`[drag-trace] server :${port}`);
+  console.log(`[drag-trace] mesh=${MESH} mode=${MODE} variant=${VARIANT} degrees=${DEGREES} warmup=${WARMUP_MS}ms drag=${DRAG_MS}ms settle=${SETTLE_MS}ms`);
+  if (BROWSER_EXECUTABLE) console.log(`[drag-trace] browser=${BROWSER_EXECUTABLE}`);
+  if (SOFTWARE_BACKEND) console.log("[drag-trace] software backend=on");
+  if (CHROMIUM_ARGS.length > 0) console.log(`[drag-trace] chromium args=${CHROMIUM_ARGS.join(" ")}`);
+
+  const launchOptions = { headless: !HEADED, args: CHROMIUM_ARGS };
+  if (BROWSER_EXECUTABLE) launchOptions.executablePath = BROWSER_EXECUTABLE;
+  let browser = null;
+
+  try {
+    browser = await chromium.launch(launchOptions);
+    const ctx = await browser.newContext({ viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT } });
+    const page = await ctx.newPage();
+    page.on("console", (message) => {
+      if (message.type() === "error" || message.type() === "warning") {
+        console.log(`[drag-trace:page:${message.type()}] ${message.text()}`);
+      }
+    });
+    page.on("pageerror", (error) => {
+      console.log(`[drag-trace:page:error] ${error?.stack || error?.message || error}`);
+    });
+    const targetUrl = urlFor(port);
+    await page.goto(targetUrl, { waitUntil: "load" });
+    await page.waitForFunction(() =>
+      window.__perf__?.ready === true && window.__nonvoxelBench?.ready === true,
+    null, { timeout: 30000 });
+    await page.waitForTimeout(WARMUP_MS);
+
+    const hostBox = await page.locator("#host").boundingBox();
+    if (!hostBox) throw new Error("Could not locate #host for drag input");
+    const dragPlan = buildGesturePlan(hostBox);
+    const cdp = await ctx.newCDPSession(page);
+    const traceEvents = TRACE ? await startTrace(cdp) : [];
+    const metricsBefore = await cdp.send("Performance.getMetrics");
+
+    const startInfo = await page.evaluate((traceEnabled) => {
+      window.__nonvoxelBench.resetInteractionStats();
+      if (traceEnabled) {
+        performance.mark("polycss-drag-trace-start");
+        console.timeStamp("polycss-drag-trace-start");
+      }
+      return {
+        sampleIndex: window.__perf__.samples.length,
+        perfNow: performance.now(),
+        camera: window.__nonvoxelBench.cameraState(),
+      };
+    }, TRACE);
+
+    await performDrag(page, dragPlan);
+    await page.waitForTimeout(SETTLE_MS);
+
+    const endInfo = await page.evaluate(({ from, traceEnabled }) => {
+      if (traceEnabled) {
+        performance.mark("polycss-drag-trace-end");
+        console.timeStamp("polycss-drag-trace-end");
+      }
+      return {
+        perfNow: performance.now(),
+        camera: window.__nonvoxelBench.cameraState(),
+        interaction: window.__nonvoxelBench.interactionStats(),
+        frameWorkSamples: window.__nonvoxelBench.frameWorkSamples(),
+        samples: window.__perf__.samples.slice(from),
+        polyCount: window.__perf__.polyCount,
+        renderStats: window.__perf__.renderStats ?? null,
+      };
+    }, { from: startInfo.sampleIndex, traceEnabled: TRACE });
+    const metricsAfter = await cdp.send("Performance.getMetrics");
+    const events = TRACE ? await stopTrace(cdp, traceEvents) : [];
+    await ctx.close();
+
+    const traceSummary = summarizeTraceEvents(events);
+    const frameDetails = summarizeFrameDetails(
+      events,
+      endInfo.samples,
+      endInfo.frameWorkSamples,
+      startInfo.perfNow,
+      endInfo.perfNow,
+    );
+    const result = {
+      kind: "nonvoxel-drag-trace",
+      mesh: MESH,
+      mode: MODE,
+      variant: VARIANT,
+      url: targetUrl,
+      viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT },
+      warmup_ms: WARMUP_MS,
+      settle_ms: SETTLE_MS,
+      browserExecutable: BROWSER_EXECUTABLE || null,
+      chromiumArgs: CHROMIUM_ARGS,
+      softwareBackend: SOFTWARE_BACKEND,
+      drag: {
+        ...dragPlan,
+        gestures: dragPlan.gestures.map((gesture) => ({
+          startX: +gesture.startX.toFixed(3),
+          endX: +gesture.endX.toFixed(3),
+          y: +gesture.y.toFixed(3),
+          pixels: +gesture.pixels.toFixed(3),
+          steps: gesture.steps,
+        })),
+      },
+      camera: {
+        start: startInfo.camera,
+        end: endInfo.camera,
+        cumulativeRotY: +endInfo.interaction.cumulativeRotY.toFixed(3),
+        requestedRotYDelta: +dragPlan.expectedRotYDelta.toFixed(3),
+        rotYError: +(endInfo.interaction.cumulativeRotY - dragPlan.expectedRotYDelta).toFixed(3),
+        interaction: endInfo.interaction,
+      },
+      frames: summarizeFrameTimes(endInfo.samples),
+      polyCount: endInfo.polyCount,
+      renderStats: endInfo.renderStats,
+      trace: traceSummary,
+      frameDetails,
+      performanceMetrics: diffPerformanceMetrics(metricsBefore, metricsAfter),
+      outputFiles: {
+        json: paths.json,
+        trace: paths.trace,
+      },
+    };
+
+    if (TRACE) {
+      const tracePayload = {
+        traceEvents: events,
+        displayTimeUnit: "ms",
+        metadata: {
+          source: "bench/nonvoxel-drag-trace.mjs",
+          mesh: MESH,
+          mode: MODE,
+          variant: VARIANT,
+          requestedDegrees: DEGREES,
+          dragMs: DRAG_MS,
+          steps: STEPS,
+        },
+      };
+      mkdirSync(dirname(paths.trace), { recursive: true });
+      writeFileSync(paths.trace, JSON.stringify(tracePayload));
+      console.log(`[drag-trace] wrote ${paths.trace}`);
+    }
+    mkdirSync(dirname(paths.json), { recursive: true });
+    writeFileSync(paths.json, `${JSON.stringify(result, null, 2)}\n`);
+
+    console.log(`[drag-trace] wrote ${paths.json}`);
+    console.log(
+      `[drag-trace] p50=${result.frames.fps_p50.toFixed(1)}fps p95=${result.frames.fps_p95.toFixed(1)}fps ` +
+      `p99=${result.frames.frame_time_p99_ms.toFixed(1)}ms rotY=${result.camera.cumulativeRotY.toFixed(1)}deg ` +
+      `err=${result.camera.rotYError.toFixed(2)}deg`,
+    );
+    if (PRINT_JSON) console.log(JSON.stringify(result, null, 2));
+  } finally {
+    if (browser) await browser.close();
+    await stopServer(server);
+  }
+}
+
+run().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/bench/nonvoxel-vanilla.html b/bench/nonvoxel-vanilla.html
index da25670..bd886fa 100644
--- a/bench/nonvoxel-vanilla.html
+++ b/bench/nonvoxel-vanilla.html
@@ -9,7 +9,7 @@
   <div id="host"></div>
 
   <script type="module">
-    import { createPolyScene, createPolyOrbitControls, loadMesh } from "./polycss.js";
+    import { createPolyCamera, createPolyScene, createPolyOrbitControls, loadMesh } from "./polycss.js";
     import { getSynthMesh } from "./synth-mesh.mjs";
     import {
       parseUrlParams, dirFromAzEl, createPerfRecorder,
@@ -26,6 +26,7 @@
     const polygonOrder = benchParams.get("polygonOrder") || "source";
     const domOrder = benchParams.get("domOrder") || "source";
     const leafBucketSize = Number(benchParams.get("leafBucketSize") || 0);
+    const recordFrameWork = benchParams.get("frameWork") === "1";
     const disabledStrategies = (benchParams.get("disableStrategies") || "")
       .split(",")
       .map((value) => value.trim())
@@ -33,15 +34,76 @@
     let azimuth = az;
 
     const host = document.getElementById("host");
+    const camera = createPolyCamera({ rotX: preset.rotX, rotY: preset.rotY, zoom: preset.zoom });
     const scene = createPolyScene(host, {
-      rotX: preset.rotX, rotY: preset.rotY, zoom: preset.zoom,
+      camera,
       directionalLight: { direction: dirFromAzEl(azimuth, el), color: "#ffffff", intensity: 1 },
       ambientLight: { color: "#ffffff", intensity: 0.4 },
       textureLighting: mode,
       autoCenter: true,
       ...(disabledStrategies.length > 0 ? { strategies: { disable: disabledStrategies } } : {}),
     });
-    createPolyOrbitControls(scene, { drag: true, wheel: true });
+    const frameWork = createFrameWorkRecorder(recordFrameWork);
+    if (recordFrameWork) instrumentCameraAndScene();
+    const controls = createPolyOrbitControls(scene, { drag: true, wheel: true });
+    const interactionStats = {
+      starts: 0,
+      changes: 0,
+      ends: 0,
+      cumulativeRotY: 0,
+      lastRotY: scene.camera.state.rotY ?? preset.rotY,
+    };
+
+    function cloneCameraState() {
+      const state = scene.camera.state;
+      const target = state.target ?? [0, 0, 0];
+      return {
+        rotX: state.rotX ?? 0,
+        rotY: state.rotY ?? 0,
+        zoom: state.zoom ?? 0,
+        distance: state.distance ?? 0,
+        target: [target[0], target[1], target[2]],
+      };
+    }
+
+    function unwrapAngleDelta(next, previous) {
+      let delta = next - previous;
+      if (delta > 180) delta -= 360;
+      if (delta < -180) delta += 360;
+      return delta;
+    }
+
+    function resetInteractionStats() {
+      interactionStats.starts = 0;
+      interactionStats.changes = 0;
+      interactionStats.ends = 0;
+      interactionStats.cumulativeRotY = 0;
+      interactionStats.lastRotY = scene.camera.state.rotY ?? preset.rotY;
+      frameWork.reset();
+    }
+
+    controls.addEventListener("start", () => {
+      frameWork.record("controls.start");
+      interactionStats.starts += 1;
+    });
+    controls.addEventListener("change", ({ camera }) => {
+      frameWork.record("controls.change");
+      interactionStats.cumulativeRotY += unwrapAngleDelta(camera.rotY, interactionStats.lastRotY);
+      interactionStats.lastRotY = camera.rotY;
+      interactionStats.changes += 1;
+    });
+    controls.addEventListener("end", () => {
+      frameWork.record("controls.end");
+      interactionStats.ends += 1;
+    });
+
+    window.__nonvoxelBench = {
+      ready: false,
+      cameraState: cloneCameraState,
+      interactionStats: () => ({ ...interactionStats }),
+      frameWorkSamples: () => frameWork.samples(),
+      resetInteractionStats,
+    };
 
     const sceneEl = host.querySelector(".polycss-scene");
     let splitShell = null;
@@ -55,6 +117,73 @@
       return sceneEl?.style.perspective || getComputedStyle(sceneEl).perspective || "8000px";
     }
 
+    function createFrameWorkRecorder(enabled) {
+      let current = {};
+      const frameSamples = [];
+
+      function record(name, durationMs = 0) {
+        if (!enabled) return;
+        const entry = current[name] ?? { count: 0, duration_ms: 0 };
+        entry.count += 1;
+        entry.duration_ms += Number.isFinite(durationMs) ? durationMs : 0;
+        current[name] = entry;
+      }
+
+      function snapshot(now) {
+        if (!enabled) return;
+        frameSamples.push({
+          t: now,
+          ops: Object.fromEntries(Object.entries(current).map(([name, entry]) => [
+            name,
+            {
+              count: entry.count,
+              duration_ms: +entry.duration_ms.toFixed(4),
+            },
+          ])),
+        });
+        current = {};
+        if (frameSamples.length > 1800) {
+          frameSamples.splice(0, frameSamples.length - 1800);
+        }
+      }
+
+      return {
+        record,
+        snapshot,
+        reset() {
+          if (!enabled) return;
+          current = {};
+          frameSamples.length = 0;
+        },
+        samples() {
+          return frameSamples.slice();
+        },
+      };
+    }
+
+    function timedFrameWork(name, fn) {
+      const start = performance.now();
+      try {
+        return fn();
+      } finally {
+        frameWork.record(name, performance.now() - start);
+      }
+    }
+
+    function instrumentCameraAndScene() {
+      const cameraUpdate = camera.update.bind(camera);
+      camera.update = (next) => timedFrameWork("camera.update", () => cameraUpdate(next));
+
+      const sceneApplyCamera = scene.applyCamera.bind(scene);
+      scene.applyCamera = () => timedFrameWork("scene.applyCamera", () => sceneApplyCamera());
+
+      host.addEventListener("pointerdown", () => frameWork.record("input.pointerdown"), { capture: true });
+      host.addEventListener("pointermove", () => frameWork.record("input.pointermove"), { capture: true });
+      host.addEventListener("pointerup", () => frameWork.record("input.pointerup"), { capture: true });
+      host.addEventListener("pointercancel", () => frameWork.record("input.pointercancel"), { capture: true });
+      host.addEventListener("wheel", () => frameWork.record("input.wheel"), { capture: true, passive: true });
+    }
+
     function ensureSplitShell() {
       if (splitShell || !sceneEl) return splitShell;
       splitShell = document.createElement("div");
@@ -319,6 +448,31 @@
       return true;
     }
 
+    function atlasLeavesReady() {
+      const leaves = Array.from(host.querySelectorAll(".polycss-mesh s"));
+      return leaves.every((leaf) => {
+        const inlineBg = leaf.style.backgroundImage;
+        const bg = inlineBg || getComputedStyle(leaf).backgroundImage;
+        return leaf.style.opacity !== "0" && bg && bg !== "none";
+      });
+    }
+
+    function markReadyWhenRenderPainted() {
+      window.__perf__.ready = false;
+      window.__nonvoxelBench.ready = false;
+
+      function check() {
+        if (atlasLeavesReady()) {
+          window.__perf__.ready = true;
+          window.__nonvoxelBench.ready = true;
+          return;
+        }
+        requestAnimationFrame(check);
+      }
+
+      check();
+    }
+
     const meshPromise = isSynth
       ? Promise.resolve(getSynthMesh(meshId))
       : loadMesh(preset.url, {
@@ -342,9 +496,11 @@
         polyCount: parseResult.polygons.length,
         polygons: parseResult.polygons,
       });
+      markReadyWhenRenderPainted();
 
       let frameCount = 0;
       function tick(now) {
+        frameWork.snapshot(now);
         recorder.onFrame(now);
         frameCount += 1;
         if (motion === "light") {
@@ -355,7 +511,8 @@
         } else if (motion === "rot") {
           const newRotY = ((preset.rotY + frameCount * 0.5) + 360) % 360;
           if (!cssDrivenRotation) {
-            scene.setOptions({ rotY: newRotY });
+            scene.camera.update({ rotY: newRotY });
+            scene.applyCamera();
             applySceneTransformMode();
           }
         }
diff --git a/package.json b/package.json
index 3474e73..020a129 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "bench:serve": "node bench/perf-serve.mjs --port 4400",
     "bench:perf": "node bench/build.mjs && node bench/perf-bench.mjs",
     "bench:animated-human": "node bench/build.mjs && node bench/animated-human-bench.mjs",
+    "bench:nonvoxel-drag-trace": "node bench/build.mjs && node bench/nonvoxel-drag-trace.mjs",
     "bench:lossy": "pnpm --filter @layoutit/polycss-core build && node bench/lossy-optimizer-bench.mjs",
     "bench:visual": "node bench/build.mjs && node bench/perf-visual.mjs"
   },
diff --git a/packages/core/src/animation/index.ts b/packages/core/src/animation/index.ts
index 18043fc..5321f60 100644
--- a/packages/core/src/animation/index.ts
+++ b/packages/core/src/animation/index.ts
@@ -10,6 +10,28 @@
 import type { ParseAnimationClip, ParseAnimationController } from "../parser/types";
 import type { Polygon } from "../types";
 
+const POLY_ANIMATION_TRIANGLE_FRAME_SOURCE = Symbol.for("polycss.animation.triangleFrameSource");
+const POLY_ANIMATION_TRIANGLE_FRAME_TARGET = Symbol.for("polycss.animation.triangleFrameTarget");
+
+interface PolyAnimationTriangleFrame {
+  polygonCount: number;
+  vertices: Float64Array;
+  colors?: readonly (string | undefined)[];
+  textureFlags?: readonly boolean[];
+  solidTriangles?: boolean;
+}
+
+interface PolyAnimationTriangleFrameSource {
+  [POLY_ANIMATION_TRIANGLE_FRAME_SOURCE]?: (
+    clip: number | string,
+    timeSeconds: number,
+  ) => PolyAnimationTriangleFrame | null | undefined;
+}
+
+interface PolyAnimationTriangleFrameTarget {
+  [POLY_ANIMATION_TRIANGLE_FRAME_TARGET]?: (frame: PolyAnimationTriangleFrame) => boolean;
+}
+
 // ── Loop mode constants (match three.js) ────────────────────────────────────
 
 export const LoopOnce = 2200 as const;
@@ -339,6 +361,8 @@ export function createPolyAnimationMixer(
   controller: ParseAnimationController,
 ): PolyAnimationMixer {
   const actionCache = new Map<number, PolyAnimationAction>();
+  const triangleFrameSource = controller as ParseAnimationController & PolyAnimationTriangleFrameSource;
+  const triangleFrameTarget = root as PolyAnimationTarget & PolyAnimationTriangleFrameTarget;
 
   function clipAction(key: number | string): PolyAnimationAction {
     const clip = resolveClip(controller.clips, key);
@@ -378,7 +402,15 @@ export function createPolyAnimationMixer(
     if (active.length === 1) {
       // Fast path: single active action — no blending needed.
       const { internal, clip } = active[0];
-      const polygons = controller.sample(clip.name, internal.sampleTime());
+      const sampleTime = internal.sampleTime();
+      const triangleFrame = triangleFrameSource[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE]?.(clip.name, sampleTime);
+      if (
+        triangleFrame &&
+        triangleFrameTarget[POLY_ANIMATION_TRIANGLE_FRAME_TARGET]?.(triangleFrame)
+      ) {
+        return;
+      }
+      const polygons = controller.sample(clip.name, sampleTime);
       root.setPolygons(polygons);
       return;
     }
diff --git a/packages/core/src/animation/optimizeAnimatedMeshPolygons.ts b/packages/core/src/animation/optimizeAnimatedMeshPolygons.ts
index 7c08694..a6dfb58 100644
--- a/packages/core/src/animation/optimizeAnimatedMeshPolygons.ts
+++ b/packages/core/src/animation/optimizeAnimatedMeshPolygons.ts
@@ -1,38 +1,48 @@
 import type { MeshResolution, Polygon, Vec3 } from "../types";
-import type { ParseResult } from "../parser/types";
+import type { ParseAnimationController, ParseResult } from "../parser/types";
 import { cullInteriorPolygons } from "../cull/cullInteriorPolygons";
+import { filterGltfAnimationController } from "../parser/parseGltf";
+import { getSolidTextureBakedAnimationInfo } from "../parser/solidTextureSamples";
+
+const POLY_ANIMATION_TRIANGLE_FRAME_SOURCE = Symbol.for("polycss.animation.triangleFrameSource");
+
+interface PolyAnimationTriangleFrame {
+  polygonCount: number;
+  vertices: Float64Array;
+  colors?: readonly (string | undefined)[];
+  textureFlags?: readonly boolean[];
+  solidTriangles?: boolean;
+}
+
+interface PolyAnimationTriangleFrameSource {
+  [POLY_ANIMATION_TRIANGLE_FRAME_SOURCE]?: (
+    clip: number | string,
+    timeSeconds: number,
+  ) => PolyAnimationTriangleFrame | null | undefined;
+}
 
 export interface OptimizeAnimatedMeshPolygonsOptions {
   /** Public quality/resolution intent. Defaults to "lossy". */
   meshResolution?: MeshResolution;
 }
 
-interface SourceVertex {
-  polygonIndex: number;
-  vertexIndex: number;
-}
-
 interface PlannedPolygon {
   rest: Polygon;
-  sources: SourceVertex[];
-}
-
-function mappedVertices(frame: Polygon[], sources: SourceVertex[]): Vec3[] | null {
-  const vertices: Vec3[] = [];
-  for (const source of sources) {
-    const vertex = frame[source.polygonIndex]?.vertices[source.vertexIndex];
-    if (!vertex || vertex.some((value) => !Number.isFinite(value))) return null;
-    vertices.push([vertex[0], vertex[1], vertex[2]]);
-  }
-  return vertices;
+  originalIndex: number;
+  sourceRefs: number[];
 }
 
 function plannedOriginalPolygon(polygons: Polygon[], index: number): PlannedPolygon | null {
   const polygon = polygons[index];
   if (!polygon) return null;
+  const sourceRefs: number[] = [];
+  for (let vertexIndex = 0; vertexIndex < polygon.vertices.length; vertexIndex++) {
+    sourceRefs.push(index, vertexIndex);
+  }
   return {
     rest: polygon,
-    sources: polygon.vertices.map((_, vertexIndex) => ({ polygonIndex: index, vertexIndex })),
+    originalIndex: index,
+    sourceRefs,
   };
 }
 
@@ -52,21 +62,65 @@ function buildCulledTrianglePlan(polygons: Polygon[]): PlannedPolygon[] {
   return plan;
 }
 
-function applyPlanToFrame(frame: Polygon[], plan: PlannedPolygon[]): Polygon[] {
-  const out: Polygon[] = [];
-  for (const item of plan) {
-    const vertices = mappedVertices(frame, item.sources);
-    if (!vertices) return frame;
-    const color = frame[item.sources[0]?.polygonIndex]?.color ?? item.rest.color;
-    out.push({
+function applyPlanToFrame(frame: Polygon[], plan: PlannedPolygon[], useRestColor = false): Polygon[] {
+  const out: Polygon[] = new Array(plan.length);
+  for (let planIndex = 0; planIndex < plan.length; planIndex++) {
+    const item = plan[planIndex]!;
+    const refs = item.sourceRefs;
+    const vertices: Vec3[] = new Array(refs.length / 2);
+    for (let refIndex = 0, vertexOut = 0; refIndex < refs.length; refIndex += 2, vertexOut++) {
+      const sourcePolygon = frame[refs[refIndex]!];
+      const vertex = sourcePolygon?.vertices[refs[refIndex + 1]!];
+      if (!vertex) return frame;
+      const x = vertex[0];
+      const y = vertex[1];
+      const z = vertex[2];
+      if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) return frame;
+      vertices[vertexOut] = [x, y, z];
+    }
+    const color = useRestColor ? item.rest.color : frame[refs[0] ?? -1]?.color ?? item.rest.color;
+    out[planIndex] = {
       ...item.rest,
       vertices,
       color,
-    });
+    };
+  }
+  return out;
+}
+
+function planForFilteredFrame(plan: PlannedPolygon[], sourceIndices: readonly number[]): PlannedPolygon[] {
+  const indexMap = new Map<number, number>();
+  sourceIndices.forEach((sourceIndex, filteredIndex) => {
+    indexMap.set(sourceIndex, filteredIndex);
+  });
+  return plan.map((item, index) => ({
+    ...item,
+    sourceRefs: item.sourceRefs.map((value, sourceRefIndex) =>
+      sourceRefIndex % 2 === 0 ? indexMap.get(value) ?? -1 : value
+    ),
+  }));
+}
+
+function applyRestColorsToFilteredFrame(frame: Polygon[], plan: PlannedPolygon[]): Polygon[] | null {
+  if (frame.length < plan.length) return null;
+  const out: Polygon[] = new Array(plan.length);
+  for (let i = 0; i < plan.length; i++) {
+    const polygon = frame[i];
+    const item = plan[i]!;
+    if (!polygon || polygon.vertices.length !== item.rest.vertices.length) return null;
+    out[i] = {
+      ...item.rest,
+      vertices: polygon.vertices,
+      color: item.rest.color,
+    };
   }
   return out;
 }
 
+function hasTexture(polygon: Polygon): boolean {
+  return !!(polygon.texture || polygon.material?.texture);
+}
+
 export function optimizeAnimatedMeshPolygons(
   result: ParseResult,
   options: OptimizeAnimatedMeshPolygonsOptions = {},
@@ -77,16 +131,124 @@ export function optimizeAnimatedMeshPolygons(
 
   const culledPlan = buildCulledTrianglePlan(result.polygons);
   if (culledPlan.length === 0 || culledPlan.length >= result.polygons.length) return result;
+  const bakedAnimationInfo = getSolidTextureBakedAnimationInfo(result.animation);
+  const sampleSource = bakedAnimationInfo?.source ?? result.animation;
+  const sourceIndices = culledPlan.map((item) => item.originalIndex);
+  const filteredSource = filterGltfAnimationController(
+    sampleSource,
+    sourceIndices,
+  );
+  const frameSource = filteredSource ?? sampleSource;
+  const framePlan = filteredSource ? planForFilteredFrame(culledPlan, sourceIndices) : culledPlan;
+  const restColors = culledPlan.map((item) => item.rest.color);
+  const restSolidTriangles = culledPlan.every((item) => item.rest.vertices.length === 3 && !hasTexture(item.rest));
+  const filteredFrameDirect = filteredSource &&
+    !bakedAnimationInfo &&
+    culledPlan.length === sourceIndices.length &&
+    culledPlan.every((item, index) =>
+      item.rest.vertices.length === 3 &&
+      item.sourceRefs.length === 6 &&
+      item.sourceRefs[0] === sourceIndices[index] &&
+      item.sourceRefs[2] === sourceIndices[index] &&
+      item.sourceRefs[4] === sourceIndices[index]
+    );
+  const sourceFrameSampler =
+    (frameSource as ParseAnimationController & PolyAnimationTriangleFrameSource)[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE];
+  let optimizedVertices = new Float64Array(culledPlan.length * 9);
+  let optimizedColors: Array<string | undefined> = restColors.slice();
+  let optimizedTextureFlags: boolean[] = new Array(culledPlan.length).fill(false);
+  const optimizedFrame: PolyAnimationTriangleFrame = {
+    polygonCount: culledPlan.length,
+    vertices: optimizedVertices,
+    colors: optimizedColors,
+    textureFlags: optimizedTextureFlags,
+    solidTriangles: restSolidTriangles,
+  };
+
+  const animation = {
+    ...result.animation,
+    sample(clip, timeSeconds) {
+      const frame = frameSource!.sample(clip, timeSeconds);
+      if (filteredFrameDirect) return frame;
+      if (filteredSource && bakedAnimationInfo) {
+        return restSolidTriangles && culledPlan.length === sourceIndices.length
+          ? applyRestColorsToFilteredFrame(frame, culledPlan) ??
+            applyPlanToFrame(frame, framePlan, true)
+          : applyPlanToFrame(frame, framePlan, true);
+      }
+      return applyPlanToFrame(frame, framePlan, !!bakedAnimationInfo);
+    },
+  } as ParseAnimationController & PolyAnimationTriangleFrameSource;
+
+  if (sourceFrameSampler && restSolidTriangles) {
+    animation[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE] = (clip, timeSeconds) => {
+      const frame = sourceFrameSampler(clip, timeSeconds);
+      if (!frame) return frame;
+      if (filteredSource) {
+        if (frame.polygonCount < culledPlan.length || frame.vertices.length < culledPlan.length * 9) {
+          return null;
+        }
+        optimizedFrame.polygonCount = culledPlan.length;
+        optimizedFrame.vertices = frame.vertices;
+        optimizedFrame.colors = bakedAnimationInfo ? restColors : frame.colors;
+        optimizedFrame.textureFlags = bakedAnimationInfo ? optimizedTextureFlags : frame.textureFlags;
+        optimizedFrame.solidTriangles = bakedAnimationInfo
+          ? restSolidTriangles
+          : frame.solidTriangles === true;
+        return optimizedFrame;
+      }
+
+      if (optimizedVertices.length < culledPlan.length * 9) {
+        optimizedVertices = new Float64Array(culledPlan.length * 9);
+        optimizedFrame.vertices = optimizedVertices;
+      }
+      if (optimizedColors.length < culledPlan.length) {
+        optimizedColors = new Array(culledPlan.length);
+        optimizedFrame.colors = optimizedColors;
+      }
+      if (optimizedTextureFlags.length < culledPlan.length) {
+        optimizedTextureFlags = new Array(culledPlan.length).fill(false);
+        optimizedFrame.textureFlags = optimizedTextureFlags;
+      }
+
+      let solidTriangles = restSolidTriangles && frame.solidTriangles !== false;
+      for (let planIndex = 0; planIndex < framePlan.length; planIndex++) {
+        const item = framePlan[planIndex]!;
+        const refs = item.sourceRefs;
+        for (let refIndex = 0, vertexOut = 0; refIndex < refs.length; refIndex += 2, vertexOut++) {
+          const sourcePolygonIndex = refs[refIndex]!;
+          const sourceVertexIndex = refs[refIndex + 1]!;
+          if (sourcePolygonIndex < 0 || sourcePolygonIndex >= frame.polygonCount) return null;
+          const sourceOffset = sourcePolygonIndex * 9 + sourceVertexIndex * 3;
+          const targetOffset = planIndex * 9 + vertexOut * 3;
+          if (sourceOffset + 2 >= frame.vertices.length) return null;
+          optimizedVertices[targetOffset] = frame.vertices[sourceOffset]!;
+          optimizedVertices[targetOffset + 1] = frame.vertices[sourceOffset + 1]!;
+          optimizedVertices[targetOffset + 2] = frame.vertices[sourceOffset + 2]!;
+        }
+        const sourcePolygonIndex = refs[0]!;
+        const textureFlag = !!frame.textureFlags?.[sourcePolygonIndex];
+        optimizedTextureFlags[planIndex] = textureFlag;
+        optimizedColors[planIndex] = bakedAnimationInfo
+          ? item.rest.color
+          : frame.colors?.[sourcePolygonIndex] ?? item.rest.color;
+        if (!bakedAnimationInfo && textureFlag) solidTriangles = false;
+      }
+
+      optimizedFrame.polygonCount = culledPlan.length;
+      optimizedFrame.vertices = optimizedVertices;
+      optimizedFrame.colors = optimizedColors;
+      optimizedFrame.textureFlags = optimizedTextureFlags;
+      optimizedFrame.solidTriangles = bakedAnimationInfo ? restSolidTriangles : solidTriangles;
+      return optimizedFrame;
+    };
+  }
+
 
   return {
     ...result,
     polygons: culledPlan.map((item) => item.rest),
-    animation: {
-      ...result.animation,
-      sample(clip, timeSeconds) {
-        return applyPlanToFrame(result.animation!.sample(clip, timeSeconds), culledPlan);
-      },
-    },
+    animation,
     metadata: {
       ...result.metadata,
       triangleCount: culledPlan.length,
diff --git a/packages/core/src/parser/parseGltf.test.ts b/packages/core/src/parser/parseGltf.test.ts
index a9433b1..70f4f21 100644
--- a/packages/core/src/parser/parseGltf.test.ts
+++ b/packages/core/src/parser/parseGltf.test.ts
@@ -1,9 +1,10 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { readFileSync } from "fs";
 import { resolve } from "path";
-import { parseGltf } from "./parseGltf";
+import { filterGltfAnimationController, parseGltf } from "./parseGltf";
 import { bakeSolidTextureSamples } from "./solidTextureSamples";
 import { optimizeAnimatedMeshPolygons } from "../animation/optimizeAnimatedMeshPolygons";
+import { cullInteriorPolygons } from "../cull/cullInteriorPolygons";
 
 // ── Real GLB fixture (lead test — matches voxcss parseMagicaVoxel pattern) ─
 
@@ -170,6 +171,24 @@ describe("parseGltf — animated fixture (FishAnimated.glb)", () => {
     }
   });
 
+  it("can sample a glTF animation through a filtered triangle controller", () => {
+    const result = parseGltf(loadGlbFile("poly-pizza", "animated-robot.glb"), {
+      gridShift: 0,
+      targetSize: 72,
+    });
+    const kept = cullInteriorPolygons(result.polygons);
+    const keptSet = new Set(kept);
+    const keptIndices = result.polygons.flatMap((polygon, index) =>
+      keptSet.has(polygon) ? [index] : []
+    );
+    const filtered = filterGltfAnimationController(result.animation, keptIndices);
+    const running = result.animation?.clips.find((clip) => /running/i.test(clip.name));
+    expect(filtered).toBeDefined();
+    expect(running).toBeDefined();
+    expect(keptIndices.length).toBeLessThan(result.polygons.length);
+    expect(filtered!.sample(running!.name, 0.25)).toHaveLength(keptIndices.length);
+  });
+
   it("can reduce robot animation with a stable animated mesh plan", async () => {
     const parsed = parseGltf(loadGlbFile("poly-pizza", "animated-robot.glb"), {
       gridShift: 0,
@@ -180,11 +199,24 @@ describe("parseGltf — animated fixture (FishAnimated.glb)", () => {
       meshResolution: "lossy",
     });
     const running = optimized.animation?.clips.find((clip) => /running/i.test(clip.name));
+    const kept = cullInteriorPolygons(baked.polygons);
+    const keptSet = new Set(kept);
+    const keptIndices = baked.polygons.flatMap((polygon, index) =>
+      keptSet.has(polygon) ? [index] : []
+    );
     expect(running).toBeDefined();
     expect(optimized.polygons.length).toBeLessThan(baked.polygons.length);
     expect(optimized.polygons.length).toBeGreaterThan(0);
+    expect(optimized.polygons).toHaveLength(keptIndices.length);
     for (const time of [0, 0.25, running!.duration / 2]) {
-      expect(optimized.animation!.sample(running!.name, time)).toHaveLength(optimized.polygons.length);
+      const fullFrame = baked.animation!.sample(running!.name, time);
+      const frame = optimized.animation!.sample(running!.name, time);
+      expect(frame).toHaveLength(optimized.polygons.length);
+      expect(frame.some((polygon) => polygon.texture)).toBe(false);
+      expect(frame[0].color).toBe(optimized.polygons[0].color);
+      for (let i = 0; i < frame.length; i++) {
+        expect(frame[i].vertices).toEqual(fullFrame[keptIndices[i]!]!.vertices);
+      }
     }
   });
 });
diff --git a/packages/core/src/parser/parseGltf.ts b/packages/core/src/parser/parseGltf.ts
index dd9e88b..af95323 100644
--- a/packages/core/src/parser/parseGltf.ts
+++ b/packages/core/src/parser/parseGltf.ts
@@ -539,6 +539,7 @@ function computeWorldMatrices(doc: GltfDoc, localMatrices: Mat4[]): Mat4[] {
 }
 
 interface AnimatedPrimitiveSource {
+  sourceIndex: number;
   meshNode: number | null;
   meshBindWorld: Mat4;
   skinIndex?: number;
@@ -570,6 +571,48 @@ interface RuntimeAnimationClip {
   channels: RuntimeAnimationChannel[];
 }
 
+interface AnimatedPolygonSourceRef {
+  sourceIndex: number;
+  triangleIndex: number;
+}
+
+interface RuntimeSourceTriangleMask {
+  triangleMask: readonly boolean[];
+  activeVertices: readonly number[];
+}
+
+interface GltfAnimationRuntimeInfo {
+  withPolygonFilter(indices: readonly number[]): ParseAnimationController | undefined;
+}
+
+const GLTF_ANIMATION_RUNTIME_INFO = Symbol("polycss.gltfAnimationRuntimeInfo");
+const POLY_ANIMATION_TRIANGLE_FRAME_SOURCE = Symbol.for("polycss.animation.triangleFrameSource");
+
+interface PolyAnimationTriangleFrame {
+  polygonCount: number;
+  vertices: Float64Array;
+  colors?: readonly (string | undefined)[];
+  textureFlags?: readonly boolean[];
+  solidTriangles?: boolean;
+}
+
+interface GltfAnimationController extends ParseAnimationController {
+  [GLTF_ANIMATION_RUNTIME_INFO]?: GltfAnimationRuntimeInfo;
+  [POLY_ANIMATION_TRIANGLE_FRAME_SOURCE]?: (
+    clip: number | string,
+    timeSeconds: number,
+  ) => PolyAnimationTriangleFrame | null | undefined;
+}
+
+export function filterGltfAnimationController(
+  animation: ParseAnimationController | undefined,
+  indices: readonly number[],
+): ParseAnimationController | undefined {
+  return animation
+    ? (animation as GltfAnimationController)[GLTF_ANIMATION_RUNTIME_INFO]?.withPolygonFilter(indices)
+    : undefined;
+}
+
 function sameProjectedVertex(a: Vec3, b: Vec3): boolean {
   return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
 }
@@ -652,7 +695,9 @@ function buildAnimationController(
   doc: GltfDoc,
   bin: Uint8Array,
   sources: AnimatedPrimitiveSource[],
+  polygonRefs: Array<AnimatedPolygonSourceRef | undefined>,
   project: (v: Vec3) => Vec3,
+  projectFrameVertex: (v: Vec3, out: Float64Array, offset: number) => void,
 ): ParseAnimationController | undefined {
   const animations = doc.animations ?? [];
   if (animations.length === 0 || sources.length === 0) return undefined;
@@ -705,6 +750,35 @@ function buildAnimationController(
   const clips = runtimeClips.map((clip) => clip.info);
   if (clips.length === 0) return undefined;
 
+  const sourceMasksFromPolygonFilter = (
+    indices: readonly number[],
+  ): RuntimeSourceTriangleMask[] | undefined => {
+    const masks = sources.map((source) => new Array(source.triangleMask.length).fill(false));
+    for (const index of indices) {
+      const ref = polygonRefs[index];
+      if (!ref) return undefined;
+      const sourceMask = masks[ref.sourceIndex];
+      if (!sourceMask || ref.triangleIndex < 0 || ref.triangleIndex >= sourceMask.length) return undefined;
+      sourceMask[ref.triangleIndex] = true;
+    }
+
+    return masks.map((triangleMask, sourceIndex): RuntimeSourceTriangleMask => {
+      const source = sources[sourceIndex]!;
+      const used = new Set<number>();
+      let triangleOrdinal = 0;
+      for (let i = 0; i + 2 < source.indices.length; i += 3, triangleOrdinal++) {
+        if (!triangleMask[triangleOrdinal]) continue;
+        used.add(source.indices[i]!);
+        used.add(source.indices[i + 1]!);
+        used.add(source.indices[i + 2]!);
+      }
+      return {
+        triangleMask,
+        activeVertices: Array.from(used).sort((a, b) => a - b),
+      };
+    });
+  };
+
   const polygonFromWorldTri = (
     v0World: Vec3,
     v1World: Vec3,
@@ -722,41 +796,68 @@ function buildAnimationController(
     return polygon;
   };
 
-  const sample = (clipRef: number | string, timeSecondsIn: number): Polygon[] => {
-    const clip = typeof clipRef === "number"
-      ? runtimeClips[clipRef]
-      : runtimeClips.find((candidate) => candidate.info.name === clipRef);
-    if (!clip) return [];
-    const duration = clip.info.duration;
-    const timeSeconds = duration > 0
-      ? ((timeSecondsIn % duration) + duration) % duration
-      : Math.max(0, timeSecondsIn);
-
-    const poses = basePoses.map((pose): NodePose => ({
-      translation: pose.translation.slice(),
-      rotation: pose.rotation.slice(),
-      scale: pose.scale.slice(),
-      matrix: pose.matrix ? pose.matrix.slice() as Mat4 : undefined,
-    }));
-
-    for (const channel of clip.channels) {
-      const pose = poses[channel.targetNode];
-      if (!pose) continue;
-      const value = sampleAnimationChannel(channel.sampler, timeSeconds, channel.path);
-      // Animated TRS channels override matrix-based locals per glTF's node
-      // animation model; converting arbitrary matrices to TRS is intentionally
-      // out of scope for this minimal runtime.
-      pose.matrix = undefined;
-      if (channel.path === "translation") pose.translation = value.slice(0, 3);
-      else if (channel.path === "rotation") pose.rotation = normalizeQuat(value.slice(0, 4));
-      else if (channel.path === "scale") pose.scale = value.slice(0, 3);
-    }
+  const createController = (
+    sourceMaskOverrides?: RuntimeSourceTriangleMask[],
+  ): ParseAnimationController => {
+    const activeTriangleCapacity = sources.reduce((sum, source, sourceIndex) => {
+      const mask = sourceMaskOverrides?.[sourceIndex]?.triangleMask ?? source.triangleMask;
+      let count = 0;
+      for (let i = 0; i < mask.length; i++) {
+        if (mask[i]) count++;
+      }
+      return sum + count;
+    }, 0);
+    let triangleFrameVertices = new Float64Array(Math.max(0, activeTriangleCapacity * 9));
+    let triangleFrameColors: Array<string | undefined> = new Array(activeTriangleCapacity);
+    let triangleFrameTextureFlags: boolean[] = new Array(activeTriangleCapacity).fill(false);
+    const triangleFrame: PolyAnimationTriangleFrame = {
+      polygonCount: 0,
+      vertices: triangleFrameVertices,
+      colors: triangleFrameColors,
+      textureFlags: triangleFrameTextureFlags,
+      solidTriangles: true,
+    };
 
-    const worldMatrices = computeWorldMatrices(doc, poses.map(poseLocalMatrix));
-    const polygons: Polygon[] = [];
+    const sampleWorldMatrices = (clipRef: number | string, timeSecondsIn: number): Mat4[] | null => {
+      const clip = typeof clipRef === "number"
+        ? runtimeClips[clipRef]
+        : runtimeClips.find((candidate) => candidate.info.name === clipRef);
+      if (!clip) return null;
+      const duration = clip.info.duration;
+      const timeSeconds = duration > 0
+        ? ((timeSecondsIn % duration) + duration) % duration
+        : Math.max(0, timeSecondsIn);
+
+      const poses = basePoses.map((pose): NodePose => ({
+        translation: pose.translation.slice(),
+        rotation: pose.rotation.slice(),
+        scale: pose.scale.slice(),
+        matrix: pose.matrix ? pose.matrix.slice() as Mat4 : undefined,
+      }));
+
+      for (const channel of clip.channels) {
+        const pose = poses[channel.targetNode];
+        if (!pose) continue;
+        const value = sampleAnimationChannel(channel.sampler, timeSeconds, channel.path);
+        // Animated TRS channels override matrix-based locals per glTF's node
+        // animation model; converting arbitrary matrices to TRS is intentionally
+        // out of scope for this minimal runtime.
+        pose.matrix = undefined;
+        if (channel.path === "translation") pose.translation = value.slice(0, 3);
+        else if (channel.path === "rotation") pose.rotation = normalizeQuat(value.slice(0, 4));
+        else if (channel.path === "scale") pose.scale = value.slice(0, 3);
+      }
 
-    for (const source of sources) {
-      const worldPositions: Vec3[] = [];
+      return computeWorldMatrices(doc, poses.map(poseLocalMatrix));
+    };
+
+    const computeSourceWorldPositions = (
+      source: AnimatedPrimitiveSource,
+      sourceMask: RuntimeSourceTriangleMask | undefined,
+      worldMatrices: Mat4[],
+    ): Array<Vec3 | undefined> => {
+      const activeVertices = sourceMask?.activeVertices;
+      const worldPositions: Array<Vec3 | undefined> = new Array(source.positions.length);
       if (
         source.skinIndex !== undefined &&
         source.joints &&
@@ -764,12 +865,14 @@ function buildAnimationController(
         skins[source.skinIndex]
       ) {
         const skin = skins[source.skinIndex];
-        for (let i = 0; i < source.positions.length; i++) {
+        const sourceJoints = source.joints;
+        const sourceWeights = source.weights;
+        const skinVertex = (i: number): void => {
           const bindPosition = source.positions[i];
           let blended: Vec3 = [0, 0, 0];
           let weightSum = 0;
-          const joints = source.joints[i] ?? [];
-          const weights = source.weights[i] ?? [];
+          const joints = sourceJoints[i] ?? [];
+          const weights = sourceWeights[i] ?? [];
           for (let j = 0; j < 4; j++) {
             const weight = weights[j] ?? 0;
             if (weight <= 0) continue;
@@ -782,42 +885,131 @@ function buildAnimationController(
             blended = addVec3(blended, scaleVec3(transformPoint(jointMatrix, bindPosition), weight));
             weightSum += weight;
           }
-          worldPositions.push(weightSum > 0
+          worldPositions[i] = weightSum > 0
             ? scaleVec3(blended, 1 / weightSum)
-            : transformPoint(source.meshBindWorld, bindPosition));
+            : transformPoint(source.meshBindWorld, bindPosition);
+        };
+        if (activeVertices) {
+          for (const vertexIndex of activeVertices) skinVertex(vertexIndex);
+        } else {
+          for (let i = 0; i < source.positions.length; i++) skinVertex(i);
         }
       } else {
         const meshWorld = source.meshNode !== null
           ? (worldMatrices[source.meshNode] ?? source.meshBindWorld)
           : source.meshBindWorld;
-        for (const position of source.positions) {
-          worldPositions.push(transformPoint(meshWorld, position));
+        const transformVertex = (i: number): void => {
+          worldPositions[i] = transformPoint(meshWorld, source.positions[i]);
+        };
+        if (activeVertices) {
+          for (const vertexIndex of activeVertices) transformVertex(vertexIndex);
+        } else {
+          for (let i = 0; i < source.positions.length; i++) transformVertex(i);
         }
       }
+      return worldPositions;
+    };
 
-      let triangleOrdinal = 0;
-      for (let i = 0; i + 2 < source.indices.length; i += 3, triangleOrdinal++) {
-        if (!source.triangleMask[triangleOrdinal]) continue;
-        const i0 = source.indices[i];
-        const i1 = source.indices[i + 1];
-        const i2 = source.indices[i + 2];
-        const v0 = worldPositions[i0];
-        const v1 = worldPositions[i1];
-        const v2 = worldPositions[i2];
-        if (!v0 || !v1 || !v2) continue;
-        let triUvs: Vec2[] | undefined;
-        if (source.uvs && source.texture) {
-          const u0 = source.uvs[i0], u1 = source.uvs[i1], u2 = source.uvs[i2];
-          if (u0 && u1 && u2) triUvs = [u0, u1, u2];
+    const sample = (clipRef: number | string, timeSecondsIn: number): Polygon[] => {
+      const worldMatrices = sampleWorldMatrices(clipRef, timeSecondsIn);
+      if (!worldMatrices) return [];
+      const polygons: Polygon[] = [];
+
+      for (let sourceIndex = 0; sourceIndex < sources.length; sourceIndex++) {
+        const source = sources[sourceIndex]!;
+        const sourceMask = sourceMaskOverrides?.[sourceIndex];
+        const triangleMask = sourceMask?.triangleMask ?? source.triangleMask;
+        const worldPositions = computeSourceWorldPositions(source, sourceMask, worldMatrices);
+
+        let triangleOrdinal = 0;
+        for (let i = 0; i + 2 < source.indices.length; i += 3, triangleOrdinal++) {
+          if (!triangleMask[triangleOrdinal]) continue;
+          const i0 = source.indices[i];
+          const i1 = source.indices[i + 1];
+          const i2 = source.indices[i + 2];
+          const v0 = worldPositions[i0];
+          const v1 = worldPositions[i1];
+          const v2 = worldPositions[i2];
+          if (!v0 || !v1 || !v2) continue;
+          let triUvs: Vec2[] | undefined;
+          if (source.uvs && source.texture) {
+            const u0 = source.uvs[i0], u1 = source.uvs[i1], u2 = source.uvs[i2];
+            if (u0 && u1 && u2) triUvs = [u0, u1, u2];
+          }
+          const polygon = polygonFromWorldTri(v0, v1, v2, source.color, source.texture, triUvs);
+          if (polygon) polygons.push(polygon);
         }
-        const polygon = polygonFromWorldTri(v0, v1, v2, source.color, source.texture, triUvs);
-        if (polygon) polygons.push(polygon);
       }
-    }
-    return polygons;
+      return polygons;
+    };
+
+    const sampleTriangleFrame = (
+      clipRef: number | string,
+      timeSecondsIn: number,
+    ): PolyAnimationTriangleFrame | null => {
+      const worldMatrices = sampleWorldMatrices(clipRef, timeSecondsIn);
+      if (!worldMatrices) return null;
+      if (triangleFrameVertices.length < activeTriangleCapacity * 9) {
+        triangleFrameVertices = new Float64Array(activeTriangleCapacity * 9);
+        triangleFrame.vertices = triangleFrameVertices;
+      }
+      if (triangleFrameColors.length < activeTriangleCapacity) {
+        triangleFrameColors = new Array(activeTriangleCapacity);
+        triangleFrame.colors = triangleFrameColors;
+      }
+      if (triangleFrameTextureFlags.length < activeTriangleCapacity) {
+        triangleFrameTextureFlags = new Array(activeTriangleCapacity).fill(false);
+        triangleFrame.textureFlags = triangleFrameTextureFlags;
+      }
+      let polygonCount = 0;
+      let writeOffset = 0;
+      let hasTexture = false;
+
+      for (let sourceIndex = 0; sourceIndex < sources.length; sourceIndex++) {
+        const source = sources[sourceIndex]!;
+        const sourceMask = sourceMaskOverrides?.[sourceIndex];
+        const triangleMask = sourceMask?.triangleMask ?? source.triangleMask;
+        const worldPositions = computeSourceWorldPositions(source, sourceMask, worldMatrices);
+
+        let triangleOrdinal = 0;
+        for (let i = 0; i + 2 < source.indices.length; i += 3, triangleOrdinal++) {
+          if (!triangleMask[triangleOrdinal]) continue;
+          const i0 = source.indices[i]!;
+          const i1 = source.indices[i + 1]!;
+          const i2 = source.indices[i + 2]!;
+          const v0 = worldPositions[i0];
+          const v1 = worldPositions[i1];
+          const v2 = worldPositions[i2];
+          if (!v0 || !v1 || !v2) continue;
+          projectFrameVertex(v0, triangleFrameVertices, writeOffset);
+          projectFrameVertex(v1, triangleFrameVertices, writeOffset + 3);
+          projectFrameVertex(v2, triangleFrameVertices, writeOffset + 6);
+          triangleFrameColors[polygonCount] = source.color;
+          const textured = !!source.texture;
+          triangleFrameTextureFlags[polygonCount] = textured;
+          if (textured) hasTexture = true;
+          polygonCount++;
+          writeOffset += 9;
+        }
+      }
+
+      triangleFrame.polygonCount = polygonCount;
+      triangleFrame.solidTriangles = !hasTexture;
+      return triangleFrame;
+    };
+
+    const controller: GltfAnimationController = { clips, sample };
+    controller[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE] = sampleTriangleFrame;
+    controller[GLTF_ANIMATION_RUNTIME_INFO] = {
+      withPolygonFilter(indices) {
+        const masks = sourceMasksFromPolygonFilter(indices);
+        return masks ? createController(masks) : undefined;
+      },
+    };
+    return controller;
   };
 
-  return { clips, sample };
+  return createController();
 }
 
 export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOptions): ParseResult {
@@ -855,10 +1047,12 @@ export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOp
     texture?: string;
     uvs?: Vec2[];
     source?: AnimatedPrimitiveSource;
+    sourceIndex?: number;
     sourceTriangleIndex?: number;
   }
   const rawTris: RawTri[] = [];
   const animatedSources: AnimatedPrimitiveSource[] = [];
+  const animatedPolygonRefs: Array<AnimatedPolygonSourceRef | undefined> = [];
   const meshNames: string[] = (doc.meshes ?? []).map((m, i) => m.name ?? `mesh_${i}`);
   const materialNames: string[] = (doc.materials ?? []).map((m, i) => m.name ?? `material_${i}`);
 
@@ -920,6 +1114,7 @@ export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOp
         const joints = readAccessorTupleArray(doc, bin, prim.attributes.JOINTS_0, 4, vertCount);
         const weights = readAccessorTupleArray(doc, bin, prim.attributes.WEIGHTS_0, 4, vertCount);
         animatedSource = {
+          sourceIndex: animatedSources.length,
           meshNode,
           meshBindWorld: world,
           skinIndex: meshNode !== null ? doc.nodes?.[meshNode]?.skin : undefined,
@@ -947,7 +1142,17 @@ export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOp
           const u0 = uvs[indices[i]], u1 = uvs[indices[i + 1]], u2 = uvs[indices[i + 2]];
           if (u0 && u1 && u2) triUvs = [u0, u1, u2];
         }
-        rawTris.push({ v0, v1, v2, color, texture, uvs: triUvs, source: animatedSource, sourceTriangleIndex });
+        rawTris.push({
+          v0,
+          v1,
+          v2,
+          color,
+          texture,
+          uvs: triUvs,
+          source: animatedSource,
+          sourceIndex: animatedSource?.sourceIndex,
+          sourceTriangleIndex,
+        });
       }
     }
   }
@@ -1010,6 +1215,17 @@ export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOp
         round((x - minX) * scale + gridShift),
         round((y - minY) * scale + gridShift),
       ];
+  const projectFrameVertex = upAxis === "z"
+    ? (v: Vec3, out: Float64Array, offset: number): void => {
+        out[offset] = round((v[0] - minX) * scale + gridShift);
+        out[offset + 1] = round((v[1] - minY) * scale + gridShift);
+        out[offset + 2] = round((v[2] - minZ) * scale + gridShift);
+      }
+    : (v: Vec3, out: Float64Array, offset: number): void => {
+        out[offset] = round((v[2] - minZ) * scale + gridShift);
+        out[offset + 1] = round((v[0] - minX) * scale + gridShift);
+        out[offset + 2] = round((v[1] - minY) * scale + gridShift);
+      };
   const polygons: Polygon[] = [];
   for (const t of rawTris) {
     const v0 = project(t.v0);
@@ -1027,8 +1243,20 @@ export function parseGltf(input: ArrayBuffer | Uint8Array, options?: GltfParseOp
     if (t.texture) p.texture = t.texture;
     if (t.uvs) p.uvs = t.uvs;
     polygons.push(p);
+    animatedPolygonRefs.push(
+      t.sourceIndex !== undefined && t.sourceTriangleIndex !== undefined
+        ? { sourceIndex: t.sourceIndex, triangleIndex: t.sourceTriangleIndex }
+        : undefined,
+    );
   }
-  const animation = buildAnimationController(doc, bin, animatedSources, project);
+  const animation = buildAnimationController(
+    doc,
+    bin,
+    animatedSources,
+    animatedPolygonRefs,
+    project,
+    projectFrameVertex,
+  );
 
   return {
     polygons,
diff --git a/packages/core/src/parser/solidTextureSamples.test.ts b/packages/core/src/parser/solidTextureSamples.test.ts
new file mode 100644
index 0000000..27182d8
--- /dev/null
+++ b/packages/core/src/parser/solidTextureSamples.test.ts
@@ -0,0 +1,91 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Polygon } from "../types";
+import type { ParseResult } from "./types";
+import { bakeSolidTextureSamples, getSolidTextureBakedAnimationInfo } from "./solidTextureSamples";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function installSolidTextureEnv(color: [number, number, number, number]): void {
+  class FakeImage {
+    naturalWidth = 1;
+    naturalHeight = 1;
+    width = 1;
+    height = 1;
+    onload: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+
+    set src(_value: string) {
+      queueMicrotask(() => this.onload?.());
+    }
+  }
+
+  vi.stubGlobal("Image", FakeImage);
+  vi.stubGlobal("document", {
+    createElement(tagName: string) {
+      if (tagName !== "canvas") throw new Error(`unexpected element ${tagName}`);
+      return {
+        width: 0,
+        height: 0,
+        getContext(type: string) {
+          if (type !== "2d") return null;
+          return {
+            drawImage() {},
+            getImageData() {
+              return { data: color };
+            },
+          };
+        },
+      };
+    },
+  });
+}
+
+function texturedTriangle(vertices: Polygon["vertices"]): Polygon {
+  const uvs: Polygon["uvs"] = [[0, 0], [1, 0], [0, 1]];
+  return {
+    vertices,
+    color: "#000000",
+    texture: "texture.png",
+    uvs,
+    textureTriangles: [{ uvs: [uvs[0], uvs[1], uvs[2]] }],
+  };
+}
+
+describe("bakeSolidTextureSamples", () => {
+  it("reuses baked solid texture colors for animated samples", async () => {
+    installSolidTextureEnv([10, 20, 30, 255]);
+    const rest = texturedTriangle([[0, 0, 0], [1, 0, 0], [0, 1, 0]]);
+    const animated = texturedTriangle([[0, 0, 0], [2, 0, 0], [0, 2, 0]]);
+    let sampleCalls = 0;
+    const result: ParseResult = {
+      polygons: [rest],
+      objectUrls: [],
+      dispose() {},
+      warnings: [],
+      animation: {
+        clips: [{ index: 0, name: "move", duration: 1, channelCount: 1 }],
+        sample() {
+          sampleCalls++;
+          return [animated];
+        },
+      },
+    };
+
+    const baked = await bakeSolidTextureSamples(result);
+    const frame = baked.animation!.sample("move", 0.5);
+    const bakedAnimationInfo = getSolidTextureBakedAnimationInfo(baked.animation);
+
+    expect(sampleCalls).toBe(1);
+    expect(bakedAnimationInfo?.source).toBe(result.animation);
+    expect(bakedAnimationInfo?.bakedColorEntries).toEqual([{ index: 0, color: "#0a141e" }]);
+    expect(baked.polygons[0].color).toBe("#0a141e");
+    expect(baked.polygons[0].texture).toBeUndefined();
+    expect(frame[0].vertices).toEqual(animated.vertices);
+    expect(frame[0].color).toBe("#0a141e");
+    expect(frame[0].texture).toBeUndefined();
+    expect(frame[0].uvs).toBeUndefined();
+    expect(frame[0].textureTriangles).toBeUndefined();
+  });
+});
diff --git a/packages/core/src/parser/solidTextureSamples.ts b/packages/core/src/parser/solidTextureSamples.ts
index 61842eb..2eadff0 100644
--- a/packages/core/src/parser/solidTextureSamples.ts
+++ b/packages/core/src/parser/solidTextureSamples.ts
@@ -1,5 +1,5 @@
 import type { Polygon, TextureTriangle, Vec2 } from "../types";
-import type { ParseResult } from "./types";
+import type { ParseAnimationController, ParseResult } from "./types";
 
 export interface SolidTextureSampleOptions {
   /**
@@ -62,6 +62,37 @@ interface ColorStats {
   count: number;
 }
 
+export interface SolidTextureBakedColorEntry {
+  index: number;
+  color: string;
+}
+
+export interface SolidTextureBakedAnimationInfo {
+  source: ParseAnimationController;
+  bakedColorEntries: readonly SolidTextureBakedColorEntry[];
+}
+
+export const SOLID_TEXTURE_BAKED_ANIMATION_INFO: unique symbol = Symbol(
+  "polycss.solidTextureBakedAnimationInfo",
+);
+const POLY_ANIMATION_TRIANGLE_FRAME_SOURCE = Symbol.for("polycss.animation.triangleFrameSource");
+
+interface PolyAnimationTriangleFrame {
+  polygonCount: number;
+  vertices: Float64Array;
+  colors?: readonly (string | undefined)[];
+  textureFlags?: readonly boolean[];
+  solidTriangles?: boolean;
+}
+
+interface SolidTextureBakedAnimation extends ParseAnimationController {
+  [SOLID_TEXTURE_BAKED_ANIMATION_INFO]?: SolidTextureBakedAnimationInfo;
+  [POLY_ANIMATION_TRIANGLE_FRAME_SOURCE]?: (
+    clip: number | string,
+    timeSeconds: number,
+  ) => PolyAnimationTriangleFrame | null | undefined;
+}
+
 const DEFAULT_MAX_TEXTURE_PIXELS = 16 * 1024 * 1024;
 const DEFAULT_COLOR_TOLERANCE = 2;
 const SMOOTH_SWATCH_TOLERANCE = 32;
@@ -374,6 +405,27 @@ function bakePolygon(polygon: Polygon, color: string): Polygon {
   };
 }
 
+export function bakeSolidTextureSampledAnimationFrame(
+  frame: Polygon[],
+  bakedColorEntries: readonly SolidTextureBakedColorEntry[],
+): Polygon[] {
+  const nextFrame = frame.slice();
+  for (let i = 0; i < bakedColorEntries.length; i++) {
+    const entry = bakedColorEntries[i]!;
+    const polygon = frame[entry.index];
+    if (polygon) nextFrame[entry.index] = bakePolygon(polygon, entry.color);
+  }
+  return nextFrame;
+}
+
+export function getSolidTextureBakedAnimationInfo(
+  animation: ParseAnimationController | undefined,
+): SolidTextureBakedAnimationInfo | undefined {
+  return animation
+    ? (animation as SolidTextureBakedAnimation)[SOLID_TEXTURE_BAKED_ANIMATION_INFO]
+    : undefined;
+}
+
 interface SolidTextureBaker {
   bake(polygons: Polygon[]): { polygons: Polygon[]; changed: boolean };
 }
@@ -436,18 +488,72 @@ export async function bakeSolidTextureSamples(
   if (!baker) return result;
 
   const baked = baker.bake(result.polygons);
-  if (!baked.changed && !result.animation) return result;
+  if (!baked.changed) return result;
+  const bakedColorEntries: SolidTextureBakedColorEntry[] = [];
+  for (let index = 0; index < baked.polygons.length; index++) {
+    const polygon = baked.polygons[index]!;
+    const color = polygon.color;
+    if (polygon !== result.polygons[index] && color) {
+      bakedColorEntries.push({ index, color });
+    }
+  }
+  const animation = result.animation;
+  const bakedAnimation: ParseAnimationController | undefined = animation
+    ? {
+        ...animation,
+        sample(clip, timeSeconds) {
+          return bakeSolidTextureSampledAnimationFrame(
+            animation.sample(clip, timeSeconds),
+            bakedColorEntries,
+          );
+        },
+      }
+    : animation;
+  if (bakedAnimation && animation) {
+    const sourceFrameSampler =
+      (animation as SolidTextureBakedAnimation)[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE];
+    if (sourceFrameSampler) {
+      const bakedColorByIndex = new Map(bakedColorEntries.map((entry) => [entry.index, entry.color]));
+      let colors: Array<string | undefined> = [];
+      const bakedFrame: PolyAnimationTriangleFrame = {
+        polygonCount: 0,
+        vertices: new Float64Array(0),
+        colors,
+        solidTriangles: false,
+      };
+      (bakedAnimation as SolidTextureBakedAnimation)[POLY_ANIMATION_TRIANGLE_FRAME_SOURCE] = (
+        clip,
+        timeSeconds,
+      ) => {
+        const frame = sourceFrameSampler(clip, timeSeconds);
+        if (!frame) return frame;
+        if (colors.length < frame.polygonCount) {
+          colors = new Array(frame.polygonCount);
+          bakedFrame.colors = colors;
+        }
+        const textureFlags = frame.textureFlags;
+        let solidTriangles = frame.solidTriangles === true || !!textureFlags;
+        for (let i = 0; i < frame.polygonCount; i++) {
+          const bakedColor = bakedColorByIndex.get(i);
+          colors[i] = bakedColor ?? frame.colors?.[i];
+          if (textureFlags?.[i] && !bakedColor) solidTriangles = false;
+        }
+        bakedFrame.polygonCount = frame.polygonCount;
+        bakedFrame.vertices = frame.vertices;
+        bakedFrame.textureFlags = textureFlags;
+        bakedFrame.solidTriangles = solidTriangles;
+        return bakedFrame;
+      };
+    }
+    (bakedAnimation as SolidTextureBakedAnimation)[SOLID_TEXTURE_BAKED_ANIMATION_INFO] = {
+      source: animation,
+      bakedColorEntries,
+    };
+  }
 
   return {
     ...result,
     polygons: baked.polygons,
-    animation: result.animation
-      ? {
-          ...result.animation,
-          sample(clip, timeSeconds) {
-            return baker.bake(result.animation!.sample(clip, timeSeconds)).polygons;
-          },
-        }
-      : result.animation,
+    animation: bakedAnimation,
   };
 }
diff --git a/packages/polycss/src/api/createPolyScene.ts b/packages/polycss/src/api/createPolyScene.ts
index 34e118b..73341c8 100644
--- a/packages/polycss/src/api/createPolyScene.ts
+++ b/packages/polycss/src/api/createPolyScene.ts
@@ -57,6 +57,7 @@ import {
   renderPolygonsWithTextureAtlas,
   renderPolygonsWithTextureAtlasAsync,
   renderPolygonsWithStableTriangles,
+  updateStableTriangleFrame,
   updatePolygonsWithStableTopology,
   type TextureQuality,
   type PolyRenderStrategiesOption,
@@ -236,7 +237,7 @@ export interface PolyMeshHandle {
 // Internal-only async update hook for large imperative scene users. Keeping it
 // off PolyMeshHandle avoids turning a debug-workbench long-task fix into a
 // public API contract that React/Vue also need to mirror.
-interface InternalPolyMeshHandle extends PolyMeshHandle {
+interface InternalPolyMeshHandle extends PolyMeshHandle, PolyAnimationTriangleFrameTarget {
   setPolygonsChunked(polygons: Polygon[], options?: {
     merge?: boolean;
     stableDom?: boolean;
@@ -285,6 +286,7 @@ export interface PolySceneHandle {
 
 const DEFAULT_ZOOM = 1;
 const DEFAULT_TILE = BASE_TILE;
+const POLY_ANIMATION_TRIANGLE_FRAME_TARGET = Symbol.for("polycss.animation.triangleFrameTarget");
 // Sentinel that keeps broad camera DOM culling disabled once a mesh proves
 // it has non-voxel normals; callers never inspect group contents directly.
 const NON_CULLABLE_CAMERA_GROUP: CameraCullNormalGroup = {
@@ -311,6 +313,20 @@ interface InternalSetPolygonsOptions {
   stableTriangleMatrixDecimals?: number;
 }
 
+interface PolyAnimationTriangleFrame {
+  polygonCount: number;
+  vertices: ArrayLike<number>;
+  colors?: readonly (string | undefined)[];
+  solidTriangles?: boolean;
+}
+
+interface PolyAnimationTriangleFrameTarget {
+  [POLY_ANIMATION_TRIANGLE_FRAME_TARGET]?: (
+    frame: PolyAnimationTriangleFrame,
+    options?: InternalSetPolygonsOptions,
+  ) => boolean;
+}
+
 function strategiesEqual(
   a: PolyRenderStrategiesOption | undefined,
   b: PolyRenderStrategiesOption | undefined,
@@ -1407,8 +1423,125 @@ export function createPolyScene(
       bakedRotation: (transformIn.rotation ? [...transformIn.rotation] : [0, 0, 0]) as Vec3,
     };
 
+    let currentTriangleFrame: PolyAnimationTriangleFrame | null = null;
+    let currentTriangleFrameVersion = 0;
+    let materializedTriangleFrameVersion = -1;
+    let materializedTriangleFramePolygons: Polygon[] | null = null;
+
+    function clearCurrentTriangleFrame(): void {
+      currentTriangleFrame = null;
+      materializedTriangleFramePolygons = null;
+      materializedTriangleFrameVersion = -1;
+    }
+
+    function currentPolygons(): Polygon[] {
+      const frame = currentTriangleFrame;
+      if (!frame || frame.polygonCount !== entry.polygons.length) return entry.polygons;
+      if (
+        materializedTriangleFramePolygons &&
+        materializedTriangleFrameVersion === currentTriangleFrameVersion
+      ) {
+        return materializedTriangleFramePolygons;
+      }
+      const values = frame.vertices;
+      const out: Polygon[] = new Array(frame.polygonCount);
+      for (let polygonIndex = 0; polygonIndex < frame.polygonCount; polygonIndex++) {
+        const base = entry.polygons[polygonIndex]!;
+        const offset = polygonIndex * 9;
+        out[polygonIndex] = {
+          ...base,
+          color: frame.colors?.[polygonIndex] ?? base.color,
+          vertices: [
+            [values[offset]!, values[offset + 1]!, values[offset + 2]!] as Vec3,
+            [values[offset + 3]!, values[offset + 4]!, values[offset + 5]!] as Vec3,
+            [values[offset + 6]!, values[offset + 7]!, values[offset + 8]!] as Vec3,
+          ],
+        };
+      }
+      materializedTriangleFramePolygons = out;
+      materializedTriangleFrameVersion = currentTriangleFrameVersion;
+      return out;
+    }
+
+    function applyStableTopologyUpdate(
+      options: InternalSetPolygonsOptions | undefined,
+      shouldRecomputeAutoCenter: boolean,
+    ): boolean {
+      const colorOnlyStableTriangleUpdate =
+        options?.stableTriangleUpdateMode === "color-only";
+      entry.stableTriangleColorFrame++;
+      const shouldSkipTransformOrigin =
+        entry.stableDom && !shouldRecomputeAutoCenter;
+      if (!shouldSkipTransformOrigin) applyTransformOrigin(entry.polygons);
+      if (entry.stableDom && !entry.hasBuckets) {
+        const renderOptions = {
+          doc,
+          directionalLight: currentOptions.directionalLight,
+          ambientLight: currentOptions.ambientLight,
+          textureLighting: currentOptions.textureLighting,
+          textureQuality: currentOptions.textureQuality,
+        };
+        const allStableTriangles =
+          entry.rendered.length === entry.polygons.length &&
+          entry.rendered.every((item) => item.kind === "triangle");
+        const optimizeStableTopology =
+          entry.stableDom && !shouldRecomputeAutoCenter;
+        const solidPaintDefaults = allStableTriangles || optimizeStableTopology
+          ? {}
+          : getSolidPaintDefaults(entry.polygons, renderOptions);
+        if (!allStableTriangles) applySolidPaintVars(entry.wrapper, solidPaintDefaults);
+        const stableTopologyOptions = {
+          ...renderOptions,
+          solidPaintDefaults,
+          optimizeStableTriangleStyle: true,
+          stableTriangleDebug: options?.stableTriangleDebug,
+          stableTriangleUpdateMode: options?.stableTriangleUpdateMode,
+          stableTriangleColorPolicy: options?.stableTriangleColorPolicy,
+          stableTriangleColorSteps: options?.stableTriangleColorSteps,
+          stableTriangleColorFreezeFrames: options?.stableTriangleColorFreezeFrames,
+          stableTriangleColorBudget: options?.stableTriangleColorBudget,
+          stableTriangleColorMaxAge: options?.stableTriangleColorMaxAge,
+          stableTriangleColorMaxStep: options?.stableTriangleColorMaxStep,
+          stableTriangleMatrixDecimals: options?.stableTriangleMatrixDecimals,
+          stableTriangleColorFrame: entry.stableTriangleColorFrame,
+        } as Parameters<typeof updatePolygonsWithStableTopology>[2] & {
+          optimizeStableTriangleStyle: boolean;
+          stableTriangleDebug?: "transform-only" | "plan-only";
+          stableTriangleUpdateMode?: "full" | "transform-only" | "color-only";
+          stableTriangleColorPolicy?: "cadence" | "adaptive";
+          stableTriangleColorSteps?: number;
+          stableTriangleColorFreezeFrames?: number;
+          stableTriangleColorBudget?: number;
+          stableTriangleColorMaxAge?: number;
+          stableTriangleColorMaxStep?: number;
+          stableTriangleMatrixDecimals?: number;
+          stableTriangleColorFrame?: number;
+        };
+        if (
+          updatePolygonsWithStableTopology(
+            entry.rendered,
+            entry.polygons,
+            stableTopologyOptions,
+          )
+        ) {
+          if (!colorOnlyStableTriangleUpdate) {
+            recomputeCameraCullGroups(entry);
+            syncMountedRenderedForCameraChange(entry, true);
+            if (shouldRecomputeAutoCenter) recomputeAutoCenter();
+          }
+          return true;
+        }
+      }
+      if (shouldSkipTransformOrigin) applyTransformOrigin(entry.polygons);
+      return false;
+    }
+
     const handle: InternalPolyMeshHandle = {
-      polygons: sourcePolygons,
+      get polygons() { return currentPolygons(); },
+      set polygons(polygons: Polygon[]) {
+        clearCurrentTriangleFrame();
+        entry.polygons = polygons;
+      },
       element: wrapper,
       id: transformIn.id,
       get transform() { return transform; },
@@ -1428,34 +1561,56 @@ export function createPolyScene(
         entry.stableDom = stableDomOnUpdate;
         entry.voxelSource = undefined;
         entry.polygons = preparePolygons(polygons, mergeOnUpdate);
+        clearCurrentTriangleFrame();
         handle.polygons = entry.polygons;
         const shouldRecomputeAutoCenter = options?.recomputeAutoCenter ?? true;
-        const colorOnlyStableTriangleUpdate =
-          options?.stableTriangleUpdateMode === "color-only";
-        entry.stableTriangleColorFrame++;
-        const shouldSkipTransformOrigin =
-          entry.stableDom && !shouldRecomputeAutoCenter;
-        if (!shouldSkipTransformOrigin) applyTransformOrigin(entry.polygons);
-        if (entry.stableDom && !entry.hasBuckets) {
-          const renderOptions = {
+        if (applyStableTopologyUpdate(options, shouldRecomputeAutoCenter)) return;
+        renderEntry(entry);
+        if (shouldRecomputeAutoCenter) recomputeAutoCenter();
+      },
+      [POLY_ANIMATION_TRIANGLE_FRAME_TARGET](
+        frame: PolyAnimationTriangleFrame,
+        options?: InternalSetPolygonsOptions,
+      ) {
+        const nextMergeOnUpdate = options?.merge ?? mergeOnUpdate;
+        const nextStableDomOnUpdate = options?.stableDom ?? stableDomOnUpdate;
+        if (
+          !frame.solidTriangles ||
+          !nextStableDomOnUpdate ||
+          nextMergeOnUpdate ||
+          transformIn.meshResolution !== undefined ||
+          entry.hasBuckets ||
+          frame.polygonCount !== entry.polygons.length ||
+          frame.vertices.length < frame.polygonCount * 9 ||
+          entry.rendered.length !== frame.polygonCount
+        ) {
+          return false;
+        }
+        for (let i = 0; i < entry.rendered.length; i++) {
+          const rendered = entry.rendered[i];
+          const polygon = entry.polygons[i];
+          if (
+            rendered?.kind !== "triangle" ||
+            rendered.polygonIndex !== i ||
+            !polygon ||
+            polygon.vertices.length !== 3 ||
+            polygon.texture ||
+            polygon.material?.texture
+          ) {
+            return false;
+          }
+        }
+
+        const shouldRecomputeAutoCenter = options?.recomputeAutoCenter ?? true;
+        if (!shouldRecomputeAutoCenter) {
+          const colorFrame = entry.stableTriangleColorFrame + 1;
+          const stableTopologyOptions = {
             doc,
             directionalLight: currentOptions.directionalLight,
             ambientLight: currentOptions.ambientLight,
             textureLighting: currentOptions.textureLighting,
             textureQuality: currentOptions.textureQuality,
-          };
-          const allStableTriangles =
-            entry.rendered.length === entry.polygons.length &&
-            entry.rendered.every((item) => item.kind === "triangle");
-          const optimizeStableTopology =
-            entry.stableDom && !shouldRecomputeAutoCenter;
-          const solidPaintDefaults = allStableTriangles || optimizeStableTopology
-            ? {}
-            : getSolidPaintDefaults(entry.polygons, renderOptions);
-          if (!allStableTriangles) applySolidPaintVars(entry.wrapper, solidPaintDefaults);
-          const stableTopologyOptions = {
-            ...renderOptions,
-            solidPaintDefaults,
+            solidPaintDefaults: {},
             optimizeStableTriangleStyle: true,
             stableTriangleDebug: options?.stableTriangleDebug,
             stableTriangleUpdateMode: options?.stableTriangleUpdateMode,
@@ -1466,8 +1621,8 @@ export function createPolyScene(
             stableTriangleColorMaxAge: options?.stableTriangleColorMaxAge,
             stableTriangleColorMaxStep: options?.stableTriangleColorMaxStep,
             stableTriangleMatrixDecimals: options?.stableTriangleMatrixDecimals,
-            stableTriangleColorFrame: entry.stableTriangleColorFrame,
-          } as Parameters<typeof updatePolygonsWithStableTopology>[2] & {
+            stableTriangleColorFrame: colorFrame,
+          } as Parameters<typeof updateStableTriangleFrame>[3] & {
             optimizeStableTriangleStyle: boolean;
             stableTriangleDebug?: "transform-only" | "plan-only";
             stableTriangleUpdateMode?: "full" | "transform-only" | "color-only";
@@ -1481,29 +1636,68 @@ export function createPolyScene(
             stableTriangleColorFrame?: number;
           };
           if (
-            updatePolygonsWithStableTopology(
+            updateStableTriangleFrame(
               entry.rendered,
               entry.polygons,
+              frame,
               stableTopologyOptions,
             )
           ) {
-            if (!colorOnlyStableTriangleUpdate) {
-              recomputeCameraCullGroups(entry);
-              syncMountedRenderedForCameraChange(entry, true);
-              if (shouldRecomputeAutoCenter) recomputeAutoCenter();
-            }
-            return;
+            polygonUpdateVersion++;
+            mergeOnUpdate = nextMergeOnUpdate;
+            stableDomOnUpdate = nextStableDomOnUpdate;
+            entry.stableDom = stableDomOnUpdate;
+            entry.voxelSource = undefined;
+            entry.stableTriangleColorFrame = colorFrame;
+            currentTriangleFrame = frame;
+            currentTriangleFrameVersion++;
+            materializedTriangleFramePolygons = null;
+            materializedTriangleFrameVersion = -1;
+            recomputeCameraCullGroups(entry);
+            syncMountedRenderedForCameraChange(entry, true);
+            return true;
           }
         }
-        if (shouldSkipTransformOrigin) applyTransformOrigin(entry.polygons);
-        renderEntry(entry);
-        if (shouldRecomputeAutoCenter) recomputeAutoCenter();
+
+        polygonUpdateVersion++;
+        mergeOnUpdate = nextMergeOnUpdate;
+        stableDomOnUpdate = nextStableDomOnUpdate;
+        entry.stableDom = stableDomOnUpdate;
+        entry.voxelSource = undefined;
+
+        const values = frame.vertices;
+        for (let polygonIndex = 0; polygonIndex < frame.polygonCount; polygonIndex++) {
+          const polygon = entry.polygons[polygonIndex]!;
+          const color = frame.colors?.[polygonIndex];
+          if (color) polygon.color = color;
+          const vertices = polygon.vertices;
+          const offset = polygonIndex * 9;
+          vertices[0]![0] = values[offset]!;
+          vertices[0]![1] = values[offset + 1]!;
+          vertices[0]![2] = values[offset + 2]!;
+          vertices[1]![0] = values[offset + 3]!;
+          vertices[1]![1] = values[offset + 4]!;
+          vertices[1]![2] = values[offset + 5]!;
+          vertices[2]![0] = values[offset + 6]!;
+          vertices[2]![1] = values[offset + 7]!;
+          vertices[2]![2] = values[offset + 8]!;
+        }
+        clearCurrentTriangleFrame();
+        handle.polygons = entry.polygons;
+        return applyStableTopologyUpdate(
+          options,
+          shouldRecomputeAutoCenter,
+        );
       },
       updatePolygon(target: Polygon | number, partial: Partial<Polygon>) {
-        const idx = typeof target === "number"
+        let idx = typeof target === "number"
           ? target
           : entry.polygons.indexOf(target);
+        if (idx < 0 && typeof target !== "number" && currentTriangleFrame) {
+          idx = currentPolygons().indexOf(target);
+        }
         if (idx < 0 || idx >= entry.polygons.length) return;
+        clearCurrentTriangleFrame();
         entry.voxelSource = undefined;
         Object.assign(entry.polygons[idx], partial);
         renderEntry(entry);
@@ -1519,6 +1713,7 @@ export function createPolyScene(
         entry.stableDom = stableDomOnUpdate;
         entry.voxelSource = undefined;
         entry.polygons = preparePolygons(polygons, mergeOnUpdate);
+        clearCurrentTriangleFrame();
         handle.polygons = entry.polygons;
         applyTransformOrigin(entry.polygons);
         const shouldRecomputeAutoCenter = options?.recomputeAutoCenter ?? true;
diff --git a/packages/polycss/src/render/textureAtlas.ts b/packages/polycss/src/render/textureAtlas.ts
index 325fae9..54c7ffb 100644
--- a/packages/polycss/src/render/textureAtlas.ts
+++ b/packages/polycss/src/render/textureAtlas.ts
@@ -150,6 +150,8 @@ interface SolidTriangleBasis {
 interface SolidTriangleComputeOptions {
   basis?: SolidTriangleBasis;
   includeColor?: boolean;
+  matrixDecimals?: number;
+  color?: string;
 }
 
 interface SolidTriangleElement extends HTMLElement {
@@ -158,6 +160,8 @@ interface SolidTriangleElement extends HTMLElement {
   __polycssSolidTriangleColorRgb?: RGB;
   __polycssSolidTriangleColorAlpha?: number;
   __polycssSolidTriangleColorFrame?: number;
+  __polycssSolidTriangleHidden?: boolean;
+  __polycssHasDataAttrs?: boolean;
 }
 
 interface StableTriangleColorState {
@@ -167,6 +171,12 @@ interface StableTriangleColorState {
   maxStep: number;
 }
 
+export interface SolidTriangleFrame {
+  polygonCount: number;
+  vertices: ArrayLike<number>;
+  colors?: readonly (string | undefined)[];
+}
+
 export interface SolidPaintDefaults {
   paintColor?: string;
   dynamicColor?: { r: number; g: number; b: number };
@@ -303,6 +313,13 @@ const PROJECTIVE_QUAD_DENOM_EPS = 0.05;
 const PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = Number.POSITIVE_INFINITY;
 const PROJECTIVE_QUAD_BLEED = 0.6;
 
+function stableTriangleMatrixDecimals(options: InternalRenderTextureAtlasOptions): number {
+  return Math.max(
+    0,
+    Math.min(6, Math.floor(options.stableTriangleMatrixDecimals ?? DEFAULT_MATRIX_DECIMALS)),
+  );
+}
+
 interface BorderShapeBounds {
   minX: number;
   minY: number;
@@ -398,10 +415,94 @@ function formatAffineMatrix3dColumns(
   txCol: Vec3,
   decimals = DEFAULT_MATRIX_DECIMALS,
 ): string {
-  return `${roundDecimal(xCol[0], decimals)},${roundDecimal(xCol[1], decimals)},${roundDecimal(xCol[2], decimals)},0,` +
-    `${roundDecimal(yCol[0], decimals)},${roundDecimal(yCol[1], decimals)},${roundDecimal(yCol[2], decimals)},0,` +
-    `${roundDecimal(zCol[0], decimals)},${roundDecimal(zCol[1], decimals)},${roundDecimal(zCol[2], decimals)},0,` +
-    `${roundDecimal(txCol[0], decimals)},${roundDecimal(txCol[1], decimals)},${roundDecimal(txCol[2], decimals)},1`;
+  return formatAffineMatrix3dScalars(
+    xCol[0], xCol[1], xCol[2],
+    yCol[0], yCol[1], yCol[2],
+    zCol[0], zCol[1], zCol[2],
+    txCol[0], txCol[1], txCol[2],
+    decimals,
+  );
+}
+
+function formatAffineMatrix3dScalars(
+  x0: number,
+  x1: number,
+  x2: number,
+  y0: number,
+  y1: number,
+  y2: number,
+  z0: number,
+  z1: number,
+  z2: number,
+  tx0: number,
+  tx1: number,
+  tx2: number,
+  decimals = DEFAULT_MATRIX_DECIMALS,
+): string {
+  if (decimals === 3) {
+    const rx0 = Math.round(x0 * 1000) / 1000 || 0;
+    const rx1 = Math.round(x1 * 1000) / 1000 || 0;
+    const rx2 = Math.round(x2 * 1000) / 1000 || 0;
+    const ry0 = Math.round(y0 * 1000) / 1000 || 0;
+    const ry1 = Math.round(y1 * 1000) / 1000 || 0;
+    const ry2 = Math.round(y2 * 1000) / 1000 || 0;
+    const rz0 = Math.round(z0 * 1000) / 1000 || 0;
+    const rz1 = Math.round(z1 * 1000) / 1000 || 0;
+    const rz2 = Math.round(z2 * 1000) / 1000 || 0;
+    const rtx0 = Math.round(tx0 * 1000) / 1000 || 0;
+    const rtx1 = Math.round(tx1 * 1000) / 1000 || 0;
+    const rtx2 = Math.round(tx2 * 1000) / 1000 || 0;
+    return `${rx0},${rx1},${rx2},0,` +
+      `${ry0},${ry1},${ry2},0,` +
+      `${rz0},${rz1},${rz2},0,` +
+      `${rtx0},${rtx1},${rtx2},1`;
+  }
+  return `${roundDecimal(x0, decimals)},${roundDecimal(x1, decimals)},${roundDecimal(x2, decimals)},0,` +
+    `${roundDecimal(y0, decimals)},${roundDecimal(y1, decimals)},${roundDecimal(y2, decimals)},0,` +
+    `${roundDecimal(z0, decimals)},${roundDecimal(z1, decimals)},${roundDecimal(z2, decimals)},0,` +
+    `${roundDecimal(tx0, decimals)},${roundDecimal(tx1, decimals)},${roundDecimal(tx2, decimals)},1`;
+}
+
+function formatAffineMatrix3dTransformScalars(
+  x0: number,
+  x1: number,
+  x2: number,
+  y0: number,
+  y1: number,
+  y2: number,
+  z0: number,
+  z1: number,
+  z2: number,
+  tx0: number,
+  tx1: number,
+  tx2: number,
+  decimals = DEFAULT_MATRIX_DECIMALS,
+): string {
+  if (decimals !== 3) {
+    return `matrix3d(${formatAffineMatrix3dScalars(
+      x0, x1, x2,
+      y0, y1, y2,
+      z0, z1, z2,
+      tx0, tx1, tx2,
+      decimals,
+    )})`;
+  }
+  const rx0 = Math.round(x0 * 1000) / 1000 || 0;
+  const rx1 = Math.round(x1 * 1000) / 1000 || 0;
+  const rx2 = Math.round(x2 * 1000) / 1000 || 0;
+  const ry0 = Math.round(y0 * 1000) / 1000 || 0;
+  const ry1 = Math.round(y1 * 1000) / 1000 || 0;
+  const ry2 = Math.round(y2 * 1000) / 1000 || 0;
+  const rz0 = Math.round(z0 * 1000) / 1000 || 0;
+  const rz1 = Math.round(z1 * 1000) / 1000 || 0;
+  const rz2 = Math.round(z2 * 1000) / 1000 || 0;
+  const rtx0 = Math.round(tx0 * 1000) / 1000 || 0;
+  const rtx1 = Math.round(tx1 * 1000) / 1000 || 0;
+  const rtx2 = Math.round(tx2 * 1000) / 1000 || 0;
+  return `matrix3d(${rx0},${rx1},${rx2},0,` +
+    `${ry0},${ry1},${ry2},0,` +
+    `${rz0},${rz1},${rz2},0,` +
+    `${rtx0},${rtx1},${rtx2},1)`;
 }
 
 function isConvexPolygonPoints(points: Array<[number, number]>): boolean {
@@ -532,47 +633,171 @@ function offsetTrianglePoints(
 ): number[] {
   if (amount <= 0) return [x0, y0, x1, y1, x2, y2];
   const area = (x0 * y1 - y0 * x1 + x1 * y2 - y1 * x2 + x2 * y0 - y2 * x0) / 2;
-  if (Math.abs(area) <= BASIS_EPS) return expandClipPoints([x0, y0, x1, y1, x2, y2], amount);
+  const fallback = () => expandClipPoints([x0, y0, x1, y1, x2, y2], amount);
+  if (Math.abs(area) <= BASIS_EPS) return fallback();
 
   const outwardSign = area > 0 ? 1 : -1;
-  const line = (ax: number, ay: number, bx: number, by: number) => {
-    const dx = bx - ax;
-    const dy = by - ay;
-    const length = Math.hypot(dx, dy);
-    if (length <= BASIS_EPS) return null;
-    const ox = outwardSign * (dy / length) * amount;
-    const oy = outwardSign * (-dx / length) * amount;
-    return {
-      ax: ax + ox,
-      ay: ay + oy,
-      bx: bx + ox,
-      by: by + oy,
-    };
-  };
 
-  const l0 = line(x0, y0, x1, y1);
-  const l1 = line(x1, y1, x2, y2);
-  const l2 = line(x2, y2, x0, y0);
-  if (!l0 || !l1 || !l2) return expandClipPoints([x0, y0, x1, y1, x2, y2], amount);
+  const dx0 = x1 - x0;
+  const dy0 = y1 - y0;
+  const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
+  const dx1 = x2 - x1;
+  const dy1 = y2 - y1;
+  const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+  const dx2 = x0 - x2;
+  const dy2 = y0 - y2;
+  const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+  if (len0 <= BASIS_EPS || len1 <= BASIS_EPS || len2 <= BASIS_EPS) return fallback();
+
+  const ox0 = outwardSign * (dy0 / len0) * amount;
+  const oy0 = outwardSign * (-dx0 / len0) * amount;
+  const l0ax = x0 + ox0;
+  const l0ay = y0 + oy0;
+  const l0bx = x1 + ox0;
+  const l0by = y1 + oy0;
+
+  const ox1 = outwardSign * (dy1 / len1) * amount;
+  const oy1 = outwardSign * (-dx1 / len1) * amount;
+  const l1ax = x1 + ox1;
+  const l1ay = y1 + oy1;
+  const l1bx = x2 + ox1;
+  const l1by = y2 + oy1;
+
+  const ox2 = outwardSign * (dy2 / len2) * amount;
+  const oy2 = outwardSign * (-dx2 / len2) * amount;
+  const l2ax = x2 + ox2;
+  const l2ay = y2 + oy2;
+  const l2bx = x0 + ox2;
+  const l2by = y0 + oy2;
+
+  const r0x = l2bx - l2ax;
+  const r0y = l2by - l2ay;
+  const s0x = l0bx - l0ax;
+  const s0y = l0by - l0ay;
+  const det0 = r0x * s0y - r0y * s0x;
+  if (Math.abs(det0) <= BASIS_EPS) return fallback();
+  const q0x = l0ax - l2ax;
+  const q0y = l0ay - l2ay;
+  const t0 = (q0x * s0y - q0y * s0x) / det0;
+  let p0x = l2ax + t0 * r0x;
+  let p0y = l2ay + t0 * r0y;
+
+  const r1x = l0bx - l0ax;
+  const r1y = l0by - l0ay;
+  const s1x = l1bx - l1ax;
+  const s1y = l1by - l1ay;
+  const det1 = r1x * s1y - r1y * s1x;
+  if (Math.abs(det1) <= BASIS_EPS) return fallback();
+  const q1x = l1ax - l0ax;
+  const q1y = l1ay - l0ay;
+  const t1 = (q1x * s1y - q1y * s1x) / det1;
+  let p1x = l0ax + t1 * r1x;
+  let p1y = l0ay + t1 * r1y;
+
+  const r2x = l1bx - l1ax;
+  const r2y = l1by - l1ay;
+  const s2x = l2bx - l2ax;
+  const s2y = l2by - l2ay;
+  const det2 = r2x * s2y - r2y * s2x;
+  if (Math.abs(det2) <= BASIS_EPS) return fallback();
+  const q2x = l2ax - l1ax;
+  const q2y = l2ay - l1ay;
+  const t2 = (q2x * s2y - q2y * s2x) / det2;
+  let p2x = l1ax + t2 * r2x;
+  let p2y = l1ay + t2 * r2y;
+
+  const maxMiter = Math.max(2, amount * 4);
+  const m0x = p0x - x0;
+  const m0y = p0y - y0;
+  const m0 = Math.sqrt(m0x * m0x + m0y * m0y);
+  if (m0 > maxMiter) {
+    p0x = x0 + (m0x / m0) * maxMiter;
+    p0y = y0 + (m0y / m0) * maxMiter;
+  }
+  const m1x = p1x - x1;
+  const m1y = p1y - y1;
+  const m1 = Math.sqrt(m1x * m1x + m1y * m1y);
+  if (m1 > maxMiter) {
+    p1x = x1 + (m1x / m1) * maxMiter;
+    p1y = y1 + (m1y / m1) * maxMiter;
+  }
+  const m2x = p2x - x2;
+  const m2y = p2y - y2;
+  const m2 = Math.sqrt(m2x * m2x + m2y * m2y);
+  if (m2 > maxMiter) {
+    p2x = x2 + (m2x / m2) * maxMiter;
+    p2y = y2 + (m2y / m2) * maxMiter;
+  }
+
+  return [p0x, p0y, p1x, p1y, p2x, p2y];
+}
 
-  const p0 = intersect2DLinesRaw(l2.ax, l2.ay, l2.bx, l2.by, l0.ax, l0.ay, l0.bx, l0.by);
-  const p1 = intersect2DLinesRaw(l0.ax, l0.ay, l0.bx, l0.by, l1.ax, l1.ay, l1.bx, l1.by);
-  const p2 = intersect2DLinesRaw(l1.ax, l1.ay, l1.bx, l1.by, l2.ax, l2.ay, l2.bx, l2.by);
-  if (!p0 || !p1 || !p2) return expandClipPoints([x0, y0, x1, y1, x2, y2], amount);
+function offsetStableTrianglePoints(
+  left: number,
+  right: number,
+  height: number,
+  amount: number,
+): number[] {
+  const baseWidth = left + right;
+  if (
+    amount <= 0 ||
+    height <= BASIS_EPS ||
+    baseWidth <= BASIS_EPS ||
+    !Number.isFinite(left + right + height + amount)
+  ) {
+    return offsetTrianglePoints(left, 0, 0, height, baseWidth, height, amount);
+  }
+
+  const leftLen = Math.sqrt(left * left + height * height);
+  const rightLen = Math.sqrt(right * right + height * height);
+  if (leftLen <= BASIS_EPS || rightLen <= BASIS_EPS) {
+    return offsetTrianglePoints(left, 0, 0, height, baseWidth, height, amount);
+  }
+
+  const leftOffsetX = -amount * height / leftLen;
+  const leftOffsetY = -amount * left / leftLen;
+  const rightOffsetX = amount * height / rightLen;
+  const rightOffsetY = -amount * right / rightLen;
+  const apexLineLeftX = left + leftOffsetX;
+  const apexLineLeftY = leftOffsetY;
+  const apexLineRightX = baseWidth + rightOffsetX;
+  const apexLineRightY = height + rightOffsetY;
+  const det = -height * baseWidth;
+  if (Math.abs(det) <= BASIS_EPS) {
+    return offsetTrianglePoints(left, 0, 0, height, baseWidth, height, amount);
+  }
+
+  const qx = apexLineLeftX - apexLineRightX;
+  const qy = apexLineLeftY - apexLineRightY;
+  const t = (qx * height + qy * left) / det;
+  let apexX = apexLineRightX - t * right;
+  let apexY = apexLineRightY - t * height;
+  let baseLeftX = -amount * (left + leftLen) / height;
+  let baseLeftY = height + amount;
+  let baseRightX = baseWidth + amount * (right + rightLen) / height;
+  let baseRightY = baseLeftY;
 
   const maxMiter = Math.max(2, amount * 4);
-  const clamp = (px: number, py: number, ox: number, oy: number): Vec2 => {
-    const dx = px - ox;
-    const dy = py - oy;
-    const miter = Math.hypot(dx, dy);
-    return miter > maxMiter
-      ? [ox + (dx / miter) * maxMiter, oy + (dy / miter) * maxMiter]
-      : [px, py];
-  };
-  const c0 = clamp(p0[0], p0[1], x0, y0);
-  const c1 = clamp(p1[0], p1[1], x1, y1);
-  const c2 = clamp(p2[0], p2[1], x2, y2);
-  return [c0[0], c0[1], c1[0], c1[1], c2[0], c2[1]];
+  const apexDx = apexX - left;
+  const apexDy = apexY;
+  const apexMiter = Math.sqrt(apexDx * apexDx + apexDy * apexDy);
+  if (apexMiter > maxMiter) {
+    apexX = left + (apexDx / apexMiter) * maxMiter;
+    apexY = (apexDy / apexMiter) * maxMiter;
+  }
+  const leftMiter = Math.sqrt(baseLeftX * baseLeftX + amount * amount);
+  if (leftMiter > maxMiter) {
+    baseLeftX = (baseLeftX / leftMiter) * maxMiter;
+    baseLeftY = height + (amount / leftMiter) * maxMiter;
+  }
+  const rightDx = baseRightX - baseWidth;
+  const rightMiter = Math.sqrt(rightDx * rightDx + amount * amount);
+  if (rightMiter > maxMiter) {
+    baseRightX = baseWidth + (rightDx / rightMiter) * maxMiter;
+    baseRightY = height + (amount / rightMiter) * maxMiter;
+  }
+
+  return [apexX, apexY, baseLeftX, baseLeftY, baseRightX, baseRightY];
 }
 
 function finiteNumber(value: unknown, fallback: number): number {
@@ -1910,9 +2135,12 @@ function computeTextureAtlasPlan(
 function computeSolidTriangleColorPlanFromNormal(
   polygon: Polygon,
   index: number,
-  normal: Vec3,
+  nx: number,
+  ny: number,
+  nz: number,
   options: RenderTextureAtlasOptions,
   includeColor: boolean,
+  colorOverride?: string,
 ): SolidTriangleColorPlan {
   const internalOptions = options as InternalRenderTextureAtlasOptions;
   let bakedColorValue = "";
@@ -1920,6 +2148,7 @@ function computeSolidTriangleColorPlanFromNormal(
   let bakedAlpha: number | undefined;
   let dynamicVars = "";
   if (includeColor) {
+    const baseColor = colorOverride ?? polygon.color ?? "#cccccc";
     const directionalCfg = options.directionalLight;
     const ambientCfg = options.ambientLight;
     const lightDir = directionalCfg?.direction ?? DEFAULT_LIGHT_DIR;
@@ -1929,13 +2158,13 @@ function computeSolidTriangleColorPlanFromNormal(
     const ambientIntensity = Math.max(0, ambientCfg?.intensity ?? DEFAULT_AMBIENT_INTENSITY);
     const lLen = Math.hypot(lightDir[0], lightDir[1], lightDir[2]) || 1;
     const lx = lightDir[0] / lLen, ly = lightDir[1] / lLen, lz = lightDir[2] / lLen;
-    const directScale = lightIntensity * Math.max(0, normal[0] * lx + normal[1] * ly + normal[2] * lz);
-    const shadedColorRaw = shadePolygon(polygon.color ?? "#cccccc", directScale, lightColor, ambientColor, ambientIntensity);
+    const directScale = lightIntensity * Math.max(0, nx * lx + ny * ly + nz * lz);
+    const shadedColorRaw = shadePolygon(baseColor, directScale, lightColor, ambientColor, ambientIntensity);
     const textureLighting = options.textureLighting ?? "baked";
     const shadedColor = textureLighting === "baked" && internalOptions.stableTriangleColorSteps
       ? quantizeCssColor(shadedColorRaw, internalOptions.stableTriangleColorSteps)
       : shadedColorRaw;
-    const base = parseHex(polygon.color ?? "#cccccc");
+    const base = parseHex(baseColor);
     const useDefaultPaint = shadedColor === options.solidPaintDefaults?.paintColor;
     const useDefaultDynamicColor =
       textureLighting === "dynamic" && rgbKey(base) === options.solidPaintDefaults?.dynamicColorKey;
@@ -1945,7 +2174,7 @@ function computeSolidTriangleColorPlanFromNormal(
     bakedRgb = bakedColorValue ? parseHex(bakedColorValue) : undefined;
     bakedAlpha = bakedColorValue ? parseAlpha(bakedColorValue) : undefined;
     dynamicVars = textureLighting === "dynamic"
-      ? `--pnx:${normal[0].toFixed(4)};--pny:${normal[1].toFixed(4)};--pnz:${normal[2].toFixed(4)};` +
+      ? `--pnx:${nx.toFixed(4)};--pny:${ny.toFixed(4)};--pnz:${nz.toFixed(4)};` +
         (useDefaultDynamicColor
           ? ""
           : `--psr:${(base.r / 255).toFixed(4)};--psg:${(base.g / 255).toFixed(4)};--psb:${(base.b / 255).toFixed(4)};`)
@@ -1985,12 +2214,12 @@ function computeSolidTriangleColorPlan(
   let nx = -(e10y * e20z - e10z * e20y);
   let ny = -(e10z * e20x - e10x * e20z);
   let nz = -(e10x * e20y - e10y * e20x);
-  const nLen = Math.hypot(nx, ny, nz);
+  const nLen = Math.sqrt(nx * nx + ny * ny + nz * nz);
   if (nLen <= BASIS_EPS) return null;
   nx /= nLen;
   ny /= nLen;
   nz /= nLen;
-  return computeSolidTriangleColorPlanFromNormal(polygon, index, [nx, ny, nz], options, true);
+  return computeSolidTriangleColorPlanFromNormal(polygon, index, nx, ny, nz, options, true);
 }
 
 function computeSolidTrianglePlan(
@@ -2001,32 +2230,67 @@ function computeSolidTrianglePlan(
 ): SolidTrianglePlan | null {
   if (polygon.texture || polygon.vertices.length !== 3) return null;
 
-  const internalOptions = options as InternalRenderTextureAtlasOptions;
   const tile = options.tileSize ?? DEFAULT_TILE;
   const elev = options.layerElevation ?? tile;
   const v0 = polygon.vertices[0];
   const v1 = polygon.vertices[1];
   const v2 = polygon.vertices[2];
-  const pts: Vec3[] = [
-    [v0[1] * tile, v0[0] * tile, v0[2] * elev],
-    [v1[1] * tile, v1[0] * tile, v1[2] * elev],
-    [v2[1] * tile, v2[0] * tile, v2[2] * elev],
-  ];
-  const e10x = pts[1][0] - pts[0][0];
-  const e10y = pts[1][1] - pts[0][1];
-  const e10z = pts[1][2] - pts[0][2];
-  const e20x = pts[2][0] - pts[0][0];
-  const e20y = pts[2][1] - pts[0][1];
-  const e20z = pts[2][2] - pts[0][2];
+  const p0x = v0[1] * tile;
+  const p0y = v0[0] * tile;
+  const p0z = v0[2] * elev;
+  const p1x = v1[1] * tile;
+  const p1y = v1[0] * tile;
+  const p1z = v1[2] * elev;
+  const p2x = v2[1] * tile;
+  const p2y = v2[0] * tile;
+  const p2z = v2[2] * elev;
+  return computeSolidTrianglePlanFromCssPoints(
+    polygon,
+    index,
+    options,
+    computeOptions,
+    p0x,
+    p0y,
+    p0z,
+    p1x,
+    p1y,
+    p1z,
+    p2x,
+    p2y,
+    p2z,
+  );
+}
+
+function computeSolidTrianglePlanFromCssPoints(
+  polygon: Polygon,
+  index: number,
+  options: RenderTextureAtlasOptions,
+  computeOptions: SolidTriangleComputeOptions,
+  p0x: number,
+  p0y: number,
+  p0z: number,
+  p1x: number,
+  p1y: number,
+  p1z: number,
+  p2x: number,
+  p2y: number,
+  p2z: number,
+): SolidTrianglePlan | null {
+  const internalOptions = options as InternalRenderTextureAtlasOptions;
+  const e10x = p1x - p0x;
+  const e10y = p1y - p0y;
+  const e10z = p1z - p0z;
+  const e20x = p2x - p0x;
+  const e20y = p2y - p0y;
+  const e20z = p2z - p0z;
   let nx = -(e10y * e20z - e10z * e20y);
   let ny = -(e10z * e20x - e10x * e20z);
   let nz = -(e10x * e20y - e10y * e20x);
-  const nLen = Math.hypot(nx, ny, nz);
+  const nLen = Math.sqrt(nx * nx + ny * ny + nz * nz);
   if (nLen <= BASIS_EPS) return null;
   nx /= nLen;
   ny /= nLen;
   nz /= nLen;
-  const normal: Vec3 = [nx, ny, nz];
 
   let basisHint = computeOptions.basis;
   let a = basisHint?.a ?? 0;
@@ -2042,23 +2306,48 @@ function computeSolidTrianglePlan(
     a = 0;
     b = 1;
     c = 2;
+  } else if (
+    !(
+      (a === 0 && b === 1 && c === 2) ||
+      (a === 1 && b === 2 && c === 0) ||
+      (a === 2 && b === 0 && c === 1)
+    )
+  ) {
+    basisHint = undefined;
+    a = 0;
+    b = 1;
+    c = 2;
   }
   const retryWithoutBasis = (): SolidTrianglePlan | null =>
     basisHint
-      ? computeSolidTrianglePlan(polygon, index, options, {
-          ...computeOptions,
-          basis: undefined,
-        })
+      ? computeSolidTrianglePlanFromCssPoints(
+          polygon,
+          index,
+          options,
+          {
+            ...computeOptions,
+            basis: undefined,
+          },
+          p0x,
+          p0y,
+          p0z,
+          p1x,
+          p1y,
+          p1z,
+          p2x,
+          p2y,
+          p2z,
+        )
       : null;
 
   if (!basisHint) {
     const len01Sq = e10x * e10x + e10y * e10y + e10z * e10z;
-    const e21x = pts[2][0] - pts[1][0];
-    const e21y = pts[2][1] - pts[1][1];
-    const e21z = pts[2][2] - pts[1][2];
-    const e02x = pts[0][0] - pts[2][0];
-    const e02y = pts[0][1] - pts[2][1];
-    const e02z = pts[0][2] - pts[2][2];
+    const e21x = p2x - p1x;
+    const e21y = p2y - p1y;
+    const e21z = p2z - p1z;
+    const e02x = p0x - p2x;
+    const e02y = p0y - p2y;
+    const e02z = p0z - p2z;
     const len12Sq = e21x * e21x + e21y * e21y + e21z * e21z;
     const len20Sq = e02x * e02x + e02y * e02y + e02z * e02z;
     let baseLengthSq = len01Sq;
@@ -2075,92 +2364,59 @@ function computeSolidTrianglePlan(
     }
   }
 
-  let av = pts[a];
-  let bv = pts[b];
-  const cv = pts[c];
-  let baseDx = bv[0] - av[0];
-  let baseDy = bv[1] - av[1];
-  let baseDz = bv[2] - av[2];
-  let baseLength = Math.hypot(baseDx, baseDy, baseDz);
+  let avx: number;
+  let avy: number;
+  let avz: number;
+  let bvx: number;
+  let bvy: number;
+  let bvz: number;
+  const cvx = c === 0 ? p0x : c === 1 ? p1x : p2x;
+  const cvy = c === 0 ? p0y : c === 1 ? p1y : p2y;
+  const cvz = c === 0 ? p0z : c === 1 ? p1z : p2z;
+  if (a === 0) {
+    avx = p0x; avy = p0y; avz = p0z;
+  } else if (a === 1) {
+    avx = p1x; avy = p1y; avz = p1z;
+  } else {
+    avx = p2x; avy = p2y; avz = p2z;
+  }
+  if (b === 0) {
+    bvx = p0x; bvy = p0y; bvz = p0z;
+  } else if (b === 1) {
+    bvx = p1x; bvy = p1y; bvz = p1z;
+  } else {
+    bvx = p2x; bvy = p2y; bvz = p2z;
+  }
+
+  let baseDx = bvx - avx;
+  let baseDy = bvy - avy;
+  let baseDz = bvz - avz;
+  let baseLength = Math.sqrt(baseDx * baseDx + baseDy * baseDy + baseDz * baseDz);
   if (baseLength <= BASIS_EPS) return retryWithoutBasis();
 
-  let xAxis: Vec3 = [
-    baseDx / baseLength,
-    baseDy / baseLength,
-    baseDz / baseLength,
-  ];
-  const ac: Vec3 = [cv[0] - av[0], cv[1] - av[1], cv[2] - av[2]];
-  let apexX = dotVec(ac, xAxis);
-  let foot: Vec3 = [
-    av[0] + xAxis[0] * apexX,
-    av[1] + xAxis[1] * apexX,
-    av[2] + xAxis[2] * apexX,
-  ];
-  let yAxisRaw: Vec3 = [
-    foot[0] - cv[0],
-    foot[1] - cv[1],
-    foot[2] - cv[2],
-  ];
-  let height = Math.hypot(yAxisRaw[0], yAxisRaw[1], yAxisRaw[2]);
+  let x0 = baseDx / baseLength;
+  let x1 = baseDy / baseLength;
+  let x2 = baseDz / baseLength;
+  let apexX = (cvx - avx) * x0 + (cvy - avy) * x1 + (cvz - avz) * x2;
+  let y0 = ny * x2 - nz * x1;
+  let y1 = nz * x0 - nx * x2;
+  let y2 = nx * x1 - ny * x0;
+  let height = nLen / baseLength;
   if (height <= BASIS_EPS) return retryWithoutBasis();
-  let yAxis: Vec3 = [
-    yAxisRaw[0] / height,
-    yAxisRaw[1] / height,
-    yAxisRaw[2] / height,
-  ];
-
-  if (dotVec(crossVec(xAxis, yAxis), normal) < 0) {
-    const nextA = b;
-    b = a;
-    a = nextA;
-    av = pts[a];
-    bv = pts[b];
-    baseDx = bv[0] - av[0];
-    baseDy = bv[1] - av[1];
-    baseDz = bv[2] - av[2];
-    baseLength = Math.hypot(baseDx, baseDy, baseDz);
-    if (baseLength <= BASIS_EPS) return retryWithoutBasis();
-    xAxis = [
-      baseDx / baseLength,
-      baseDy / baseLength,
-      baseDz / baseLength,
-    ];
-    const nextAc: Vec3 = [cv[0] - av[0], cv[1] - av[1], cv[2] - av[2]];
-    apexX = dotVec(nextAc, xAxis);
-    foot = [
-      av[0] + xAxis[0] * apexX,
-      av[1] + xAxis[1] * apexX,
-      av[2] + xAxis[2] * apexX,
-    ];
-    yAxisRaw = [
-      foot[0] - cv[0],
-      foot[1] - cv[1],
-      foot[2] - cv[2],
-    ];
-    height = Math.hypot(yAxisRaw[0], yAxisRaw[1], yAxisRaw[2]);
-    if (height <= BASIS_EPS) return retryWithoutBasis();
-    yAxis = [
-      yAxisRaw[0] / height,
-      yAxisRaw[1] / height,
-      yAxisRaw[2] / height,
-    ];
-  }
 
   const left = Math.max(0, Math.min(baseLength, apexX));
   const right = Math.max(0, baseLength - left);
-  const expanded = offsetTrianglePoints(
-    left, 0,
-    0, height,
-    left + right, height,
-    SOLID_TRIANGLE_BLEED,
-  );
-  const apex2: Vec2 = [expanded[0], expanded[1]];
-  const baseLeft2: Vec2 = [expanded[2], expanded[3]];
-  const baseRight2: Vec2 = [expanded[4], expanded[5]];
-  const baseY = (baseLeft2[1] + baseRight2[1]) / 2;
-  const leftPx = apex2[0] - baseLeft2[0];
-  const rightPx = baseRight2[0] - apex2[0];
-  const heightPx = baseY - apex2[1];
+  const expanded = offsetStableTrianglePoints(left, right, height, SOLID_TRIANGLE_BLEED);
+  const apex2x = expanded[0];
+  const apex2y = expanded[1];
+  const baseLeft2x = expanded[2];
+  const baseLeft2y = expanded[3];
+  const baseRight2x = expanded[4];
+  const baseRight2y = expanded[5];
+  const baseY = (baseLeft2y + baseRight2y) / 2;
+  const leftPx = apex2x - baseLeft2x;
+  const rightPx = baseRight2x - apex2x;
+  const heightPx = baseY - apex2y;
   if (
     leftPx <= BASIS_EPS ||
     rightPx <= BASIS_EPS ||
@@ -2169,59 +2425,54 @@ function computeSolidTrianglePlan(
   ) {
     return retryWithoutBasis();
   }
-  const colorPlan = computeSolidTriangleColorPlanFromNormal(
-    polygon,
-    index,
-    normal,
-    options,
-    computeOptions.includeColor ?? true,
-  );
-  const bakedColor = colorPlan.bakedColor ? `color:${colorPlan.bakedColor};` : "";
-  const dynamicVars = colorPlan.dynamicVars ?? "";
-  const cv0 = cv[0];
-  const cv1 = cv[1];
-  const cv2 = cv[2];
-  const apexOffsetX = apex2[0] - left;
-  const apexY = apex2[1];
-  const baseLeftOffsetX = baseLeft2[0] - left;
-  const baseRightOffsetX = baseRight2[0] - left;
-  const apex: Vec3 = [
-    cv0 + apexOffsetX * xAxis[0] + apexY * yAxis[0],
-    cv1 + apexOffsetX * xAxis[1] + apexY * yAxis[1],
-    cv2 + apexOffsetX * xAxis[2] + apexY * yAxis[2],
-  ];
-  const baseLeft: Vec3 = [
-    cv0 + baseLeftOffsetX * xAxis[0] + baseY * yAxis[0],
-    cv1 + baseLeftOffsetX * xAxis[1] + baseY * yAxis[1],
-    cv2 + baseLeftOffsetX * xAxis[2] + baseY * yAxis[2],
-  ];
-  const baseRight: Vec3 = [
-    cv0 + baseRightOffsetX * xAxis[0] + baseY * yAxis[0],
-    cv1 + baseRightOffsetX * xAxis[1] + baseY * yAxis[1],
-    cv2 + baseRightOffsetX * xAxis[2] + baseY * yAxis[2],
-  ];
-  const halfBase = SOLID_TRIANGLE_CANONICAL_SIZE / 2;
-  const xCol: Vec3 = [
-    (baseRight[0] - baseLeft[0]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-    (baseRight[1] - baseLeft[1]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-    (baseRight[2] - baseLeft[2]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-  ];
-  const txCol: Vec3 = [
-    apex[0] - xCol[0] * halfBase,
-    apex[1] - xCol[1] * halfBase,
-    apex[2] - xCol[2] * halfBase,
-  ];
-  const yCol: Vec3 = [
-    (baseLeft[0] - txCol[0]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-    (baseLeft[1] - txCol[1]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-    (baseLeft[2] - txCol[2]) / SOLID_TRIANGLE_CANONICAL_SIZE,
-  ];
-  const matrixDecimals = Math.max(
-    0,
-    Math.min(6, Math.floor(internalOptions.stableTriangleMatrixDecimals ?? DEFAULT_MATRIX_DECIMALS)),
+  const includeColor = computeOptions.includeColor ?? true;
+  let colorComputed = false;
+  let bakedColorValue: string | undefined;
+  let bakedRgb: RGB | undefined;
+  let bakedAlpha: number | undefined;
+  let dynamicVars = "";
+  if (includeColor) {
+    const colorPlan = computeSolidTriangleColorPlanFromNormal(
+      polygon,
+      index,
+      nx,
+      ny,
+      nz,
+      options,
+      true,
+      computeOptions.color,
+    );
+    colorComputed = colorPlan.colorComputed;
+    bakedColorValue = colorPlan.bakedColor;
+    bakedRgb = colorPlan.bakedRgb;
+    bakedAlpha = colorPlan.bakedAlpha;
+    dynamicVars = colorPlan.dynamicVars ?? "";
+  }
+  const bakedColor = bakedColorValue ? `color:${bakedColorValue};` : "";
+  const invCanonicalSize = 1 / SOLID_TRIANGLE_CANONICAL_SIZE;
+  const baseWidthPx = leftPx + rightPx;
+  const xScale = baseWidthPx * invCanonicalSize;
+  const yXScale = (rightPx - leftPx) * 0.5 * invCanonicalSize;
+  const yYScale = heightPx * invCanonicalSize;
+  const txXOffset = apex2x - left - baseWidthPx * 0.5;
+  const txYOffset = apex2y;
+  const xCol0 = x0 * xScale;
+  const xCol1 = x1 * xScale;
+  const xCol2 = x2 * xScale;
+  const yCol0 = x0 * yXScale + y0 * yYScale;
+  const yCol1 = x1 * yXScale + y1 * yYScale;
+  const yCol2 = x2 * yXScale + y2 * yYScale;
+  const txCol0 = cvx + x0 * txXOffset + y0 * txYOffset;
+  const txCol1 = cvy + x1 * txXOffset + y1 * txYOffset;
+  const txCol2 = cvz + x2 * txXOffset + y2 * txYOffset;
+  const matrixDecimals = computeOptions.matrixDecimals ?? stableTriangleMatrixDecimals(internalOptions);
+  const transformText = formatAffineMatrix3dTransformScalars(
+    xCol0, xCol1, xCol2,
+    yCol0, yCol1, yCol2,
+    nx, ny, nz,
+    txCol0, txCol1, txCol2,
+    matrixDecimals,
   );
-  const canonicalMatrix = formatAffineMatrix3dColumns(xCol, yCol, normal, txCol, matrixDecimals);
-  const transformText = `matrix3d(${canonicalMatrix})`;
   const textureLighting = options.textureLighting ?? "baked";
   const optimizeStyleText =
     internalOptions.optimizeStableTriangleStyle === true &&
@@ -2230,17 +2481,20 @@ function computeSolidTrianglePlan(
     ? ""
     : `transform:${transformText};` + bakedColor + dynamicVars;
 
+  const basis = basisHint && basisHint.a === a && basisHint.b === b && basisHint.c === c
+    ? basisHint
+    : { a, b, c };
   return {
     index,
     polygon,
     styleText,
     transformText,
-    basis: { a, b, c },
-    colorComputed: colorPlan.colorComputed,
-    bakedColor: colorPlan.bakedColor,
-    bakedRgb: colorPlan.bakedRgb,
-    bakedAlpha: colorPlan.bakedAlpha,
-    dynamicVars: colorPlan.dynamicVars,
+    basis,
+    colorComputed,
+    bakedColor: bakedColorValue,
+    bakedRgb,
+    bakedAlpha,
+    dynamicVars,
   };
 }
 
@@ -2758,6 +3012,11 @@ function applyPolygonDataAttrs(el: HTMLElement, polygon: Polygon): void {
     }
   }
   ELEMENT_DATA_KEYS.set(el, nextDataKeys);
+  (el as SolidTriangleElement).__polycssHasDataAttrs = nextDataKeys.length > 0;
+}
+
+function hasPolygonDataAttrs(el: HTMLElement): boolean {
+  return (el as SolidTriangleElement).__polycssHasDataAttrs === true;
 }
 
 function formatScaledMatrixFromPlan(
@@ -3617,13 +3876,14 @@ function applySolidTriangleElement(
   el.setAttribute("style", entry.styleText);
   const triangleEl = el as SolidTriangleElement;
   triangleEl.__polycssSolidTriangleBasis = entry.basis;
+  triangleEl.__polycssSolidTriangleHidden = false;
   if (entry.colorComputed) {
     triangleEl.__polycssSolidTriangleColor = entry.bakedColor ?? "";
     triangleEl.__polycssSolidTriangleColorRgb = entry.bakedRgb;
     triangleEl.__polycssSolidTriangleColorAlpha = entry.bakedAlpha;
   }
   triangleEl.__polycssSolidTriangleColorFrame = undefined;
-  if (entry.polygon.data || ELEMENT_DATA_KEYS.get(el)?.length) {
+  if (entry.polygon.data || hasPolygonDataAttrs(el)) {
     applyPolygonDataAttrs(el, entry.polygon);
   }
 }
@@ -3635,7 +3895,7 @@ function applySolidTriangleElementColor(
   colorUpdateAllowed?: boolean,
 ): void {
   if (!entry.colorComputed) {
-    if (entry.polygon.data || ELEMENT_DATA_KEYS.get(el)?.length) {
+    if (entry.polygon.data || hasPolygonDataAttrs(el)) {
       applyPolygonDataAttrs(el, entry.polygon);
     }
     return;
@@ -3669,7 +3929,7 @@ function applySolidTriangleElementColor(
     triangleEl.__polycssSolidTriangleColorAlpha = nextAlpha;
     triangleEl.__polycssSolidTriangleColorFrame = colorState.colorFrame;
   }
-  if (entry.polygon.data || ELEMENT_DATA_KEYS.get(el)?.length) {
+  if (entry.polygon.data || hasPolygonDataAttrs(el)) {
     applyPolygonDataAttrs(el, entry.polygon);
   }
 }
@@ -3681,10 +3941,14 @@ function applySolidTriangleElementFast(
   colorUpdateAllowed?: boolean,
 ): void {
   const triangleEl = el as SolidTriangleElement;
-  triangleEl.__polycssSolidTriangleBasis = entry.basis;
-  if (el.style.visibility) el.style.visibility = "";
+  if (triangleEl.__polycssSolidTriangleBasis !== entry.basis) {
+    triangleEl.__polycssSolidTriangleBasis = entry.basis;
+  }
+  showSolidTriangleElement(el);
   el.style.transform = entry.transformText;
-  applySolidTriangleElementColor(el, entry, colorState, colorUpdateAllowed);
+  if (entry.colorComputed || entry.polygon.data || hasPolygonDataAttrs(el)) {
+    applySolidTriangleElementColor(el, entry, colorState, colorUpdateAllowed);
+  }
 }
 
 function applySolidTriangleElementColorOnly(
@@ -3693,7 +3957,7 @@ function applySolidTriangleElementColorOnly(
   colorState: StableTriangleColorState,
   colorUpdateAllowed?: boolean,
 ): void {
-  if (el.style.visibility) el.style.visibility = "";
+  showSolidTriangleElement(el);
   applySolidTriangleElementColor(el, entry, colorState, colorUpdateAllowed);
 }
 
@@ -3702,16 +3966,28 @@ function applySolidTriangleElementTransformOnly(
   entry: SolidTrianglePlan,
 ): void {
   const triangleEl = el as SolidTriangleElement;
-  triangleEl.__polycssSolidTriangleBasis = entry.basis;
-  if (el.style.visibility) el.style.visibility = "";
+  if (triangleEl.__polycssSolidTriangleBasis !== entry.basis) {
+    triangleEl.__polycssSolidTriangleBasis = entry.basis;
+  }
+  showSolidTriangleElement(el);
   el.style.transform = entry.transformText;
-  if (entry.polygon.data || ELEMENT_DATA_KEYS.get(el)?.length) {
+  if (entry.polygon.data || hasPolygonDataAttrs(el)) {
     applyPolygonDataAttrs(el, entry.polygon);
   }
 }
 
+function showSolidTriangleElement(el: HTMLElement): void {
+  const triangleEl = el as SolidTriangleElement;
+  if (!triangleEl.__polycssSolidTriangleHidden) return;
+  el.style.visibility = "";
+  triangleEl.__polycssSolidTriangleHidden = false;
+}
+
 function hideSolidTriangleElement(el: HTMLElement): void {
+  const triangleEl = el as SolidTriangleElement;
+  if (triangleEl.__polycssSolidTriangleHidden) return;
   el.style.visibility = "hidden";
+  triangleEl.__polycssSolidTriangleHidden = true;
 }
 
 function stableTriangleColorBudgetCount(
@@ -3789,6 +4065,185 @@ function createHiddenSolidTriangleElement(
   return el;
 }
 
+function updateStableTriangleElementsStreaming(
+  rendered: RenderedPoly[],
+  polygons: Polygon[],
+  options: RenderTextureAtlasOptions,
+  optimizeTriangleStyle: boolean,
+  stableTriangleUpdateMode: "full" | "transform-only" | "color-only" | "plan-only",
+  colorState: StableTriangleColorState,
+): boolean {
+  const internalOptions = options as InternalRenderTextureAtlasOptions;
+  const stableTriangleDebug = internalOptions.stableTriangleDebug;
+  const colorOnly = optimizeTriangleStyle && stableTriangleUpdateMode === "color-only";
+  if (internalOptions.stableTriangleColorPolicy === "adaptive") return false;
+  if (rendered.length !== polygons.length) return false;
+  const matrixDecimals = stableTriangleMatrixDecimals(internalOptions);
+
+  for (let i = 0; i < rendered.length; i++) {
+    const item = rendered[i];
+    if (item.kind !== "triangle" || item.polygonIndex !== i || !polygons[i]) return false;
+  }
+
+  for (let i = 0; i < rendered.length; i++) {
+    const element = rendered[i].element as SolidTriangleElement;
+    const polygon = polygons[i];
+    if (colorOnly) {
+      if (
+        shouldComputeStableTriangleColor(
+          element,
+          i,
+          optimizeTriangleStyle,
+          stableTriangleDebug,
+          internalOptions.stableTriangleColorPolicy,
+          colorState,
+        )
+      ) {
+        const plan = computeSolidTriangleColorPlan(polygon, i, options);
+        if (!plan) continue;
+        applySolidTriangleElementColorOnly(
+          element,
+          plan,
+          colorState,
+        );
+      }
+      continue;
+    }
+
+    const plan = computeSolidTrianglePlan(polygon, i, options, {
+      basis: element.__polycssSolidTriangleBasis,
+      matrixDecimals,
+      includeColor: stableTriangleUpdateMode !== "plan-only" &&
+        stableTriangleUpdateMode !== "transform-only" &&
+        shouldComputeStableTriangleColor(
+          element,
+          i,
+          optimizeTriangleStyle,
+          stableTriangleDebug,
+          internalOptions.stableTriangleColorPolicy,
+          colorState,
+        ),
+    });
+    if (!plan) {
+      hideSolidTriangleElement(element);
+      continue;
+    }
+    if (optimizeTriangleStyle && stableTriangleUpdateMode === "plan-only") {
+      continue;
+    } else if (optimizeTriangleStyle && stableTriangleUpdateMode === "transform-only") {
+      applySolidTriangleElementTransformOnly(element, plan);
+    } else if (optimizeTriangleStyle) {
+      applySolidTriangleElementFast(element, plan, colorState);
+    } else {
+      applySolidTriangleElement(element, plan);
+    }
+  }
+
+  return true;
+}
+
+export function updateStableTriangleFrame(
+  rendered: RenderedPoly[],
+  polygons: Polygon[],
+  frame: SolidTriangleFrame,
+  options: RenderTextureAtlasOptions = {},
+): boolean {
+  const textureLighting = options.textureLighting ?? "baked";
+  const internalOptions = options as InternalRenderTextureAtlasOptions;
+  const optimizeTriangleStyle =
+    internalOptions.optimizeStableTriangleStyle === true &&
+    textureLighting === "baked";
+  if (!optimizeTriangleStyle) return false;
+  if (internalOptions.stableTriangleColorPolicy === "adaptive") return false;
+  if (rendered.length !== frame.polygonCount || polygons.length !== frame.polygonCount) return false;
+  if (frame.vertices.length < frame.polygonCount * 9) return false;
+
+  const stableTriangleDebug = internalOptions.stableTriangleDebug;
+  const stableTriangleUpdateMode = internalOptions.stableTriangleUpdateMode ??
+    (stableTriangleDebug === "plan-only" || stableTriangleDebug === "transform-only"
+      ? stableTriangleDebug
+      : "full");
+  if (stableTriangleUpdateMode === "color-only") return false;
+
+  const matrixDecimals = stableTriangleMatrixDecimals(internalOptions);
+  const colorState = stableTriangleColorState(internalOptions);
+  const tile = options.tileSize ?? DEFAULT_TILE;
+  const elev = options.layerElevation ?? tile;
+
+  for (let i = 0; i < rendered.length; i++) {
+    const item = rendered[i];
+    const polygon = polygons[i];
+    if (
+      item.kind !== "triangle" ||
+      item.polygonIndex !== i ||
+      !polygon ||
+      polygon.vertices.length !== 3 ||
+      polygon.texture ||
+      polygon.material?.texture
+    ) {
+      return false;
+    }
+  }
+
+  const values = frame.vertices;
+  for (let i = 0; i < rendered.length; i++) {
+    const element = rendered[i].element as SolidTriangleElement;
+    const polygon = polygons[i]!;
+    const offset = i * 9;
+    const p0x = values[offset + 1]! * tile;
+    const p0y = values[offset]! * tile;
+    const p0z = values[offset + 2]! * elev;
+    const p1x = values[offset + 4]! * tile;
+    const p1y = values[offset + 3]! * tile;
+    const p1z = values[offset + 5]! * elev;
+    const p2x = values[offset + 7]! * tile;
+    const p2y = values[offset + 6]! * tile;
+    const p2z = values[offset + 8]! * elev;
+    const plan = computeSolidTrianglePlanFromCssPoints(
+      polygon,
+      i,
+      options,
+      {
+        basis: element.__polycssSolidTriangleBasis,
+        matrixDecimals,
+        color: frame.colors?.[i],
+        includeColor: stableTriangleUpdateMode !== "plan-only" &&
+          stableTriangleUpdateMode !== "transform-only" &&
+          shouldComputeStableTriangleColor(
+            element,
+            i,
+            optimizeTriangleStyle,
+            stableTriangleDebug,
+            internalOptions.stableTriangleColorPolicy,
+            colorState,
+          ),
+      },
+      p0x,
+      p0y,
+      p0z,
+      p1x,
+      p1y,
+      p1z,
+      p2x,
+      p2y,
+      p2z,
+    );
+    if (!plan) {
+      hideSolidTriangleElement(element);
+      continue;
+    }
+    if (stableTriangleUpdateMode === "plan-only") {
+      continue;
+    } else if (stableTriangleUpdateMode === "transform-only") {
+      applySolidTriangleElementTransformOnly(element, plan);
+    } else {
+      applySolidTriangleElementFast(element, plan, colorState);
+    }
+  }
+
+  return true;
+}
+
 export function renderPolygonsWithStableTriangles(
   polygons: Polygon[],
   options: RenderTextureAtlasOptions = {},
@@ -3799,11 +4254,12 @@ export function renderPolygonsWithStableTriangles(
   if (polygons.some((polygon) => polygon.texture || polygon.vertices.length !== 3)) {
     return null;
   }
+  const matrixDecimals = stableTriangleMatrixDecimals(options as InternalRenderTextureAtlasOptions);
   const rendered: RenderedPoly[] = [];
 
   for (let i = 0; i < polygons.length; i += 1) {
     const polygon = polygons[i];
-    const plan = computeSolidTrianglePlan(polygon, i, options);
+    const plan = computeSolidTrianglePlan(polygon, i, options, { matrixDecimals });
     const element = plan
       ? createSolidTriangleElement(plan, doc)
       : createHiddenSolidTriangleElement(polygon, doc);
@@ -3841,6 +4297,22 @@ export function updatePolygonsWithStableTriangles(
       : "full");
   const colorOnly = optimizeTriangleStyle && stableTriangleUpdateMode === "color-only";
   const colorState = stableTriangleColorState(internalOptions);
+  const matrixDecimals = stableTriangleMatrixDecimals(internalOptions);
+  if (
+    updateStableTriangleElementsStreaming(
+      rendered,
+      polygons,
+      options,
+      optimizeTriangleStyle,
+      stableTriangleUpdateMode,
+      colorState,
+    )
+  ) {
+    return {
+      rendered,
+      dispose() {},
+    };
+  }
   const nextTrianglePlans: Array<SolidTrianglePlan | null> = new Array(rendered.length);
   const nextTriangleColorPlans: Array<SolidTriangleColorPlan | null> = new Array(rendered.length);
   for (let i = 0; i < rendered.length; i++) {
@@ -3862,6 +4334,7 @@ export function updatePolygonsWithStableTriangles(
     }
     nextTrianglePlans[i] = computeSolidTrianglePlan(polygons[i], i, options, {
       basis: element.__polycssSolidTriangleBasis,
+      matrixDecimals,
       includeColor: stableTriangleUpdateMode !== "plan-only" &&
         stableTriangleUpdateMode !== "transform-only" &&
         shouldComputeStableTriangleColor(
@@ -3954,6 +4427,19 @@ export function updatePolygonsWithStableTopology(
       : "full");
   const colorOnly = optimizeTriangleStyle && stableTriangleUpdateMode === "color-only";
   const colorState = stableTriangleColorState(internalOptions);
+  const matrixDecimals = stableTriangleMatrixDecimals(internalOptions);
+  if (
+    updateStableTriangleElementsStreaming(
+      rendered,
+      polygons,
+      options,
+      optimizeTriangleStyle,
+      stableTriangleUpdateMode,
+      colorState,
+    )
+  ) {
+    return true;
+  }
   const nextTrianglePlans: Array<SolidTrianglePlan | null> = [];
   const nextTriangleColorPlans: Array<SolidTriangleColorPlan | null> = [];
   const nextTexturePlans: Array<TextureAtlasPlan | null> = [];
@@ -3992,6 +4478,7 @@ export function updatePolygonsWithStableTopology(
       }
       const plan = computeSolidTrianglePlan(polygon, i, options, {
         basis: element.__polycssSolidTriangleBasis,
+        matrixDecimals,
         includeColor: stableTriangleUpdateMode !== "plan-only" &&
           stableTriangleUpdateMode !== "transform-only" &&
           shouldComputeStableTriangleColor(
diff --git a/packages/react/src/scene/PolyMesh.tsx b/packages/react/src/scene/PolyMesh.tsx
index 2613186..a398a17 100644
--- a/packages/react/src/scene/PolyMesh.tsx
+++ b/packages/react/src/scene/PolyMesh.tsx
@@ -633,6 +633,7 @@ export const PolyMesh = forwardRef<PolyMeshHandle, PolyMeshProps>(function PolyM
         ambientLight: effectiveAmbient,
         textureLighting: effectiveTextureLighting,
         colorFrame: ++stableTriangleColorFrameRef.current,
+        colorSteps: 8,
         colorFreezeFrames: 12,
         colorMaxStep: 8,
       })
diff --git a/packages/react/src/scene/textureAtlas.tsx b/packages/react/src/scene/textureAtlas.tsx
index e0f9d3a..a6945d6 100644
--- a/packages/react/src/scene/textureAtlas.tsx
+++ b/packages/react/src/scene/textureAtlas.tsx
@@ -58,7 +58,13 @@ export type TextureQuality = number | "auto";
 
 interface RGB { r: number; g: number; b: number; }
 interface RGBFactors { r: number; g: number; b: number; }
+interface StableTriangleBasis {
+  a: number;
+  b: number;
+  c: number;
+}
 interface StableTriangleDomElement extends HTMLElement {
+  __polycssStableTriangleBasis?: StableTriangleBasis;
   __polycssStableTriangleColor?: string;
   __polycssStableTriangleColorRgb?: RGB;
 }
@@ -1163,6 +1169,23 @@ function shadePolygon(
     : rgbToHex({ r, g, b });
 }
 
+function quantizeCssColor(input: string, steps: number): string {
+  if (!Number.isFinite(steps) || steps <= 1) return input;
+  const parsed = parsePureColor(input);
+  if (!parsed) return input;
+  const channelStep = 255 / Math.max(1, Math.round(steps) - 1);
+  const quantize = (value: number) =>
+    Math.max(0, Math.min(255, Math.round(Math.round(value / channelStep) * channelStep)));
+  const rgb = {
+    r: quantize(parsed.rgb[0]),
+    g: quantize(parsed.rgb[1]),
+    b: quantize(parsed.rgb[2]),
+  };
+  return parsed.alpha < 1
+    ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${parsed.alpha})`
+    : rgbToHex(rgb);
+}
+
 function textureTintFactors(
   directScale: number,
   lightColor: string,
@@ -1188,10 +1211,295 @@ export interface StableTriangleDomUpdateOptions {
   ambientLight?: PolyAmbientLight;
   textureLighting?: PolyTextureLightingMode;
   colorFrame?: number;
+  colorSteps?: number;
   colorFreezeFrames?: number;
   colorMaxStep?: number;
 }
 
+interface StableTriangleDomStyle {
+  transform: string;
+  color: string;
+  basis: StableTriangleBasis;
+}
+
+function isStableTriangleBasis(value: StableTriangleBasis | undefined): value is StableTriangleBasis {
+  if (!value) return false;
+  const { a, b, c } = value;
+  return (
+    (a === 0 && b === 1 && c === 2) ||
+    (a === 1 && b === 2 && c === 0) ||
+    (a === 2 && b === 0 && c === 1)
+  );
+}
+
+function offsetStableTrianglePoints(
+  left: number,
+  right: number,
+  height: number,
+  amount: number,
+): number[] {
+  const baseWidth = left + right;
+  if (
+    amount <= 0 ||
+    height <= BASIS_EPS ||
+    baseWidth <= BASIS_EPS ||
+    !Number.isFinite(left + right + height + amount)
+  ) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const leftLen = Math.sqrt(left * left + height * height);
+  const rightLen = Math.sqrt(right * right + height * height);
+  if (leftLen <= BASIS_EPS || rightLen <= BASIS_EPS) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const leftOffsetX = -amount * height / leftLen;
+  const leftOffsetY = -amount * left / leftLen;
+  const rightOffsetX = amount * height / rightLen;
+  const rightOffsetY = -amount * right / rightLen;
+  const apexLineLeftX = left + leftOffsetX;
+  const apexLineLeftY = leftOffsetY;
+  const apexLineRightX = baseWidth + rightOffsetX;
+  const apexLineRightY = height + rightOffsetY;
+  const det = -height * baseWidth;
+  if (Math.abs(det) <= BASIS_EPS) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const qx = apexLineLeftX - apexLineRightX;
+  const qy = apexLineLeftY - apexLineRightY;
+  const t = (qx * height + qy * left) / det;
+  let apexX = apexLineRightX - t * right;
+  let apexY = apexLineRightY - t * height;
+  let baseLeftX = -amount * (left + leftLen) / height;
+  let baseLeftY = height + amount;
+  let baseRightX = baseWidth + amount * (right + rightLen) / height;
+  let baseRightY = baseLeftY;
+
+  const maxMiter = Math.max(2, amount * 4);
+  const apexDx = apexX - left;
+  const apexDy = apexY;
+  const apexMiter = Math.sqrt(apexDx * apexDx + apexDy * apexDy);
+  if (apexMiter > maxMiter) {
+    apexX = left + (apexDx / apexMiter) * maxMiter;
+    apexY = (apexDy / apexMiter) * maxMiter;
+  }
+  const leftMiter = Math.sqrt(baseLeftX * baseLeftX + amount * amount);
+  if (leftMiter > maxMiter) {
+    baseLeftX = (baseLeftX / leftMiter) * maxMiter;
+    baseLeftY = height + (amount / leftMiter) * maxMiter;
+  }
+  const rightDx = baseRightX - baseWidth;
+  const rightMiter = Math.sqrt(rightDx * rightDx + amount * amount);
+  if (rightMiter > maxMiter) {
+    baseRightX = baseWidth + (rightDx / rightMiter) * maxMiter;
+    baseRightY = height + (amount / rightMiter) * maxMiter;
+  }
+
+  return [apexX, apexY, baseLeftX, baseLeftY, baseRightX, baseRightY];
+}
+
+function formatStableTriangleTransformScalars(
+  x0: number,
+  x1: number,
+  x2: number,
+  y0: number,
+  y1: number,
+  y2: number,
+  z0: number,
+  z1: number,
+  z2: number,
+  tx0: number,
+  tx1: number,
+  tx2: number,
+): string {
+  const rx0 = Math.round(x0 * 1000) / 1000 || 0;
+  const rx1 = Math.round(x1 * 1000) / 1000 || 0;
+  const rx2 = Math.round(x2 * 1000) / 1000 || 0;
+  const ry0 = Math.round(y0 * 1000) / 1000 || 0;
+  const ry1 = Math.round(y1 * 1000) / 1000 || 0;
+  const ry2 = Math.round(y2 * 1000) / 1000 || 0;
+  const rz0 = Math.round(z0 * 1000) / 1000 || 0;
+  const rz1 = Math.round(z1 * 1000) / 1000 || 0;
+  const rz2 = Math.round(z2 * 1000) / 1000 || 0;
+  const rtx0 = Math.round(tx0 * 1000) / 1000 || 0;
+  const rtx1 = Math.round(tx1 * 1000) / 1000 || 0;
+  const rtx2 = Math.round(tx2 * 1000) / 1000 || 0;
+  return `matrix3d(${rx0},${rx1},${rx2},0,` +
+    `${ry0},${ry1},${ry2},0,` +
+    `${rz0},${rz1},${rz2},0,` +
+    `${rtx0},${rtx1},${rtx2},1)`;
+}
+
+function computeStableTriangleDomStyle(
+  polygon: Polygon,
+  options: StableTriangleDomUpdateOptions,
+  basisHint?: StableTriangleBasis,
+): StableTriangleDomStyle | null {
+  if (polygon.texture || polygon.vertices.length !== 3) return null;
+
+  const tile = DEFAULT_TILE;
+  const elev = tile;
+  const v0 = polygon.vertices[0];
+  const v1 = polygon.vertices[1];
+  const v2 = polygon.vertices[2];
+  const p0x = v0[1] * tile;
+  const p0y = v0[0] * tile;
+  const p0z = v0[2] * elev;
+  const p1x = v1[1] * tile;
+  const p1y = v1[0] * tile;
+  const p1z = v1[2] * elev;
+  const p2x = v2[1] * tile;
+  const p2y = v2[0] * tile;
+  const p2z = v2[2] * elev;
+  const e10x = p1x - p0x;
+  const e10y = p1y - p0y;
+  const e10z = p1z - p0z;
+  const e20x = p2x - p0x;
+  const e20y = p2y - p0y;
+  const e20z = p2z - p0z;
+  let nx = -(e10y * e20z - e10z * e20y);
+  let ny = -(e10z * e20x - e10x * e20z);
+  let nz = -(e10x * e20y - e10y * e20x);
+  const nLen = Math.sqrt(nx * nx + ny * ny + nz * nz);
+  if (nLen <= BASIS_EPS) return null;
+  nx /= nLen;
+  ny /= nLen;
+  nz /= nLen;
+
+  const len01Sq = e10x * e10x + e10y * e10y + e10z * e10z;
+  const e21x = p2x - p1x;
+  const e21y = p2y - p1y;
+  const e21z = p2z - p1z;
+  const e02x = p0x - p2x;
+  const e02y = p0y - p2y;
+  const e02z = p0z - p2z;
+  const len12Sq = e21x * e21x + e21y * e21y + e21z * e21z;
+  const len20Sq = e02x * e02x + e02y * e02y + e02z * e02z;
+  let a = isStableTriangleBasis(basisHint) ? basisHint.a : 0;
+  let b = isStableTriangleBasis(basisHint) ? basisHint.b : 1;
+  let c = isStableTriangleBasis(basisHint) ? basisHint.c : 2;
+  const retryWithoutBasis = (): StableTriangleDomStyle | null =>
+    basisHint ? computeStableTriangleDomStyle(polygon, options) : null;
+  if (!isStableTriangleBasis(basisHint)) {
+    let baseLengthSq = len01Sq;
+    if (len12Sq > baseLengthSq) {
+      a = 1;
+      b = 2;
+      c = 0;
+      baseLengthSq = len12Sq;
+    }
+    if (len20Sq > baseLengthSq) {
+      a = 2;
+      b = 0;
+      c = 1;
+    }
+  }
+
+  const cvx = c === 0 ? p0x : c === 1 ? p1x : p2x;
+  const cvy = c === 0 ? p0y : c === 1 ? p1y : p2y;
+  const cvz = c === 0 ? p0z : c === 1 ? p1z : p2z;
+  const avx = a === 0 ? p0x : a === 1 ? p1x : p2x;
+  const avy = a === 0 ? p0y : a === 1 ? p1y : p2y;
+  const avz = a === 0 ? p0z : a === 1 ? p1z : p2z;
+  const bvx = b === 0 ? p0x : b === 1 ? p1x : p2x;
+  const bvy = b === 0 ? p0y : b === 1 ? p1y : p2y;
+  const bvz = b === 0 ? p0z : b === 1 ? p1z : p2z;
+
+  const baseDx = bvx - avx;
+  const baseDy = bvy - avy;
+  const baseDz = bvz - avz;
+  const baseLength = Math.sqrt(baseDx * baseDx + baseDy * baseDy + baseDz * baseDz);
+  if (baseLength <= BASIS_EPS) return retryWithoutBasis();
+
+  const x0 = baseDx / baseLength;
+  const x1 = baseDy / baseLength;
+  const x2 = baseDz / baseLength;
+  const apexX = (cvx - avx) * x0 + (cvy - avy) * x1 + (cvz - avz) * x2;
+  let y0 = avx + x0 * apexX - cvx;
+  let y1 = avy + x1 * apexX - cvy;
+  let y2 = avz + x2 * apexX - cvz;
+  const height = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+  if (height <= BASIS_EPS) return retryWithoutBasis();
+  y0 /= height;
+  y1 /= height;
+  y2 /= height;
+
+  const left = Math.max(0, Math.min(baseLength, apexX));
+  const right = Math.max(0, baseLength - left);
+  const expanded = offsetStableTrianglePoints(left, right, height, SOLID_TRIANGLE_BLEED);
+  const apex2x = expanded[0];
+  const apex2y = expanded[1];
+  const baseLeft2x = expanded[2];
+  const baseLeft2y = expanded[3];
+  const baseRight2x = expanded[4];
+  const baseRight2y = expanded[5];
+  const baseY = (baseLeft2y + baseRight2y) / 2;
+  const leftPx = apex2x - baseLeft2x;
+  const rightPx = baseRight2x - apex2x;
+  const heightPx = baseY - apex2y;
+  if (
+    leftPx <= BASIS_EPS ||
+    rightPx <= BASIS_EPS ||
+    heightPx <= BASIS_EPS ||
+    !Number.isFinite(leftPx + rightPx + heightPx)
+  ) {
+    return retryWithoutBasis();
+  }
+
+  const invCanonicalSize = 1 / SOLID_TRIANGLE_CANONICAL_SIZE;
+  const baseWidthPx = leftPx + rightPx;
+  const xScale = baseWidthPx * invCanonicalSize;
+  const yXScale = (rightPx - leftPx) * 0.5 * invCanonicalSize;
+  const yYScale = heightPx * invCanonicalSize;
+  const txXOffset = apex2x - left - baseWidthPx * 0.5;
+  const txYOffset = apex2y;
+  const transform = formatStableTriangleTransformScalars(
+    x0 * xScale,
+    x1 * xScale,
+    x2 * xScale,
+    x0 * yXScale + y0 * yYScale,
+    x1 * yXScale + y1 * yYScale,
+    x2 * yXScale + y2 * yYScale,
+    nx,
+    ny,
+    nz,
+    cvx + x0 * txXOffset + y0 * txYOffset,
+    cvy + x1 * txXOffset + y1 * txYOffset,
+    cvz + x2 * txXOffset + y2 * txYOffset,
+  );
+
+  const directionalCfg = options.directionalLight;
+  const ambientCfg = options.ambientLight;
+  const lightDir = directionalCfg?.direction ?? DEFAULT_LIGHT_DIR;
+  const lightColor = directionalCfg?.color ?? DEFAULT_LIGHT_COLOR;
+  const lightIntensity = Math.max(0, directionalCfg?.intensity ?? DEFAULT_LIGHT_INTENSITY);
+  const ambientColor = ambientCfg?.color ?? DEFAULT_AMBIENT_COLOR;
+  const ambientIntensity = Math.max(0, ambientCfg?.intensity ?? DEFAULT_AMBIENT_INTENSITY);
+  const lLen = Math.sqrt(
+    lightDir[0] * lightDir[0] +
+    lightDir[1] * lightDir[1] +
+    lightDir[2] * lightDir[2],
+  ) || 1;
+  const lx = lightDir[0] / lLen;
+  const ly = lightDir[1] / lLen;
+  const lz = lightDir[2] / lLen;
+  const directScale = lightIntensity * Math.max(0, nx * lx + ny * ly + nz * lz);
+  const shadedColor = shadePolygon(
+    polygon.color ?? "#cccccc",
+    directScale,
+    lightColor,
+    ambientColor,
+    ambientIntensity,
+  );
+  const color = options.colorSteps
+    ? quantizeCssColor(shadedColor, options.colorSteps)
+    : shadedColor;
+
+  return { transform, color, basis: { a, b, c } };
+}
+
 function stableTriangleColorAllowed(index: number, colorFrame: number, freezeFrames: number): boolean {
   return freezeFrames > 0 && (freezeFrames <= 1 || (colorFrame + index) % freezeFrames === 0);
 }
@@ -1241,30 +1549,18 @@ export function updateStableTriangleDom(
   );
   if (leaves.length !== polygons.length) return false;
 
-  const plans = polygons.map((polygon, index) => {
-    if (polygon.texture || polygon.vertices.length !== 3) return null;
-    const plan = computeTextureAtlasPlan(polygon, index, {
-      directionalLight: options.directionalLight,
-      ambientLight: options.ambientLight,
-    });
-    if (!plan || !isSolidTrianglePlan(plan)) return null;
-    const style = solidTriangleStyle(plan, "baked", "auto", {});
-    if (!style?.transform) return null;
-    return style;
-  });
-  if (plans.some((plan) => !plan)) return false;
+  const styles = polygons.map((polygon, index) =>
+    computeStableTriangleDomStyle(polygon, options, leaves[index].__polycssStableTriangleBasis)
+  );
+  if (styles.some((style) => !style)) return false;
 
   for (let i = 0; i < leaves.length; i += 1) {
-    const style = plans[i]!;
+    const style = styles[i]!;
     const el = leaves[i];
     if (el.style.visibility) el.style.visibility = "";
-    el.style.transform = String(style.transform);
-    applyStableTriangleColor(
-      el,
-      i,
-      typeof style.color === "string" ? style.color : "",
-      options,
-    );
+    el.__polycssStableTriangleBasis = style.basis;
+    el.style.transform = style.transform;
+    applyStableTriangleColor(el, i, style.color, options);
   }
   return true;
 }
diff --git a/packages/vue/src/scene/PolyMesh.ts b/packages/vue/src/scene/PolyMesh.ts
index 9ce16a1..41927e1 100644
--- a/packages/vue/src/scene/PolyMesh.ts
+++ b/packages/vue/src/scene/PolyMesh.ts
@@ -372,6 +372,7 @@ export const PolyMesh = defineComponent({
             ambientLight: atlasAmbient.value,
             textureLighting: atlasTextureLighting.value,
             colorFrame: ++stableTriangleColorFrame.value,
+            colorSteps: 8,
             colorFreezeFrames: 12,
             colorMaxStep: 8,
           })
diff --git a/packages/vue/src/scene/textureAtlas.ts b/packages/vue/src/scene/textureAtlas.ts
index 02dc4ae..c6ef3be 100644
--- a/packages/vue/src/scene/textureAtlas.ts
+++ b/packages/vue/src/scene/textureAtlas.ts
@@ -67,7 +67,13 @@ export interface PolyRenderStrategiesOption {
 
 interface RGB { r: number; g: number; b: number; }
 interface RGBFactors { r: number; g: number; b: number; }
+interface StableTriangleBasis {
+  a: number;
+  b: number;
+  c: number;
+}
 interface StableTriangleDomElement extends HTMLElement {
+  __polycssStableTriangleBasis?: StableTriangleBasis;
   __polycssStableTriangleColor?: string;
   __polycssStableTriangleColorRgb?: RGB;
 }
@@ -1171,6 +1177,23 @@ function shadePolygon(
     : rgbToHex({ r, g, b });
 }
 
+function quantizeCssColor(input: string, steps: number): string {
+  if (!Number.isFinite(steps) || steps <= 1) return input;
+  const parsed = parsePureColor(input);
+  if (!parsed) return input;
+  const channelStep = 255 / Math.max(1, Math.round(steps) - 1);
+  const quantize = (value: number) =>
+    Math.max(0, Math.min(255, Math.round(Math.round(value / channelStep) * channelStep)));
+  const rgb = {
+    r: quantize(parsed.rgb[0]),
+    g: quantize(parsed.rgb[1]),
+    b: quantize(parsed.rgb[2]),
+  };
+  return parsed.alpha < 1
+    ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${parsed.alpha})`
+    : rgbToHex(rgb);
+}
+
 function textureTintFactors(
   directScale: number,
   lightColor: string,
@@ -1196,10 +1219,295 @@ export interface StableTriangleDomUpdateOptions {
   ambientLight?: PolyAmbientLight;
   textureLighting?: PolyTextureLightingMode;
   colorFrame?: number;
+  colorSteps?: number;
   colorFreezeFrames?: number;
   colorMaxStep?: number;
 }
 
+interface StableTriangleDomStyle {
+  transform: string;
+  color: string;
+  basis: StableTriangleBasis;
+}
+
+function isStableTriangleBasis(value: StableTriangleBasis | undefined): value is StableTriangleBasis {
+  if (!value) return false;
+  const { a, b, c } = value;
+  return (
+    (a === 0 && b === 1 && c === 2) ||
+    (a === 1 && b === 2 && c === 0) ||
+    (a === 2 && b === 0 && c === 1)
+  );
+}
+
+function offsetStableTrianglePoints(
+  left: number,
+  right: number,
+  height: number,
+  amount: number,
+): number[] {
+  const baseWidth = left + right;
+  if (
+    amount <= 0 ||
+    height <= BASIS_EPS ||
+    baseWidth <= BASIS_EPS ||
+    !Number.isFinite(left + right + height + amount)
+  ) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const leftLen = Math.sqrt(left * left + height * height);
+  const rightLen = Math.sqrt(right * right + height * height);
+  if (leftLen <= BASIS_EPS || rightLen <= BASIS_EPS) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const leftOffsetX = -amount * height / leftLen;
+  const leftOffsetY = -amount * left / leftLen;
+  const rightOffsetX = amount * height / rightLen;
+  const rightOffsetY = -amount * right / rightLen;
+  const apexLineLeftX = left + leftOffsetX;
+  const apexLineLeftY = leftOffsetY;
+  const apexLineRightX = baseWidth + rightOffsetX;
+  const apexLineRightY = height + rightOffsetY;
+  const det = -height * baseWidth;
+  if (Math.abs(det) <= BASIS_EPS) {
+    return offsetConvexPolygonPoints([left, 0, 0, height, baseWidth, height], amount);
+  }
+
+  const qx = apexLineLeftX - apexLineRightX;
+  const qy = apexLineLeftY - apexLineRightY;
+  const t = (qx * height + qy * left) / det;
+  let apexX = apexLineRightX - t * right;
+  let apexY = apexLineRightY - t * height;
+  let baseLeftX = -amount * (left + leftLen) / height;
+  let baseLeftY = height + amount;
+  let baseRightX = baseWidth + amount * (right + rightLen) / height;
+  let baseRightY = baseLeftY;
+
+  const maxMiter = Math.max(2, amount * 4);
+  const apexDx = apexX - left;
+  const apexDy = apexY;
+  const apexMiter = Math.sqrt(apexDx * apexDx + apexDy * apexDy);
+  if (apexMiter > maxMiter) {
+    apexX = left + (apexDx / apexMiter) * maxMiter;
+    apexY = (apexDy / apexMiter) * maxMiter;
+  }
+  const leftMiter = Math.sqrt(baseLeftX * baseLeftX + amount * amount);
+  if (leftMiter > maxMiter) {
+    baseLeftX = (baseLeftX / leftMiter) * maxMiter;
+    baseLeftY = height + (amount / leftMiter) * maxMiter;
+  }
+  const rightDx = baseRightX - baseWidth;
+  const rightMiter = Math.sqrt(rightDx * rightDx + amount * amount);
+  if (rightMiter > maxMiter) {
+    baseRightX = baseWidth + (rightDx / rightMiter) * maxMiter;
+    baseRightY = height + (amount / rightMiter) * maxMiter;
+  }
+
+  return [apexX, apexY, baseLeftX, baseLeftY, baseRightX, baseRightY];
+}
+
+function formatStableTriangleTransformScalars(
+  x0: number,
+  x1: number,
+  x2: number,
+  y0: number,
+  y1: number,
+  y2: number,
+  z0: number,
+  z1: number,
+  z2: number,
+  tx0: number,
+  tx1: number,
+  tx2: number,
+): string {
+  const rx0 = Math.round(x0 * 1000) / 1000 || 0;
+  const rx1 = Math.round(x1 * 1000) / 1000 || 0;
+  const rx2 = Math.round(x2 * 1000) / 1000 || 0;
+  const ry0 = Math.round(y0 * 1000) / 1000 || 0;
+  const ry1 = Math.round(y1 * 1000) / 1000 || 0;
+  const ry2 = Math.round(y2 * 1000) / 1000 || 0;
+  const rz0 = Math.round(z0 * 1000) / 1000 || 0;
+  const rz1 = Math.round(z1 * 1000) / 1000 || 0;
+  const rz2 = Math.round(z2 * 1000) / 1000 || 0;
+  const rtx0 = Math.round(tx0 * 1000) / 1000 || 0;
+  const rtx1 = Math.round(tx1 * 1000) / 1000 || 0;
+  const rtx2 = Math.round(tx2 * 1000) / 1000 || 0;
+  return `matrix3d(${rx0},${rx1},${rx2},0,` +
+    `${ry0},${ry1},${ry2},0,` +
+    `${rz0},${rz1},${rz2},0,` +
+    `${rtx0},${rtx1},${rtx2},1)`;
+}
+
+function computeStableTriangleDomStyle(
+  polygon: Polygon,
+  options: StableTriangleDomUpdateOptions,
+  basisHint?: StableTriangleBasis,
+): StableTriangleDomStyle | null {
+  if (polygon.texture || polygon.vertices.length !== 3) return null;
+
+  const tile = DEFAULT_TILE;
+  const elev = tile;
+  const v0 = polygon.vertices[0];
+  const v1 = polygon.vertices[1];
+  const v2 = polygon.vertices[2];
+  const p0x = v0[1] * tile;
+  const p0y = v0[0] * tile;
+  const p0z = v0[2] * elev;
+  const p1x = v1[1] * tile;
+  const p1y = v1[0] * tile;
+  const p1z = v1[2] * elev;
+  const p2x = v2[1] * tile;
+  const p2y = v2[0] * tile;
+  const p2z = v2[2] * elev;
+  const e10x = p1x - p0x;
+  const e10y = p1y - p0y;
+  const e10z = p1z - p0z;
+  const e20x = p2x - p0x;
+  const e20y = p2y - p0y;
+  const e20z = p2z - p0z;
+  let nx = -(e10y * e20z - e10z * e20y);
+  let ny = -(e10z * e20x - e10x * e20z);
+  let nz = -(e10x * e20y - e10y * e20x);
+  const nLen = Math.sqrt(nx * nx + ny * ny + nz * nz);
+  if (nLen <= BASIS_EPS) return null;
+  nx /= nLen;
+  ny /= nLen;
+  nz /= nLen;
+
+  const len01Sq = e10x * e10x + e10y * e10y + e10z * e10z;
+  const e21x = p2x - p1x;
+  const e21y = p2y - p1y;
+  const e21z = p2z - p1z;
+  const e02x = p0x - p2x;
+  const e02y = p0y - p2y;
+  const e02z = p0z - p2z;
+  const len12Sq = e21x * e21x + e21y * e21y + e21z * e21z;
+  const len20Sq = e02x * e02x + e02y * e02y + e02z * e02z;
+  let a = isStableTriangleBasis(basisHint) ? basisHint.a : 0;
+  let b = isStableTriangleBasis(basisHint) ? basisHint.b : 1;
+  let c = isStableTriangleBasis(basisHint) ? basisHint.c : 2;
+  const retryWithoutBasis = (): StableTriangleDomStyle | null =>
+    basisHint ? computeStableTriangleDomStyle(polygon, options) : null;
+  if (!isStableTriangleBasis(basisHint)) {
+    let baseLengthSq = len01Sq;
+    if (len12Sq > baseLengthSq) {
+      a = 1;
+      b = 2;
+      c = 0;
+      baseLengthSq = len12Sq;
+    }
+    if (len20Sq > baseLengthSq) {
+      a = 2;
+      b = 0;
+      c = 1;
+    }
+  }
+
+  const cvx = c === 0 ? p0x : c === 1 ? p1x : p2x;
+  const cvy = c === 0 ? p0y : c === 1 ? p1y : p2y;
+  const cvz = c === 0 ? p0z : c === 1 ? p1z : p2z;
+  const avx = a === 0 ? p0x : a === 1 ? p1x : p2x;
+  const avy = a === 0 ? p0y : a === 1 ? p1y : p2y;
+  const avz = a === 0 ? p0z : a === 1 ? p1z : p2z;
+  const bvx = b === 0 ? p0x : b === 1 ? p1x : p2x;
+  const bvy = b === 0 ? p0y : b === 1 ? p1y : p2y;
+  const bvz = b === 0 ? p0z : b === 1 ? p1z : p2z;
+
+  const baseDx = bvx - avx;
+  const baseDy = bvy - avy;
+  const baseDz = bvz - avz;
+  const baseLength = Math.sqrt(baseDx * baseDx + baseDy * baseDy + baseDz * baseDz);
+  if (baseLength <= BASIS_EPS) return retryWithoutBasis();
+
+  const x0 = baseDx / baseLength;
+  const x1 = baseDy / baseLength;
+  const x2 = baseDz / baseLength;
+  const apexX = (cvx - avx) * x0 + (cvy - avy) * x1 + (cvz - avz) * x2;
+  let y0 = avx + x0 * apexX - cvx;
+  let y1 = avy + x1 * apexX - cvy;
+  let y2 = avz + x2 * apexX - cvz;
+  const height = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+  if (height <= BASIS_EPS) return retryWithoutBasis();
+  y0 /= height;
+  y1 /= height;
+  y2 /= height;
+
+  const left = Math.max(0, Math.min(baseLength, apexX));
+  const right = Math.max(0, baseLength - left);
+  const expanded = offsetStableTrianglePoints(left, right, height, SOLID_TRIANGLE_BLEED);
+  const apex2x = expanded[0];
+  const apex2y = expanded[1];
+  const baseLeft2x = expanded[2];
+  const baseLeft2y = expanded[3];
+  const baseRight2x = expanded[4];
+  const baseRight2y = expanded[5];
+  const baseY = (baseLeft2y + baseRight2y) / 2;
+  const leftPx = apex2x - baseLeft2x;
+  const rightPx = baseRight2x - apex2x;
+  const heightPx = baseY - apex2y;
+  if (
+    leftPx <= BASIS_EPS ||
+    rightPx <= BASIS_EPS ||
+    heightPx <= BASIS_EPS ||
+    !Number.isFinite(leftPx + rightPx + heightPx)
+  ) {
+    return retryWithoutBasis();
+  }
+
+  const invCanonicalSize = 1 / SOLID_TRIANGLE_CANONICAL_SIZE;
+  const baseWidthPx = leftPx + rightPx;
+  const xScale = baseWidthPx * invCanonicalSize;
+  const yXScale = (rightPx - leftPx) * 0.5 * invCanonicalSize;
+  const yYScale = heightPx * invCanonicalSize;
+  const txXOffset = apex2x - left - baseWidthPx * 0.5;
+  const txYOffset = apex2y;
+  const transform = formatStableTriangleTransformScalars(
+    x0 * xScale,
+    x1 * xScale,
+    x2 * xScale,
+    x0 * yXScale + y0 * yYScale,
+    x1 * yXScale + y1 * yYScale,
+    x2 * yXScale + y2 * yYScale,
+    nx,
+    ny,
+    nz,
+    cvx + x0 * txXOffset + y0 * txYOffset,
+    cvy + x1 * txXOffset + y1 * txYOffset,
+    cvz + x2 * txXOffset + y2 * txYOffset,
+  );
+
+  const directionalCfg = options.directionalLight;
+  const ambientCfg = options.ambientLight;
+  const lightDir = directionalCfg?.direction ?? DEFAULT_LIGHT_DIR;
+  const lightColor = directionalCfg?.color ?? DEFAULT_LIGHT_COLOR;
+  const lightIntensity = Math.max(0, directionalCfg?.intensity ?? DEFAULT_LIGHT_INTENSITY);
+  const ambientColor = ambientCfg?.color ?? DEFAULT_AMBIENT_COLOR;
+  const ambientIntensity = Math.max(0, ambientCfg?.intensity ?? DEFAULT_AMBIENT_INTENSITY);
+  const lLen = Math.sqrt(
+    lightDir[0] * lightDir[0] +
+    lightDir[1] * lightDir[1] +
+    lightDir[2] * lightDir[2],
+  ) || 1;
+  const lx = lightDir[0] / lLen;
+  const ly = lightDir[1] / lLen;
+  const lz = lightDir[2] / lLen;
+  const directScale = lightIntensity * Math.max(0, nx * lx + ny * ly + nz * lz);
+  const shadedColor = shadePolygon(
+    polygon.color ?? "#cccccc",
+    directScale,
+    lightColor,
+    ambientColor,
+    ambientIntensity,
+  );
+  const color = options.colorSteps
+    ? quantizeCssColor(shadedColor, options.colorSteps)
+    : shadedColor;
+
+  return { transform, color, basis: { a, b, c } };
+}
+
 function stableTriangleColorAllowed(index: number, colorFrame: number, freezeFrames: number): boolean {
   return freezeFrames > 0 && (freezeFrames <= 1 || (colorFrame + index) % freezeFrames === 0);
 }
@@ -1249,30 +1557,18 @@ export function updateStableTriangleDom(
   );
   if (leaves.length !== polygons.length) return false;
 
-  const plans = polygons.map((polygon, index) => {
-    if (polygon.texture || polygon.vertices.length !== 3) return null;
-    const plan = computeTextureAtlasPlan(polygon, index, {
-      directionalLight: options.directionalLight,
-      ambientLight: options.ambientLight,
-    });
-    if (!plan || !isSolidTrianglePlan(plan)) return null;
-    const style = solidTriangleStyle(plan, "baked", "auto", {});
-    if (!style?.transform) return null;
-    return style;
-  });
-  if (plans.some((plan) => !plan)) return false;
+  const styles = polygons.map((polygon, index) =>
+    computeStableTriangleDomStyle(polygon, options, leaves[index].__polycssStableTriangleBasis)
+  );
+  if (styles.some((style) => !style)) return false;
 
   for (let i = 0; i < leaves.length; i += 1) {
-    const style = plans[i]!;
+    const style = styles[i]!;
     const el = leaves[i];
     if (el.style.visibility) el.style.visibility = "";
-    el.style.transform = String(style.transform);
-    applyStableTriangleColor(
-      el,
-      i,
-      typeof style.color === "string" ? style.color : "",
-      options,
-    );
+    el.__polycssStableTriangleBasis = style.basis;
+    el.style.transform = style.transform;
+    applyStableTriangleColor(el, i, style.color, options);
   }
   return true;
 }
diff --git a/website/src/components/VanillaScene/VanillaScene.tsx b/website/src/components/VanillaScene/VanillaScene.tsx
index a6c3d95..79ad2e9 100644
--- a/website/src/components/VanillaScene/VanillaScene.tsx
+++ b/website/src/components/VanillaScene/VanillaScene.tsx
@@ -34,7 +34,7 @@ export type { GizmoMode, SceneOptionsState };
 // components in @layoutit/polycss-react and @layoutit/polycss-vue).
 const LIGHT_HELPER_TILE = 50;
 const ANIMATION_STABLE_TRIANGLE_COLOR_POLICY = "cadence";
-const ANIMATION_STABLE_TRIANGLE_COLOR_STEPS = 0;
+const ANIMATION_STABLE_TRIANGLE_COLOR_STEPS = 8;
 const ANIMATION_STABLE_TRIANGLE_COLOR_FREEZE_FRAMES = 12;
 const ANIMATION_STABLE_TRIANGLE_COLOR_MAX_STEP = 8;
 const ANIMATION_TRANSFORM_CACHE_FRAMES = 60;