diff --git a/AGENTS.md b/AGENTS.md
index ff3ca292..a0058ad3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -86,11 +86,12 @@ If you find yourself wanting a `requestAnimationFrame` loop to update many DOM n
 - Brand text is **PolyCSS**. Keep lowercase `polycss` only for literal package names, import paths, CSS classes, domains, and other code identifiers.
 - Every public export gets a `Poly` prefix. Exceptions are generic math types: `Vec2`, `Vec3`, `Polygon`, `PolyMaterial` (already prefixed).
 - **Hooks/composables:** `usePolyCamera`, `usePolyMesh`, `usePolySceneContext`, `usePolySelect`, `usePolySelectionApi`, `usePolyAnimation`.
-- **Components:** `PolyPerspectiveCamera`, `PolyOrthographicCamera`, `PolyOrbitControls`, `PolyMapControls`, `PolyTransformControls`, `PolySelect`, `PolyAxesHelper`, `PolyDirectionalLightHelper`.
+- **Components:** `PolyPerspectiveCamera`, `PolyOrthographicCamera`, `PolyOrbitControls`, `PolyMapControls`, `PolyTransformControls`, `PolySelect`, `PolyAxesHelper`, `PolyDirectionalLightHelper`, `PolyIframe`.
 - **Types:** `PolyDirectionalLight`, `PolyAmbientLight`, `PolyTextureLightingMode`, `PolyAnimationMixer`, `PolyRenderStats`.
 - **Functions:** `findPolyMeshHandle`, `injectPolyBaseStyles`, `collectPolyRenderStats`, `exportPolySceneSnapshot`.
 - **Vanilla factories:** `create*` names stay as-is (`createPolyScene`, `createTransformControls`, `createSelect`).
-- **HTML custom elements:** `poly-` prefix + kebab-case. Existing tags: `<poly-scene>`, `<poly-mesh>`, `<poly-polygon>`, `<poly-perspective-camera>`, `<poly-orthographic-camera>`, `<poly-axes-helper>`, `<poly-directional-light-helper>`. Any new element follows the same shape (e.g. `<poly-transform-controls>`, `<poly-select>`).
+- **HTML custom elements:** `poly-` prefix + kebab-case. Existing tags: `<poly-scene>`, `<poly-mesh>`, `<poly-iframe>`, `<poly-polygon>`, `<poly-perspective-camera>`, `<poly-orthographic-camera>`, `<poly-axes-helper>`, `<poly-directional-light-helper>`. Any new element follows the same shape (e.g. `<poly-transform-controls>`, `<poly-select>`).
+- **`<poly-iframe>`:** flat textured "quad" whose "texture" is a live document (an `<iframe>`) instead of an atlas slice. NOT a render-strategy leaf — same transform conventions as `<poly-mesh>` (`position`/`rotation`/`scale` post-parity; iframe content centered at the wrapper's local origin so rotation/scale pivot at the visible center). Mounted as a child of `.polycss-scene` and inherits the camera transform.
 - **Leaf DOM tags (`<b>`, `<i>`, `<s>`, `<u>`):** internal render-strategy tags. Not part of the public API and not user-facing — do not document them as such.
 - `PolyCamera` is a kept alias for `PolyOrthographicCamera` — the ergonomic default, optimised for iso/voxel/diagrammatic scenes which is PolyCSS's structural strength. **Not deprecated.**
 
diff --git a/packages/polycss/src/elements/PolyIframeElement.test.ts b/packages/polycss/src/elements/PolyIframeElement.test.ts
new file mode 100644
index 00000000..503c2488
--- /dev/null
+++ b/packages/polycss/src/elements/PolyIframeElement.test.ts
@@ -0,0 +1,201 @@
+/**
+ * <poly-iframe> custom element tests. Locates the nearest <poly-scene>,
+ * mounts a wrapper + iframe inside `.polycss-scene`, applies the same
+ * world→CSS transform composition as <poly-mesh>, and tears down on
+ * disconnect.
+ */
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from "vitest";
+import { BASE_TILE } from "@layoutit/polycss-core";
+import { PolyIframeElement, buildIframeTransform } from "./PolyIframeElement";
+import { PolySceneElement } from "./PolySceneElement";
+
+beforeAll(() => {
+  if (!customElements.get("poly-scene")) {
+    customElements.define("poly-scene", PolySceneElement);
+  }
+  if (!customElements.get("poly-iframe")) {
+    customElements.define("poly-iframe", PolyIframeElement);
+  }
+});
+
+describe("PolyIframeElement", () => {
+  let host: HTMLElement;
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    if (host.parentNode) host.parentNode.removeChild(host);
+  });
+
+  describe("registration", () => {
+    it("is registered as <poly-iframe>", () => {
+      expect(customElements.get("poly-iframe")).toBe(PolyIframeElement);
+    });
+
+    it("declares the documented observed attributes", () => {
+      const observed = PolyIframeElement.observedAttributes;
+      expect(observed).toContain("src");
+      expect(observed).toContain("width");
+      expect(observed).toContain("height");
+      expect(observed).toContain("position");
+      expect(observed).toContain("rotation");
+      expect(observed).toContain("scale");
+      expect(observed).toContain("allow");
+    });
+  });
+
+  describe("mounting", () => {
+    it("appends a .polycss-iframe wrapper inside the parent .polycss-scene", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="https://example.com" width="16" height="9"></poly-iframe>
+        </poly-scene>
+      `;
+      const sceneRoot = host.querySelector(".polycss-scene")!;
+      expect(sceneRoot).not.toBeNull();
+      const wrapper = sceneRoot.querySelector(".polycss-iframe");
+      expect(wrapper).not.toBeNull();
+      const iframe = wrapper!.querySelector("iframe");
+      expect(iframe).not.toBeNull();
+      expect(iframe!.src).toBe("https://example.com/");
+    });
+
+    it("removes its wrapper on disconnect", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="https://example.com" width="16" height="9"></poly-iframe>
+        </poly-scene>
+      `;
+      const sceneRoot = host.querySelector(".polycss-scene")!;
+      expect(sceneRoot.querySelector(".polycss-iframe")).not.toBeNull();
+      const polyIframe = host.querySelector("poly-iframe")!;
+      polyIframe.remove();
+      expect(sceneRoot.querySelector(".polycss-iframe")).toBeNull();
+    });
+
+    it("forwards the iframe-content attributes (allow, sandbox, title, loading, referrerpolicy)", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe
+            src="https://example.com"
+            allow="autoplay; encrypted-media"
+            sandbox="allow-scripts"
+            title="Example"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+          ></poly-iframe>
+        </poly-scene>
+      `;
+      const iframe = host.querySelector(".polycss-iframe iframe")!;
+      expect(iframe.getAttribute("allow")).toBe("autoplay; encrypted-media");
+      expect(iframe.getAttribute("sandbox")).toBe("allow-scripts");
+      expect(iframe.getAttribute("title")).toBe("Example");
+      expect(iframe.getAttribute("loading")).toBe("lazy");
+      expect(iframe.getAttribute("referrerpolicy")).toBe("no-referrer");
+    });
+  });
+
+  describe("geometry", () => {
+    it("sets the iframe's CSS-px size from width/height × BASE_TILE (world units)", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9"></poly-iframe>
+        </poly-scene>
+      `;
+      const iframe = host.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+      expect(iframe.style.width).toBe(`${16 * BASE_TILE}px`);
+      expect(iframe.style.height).toBe(`${9 * BASE_TILE}px`);
+    });
+
+    it("centers the iframe at the wrapper's local origin (translate(-w/2, -h/2))", () => {
+      // With width=16, height=9 (world units) → 800px × 450px iframe.
+      // The wrapper transform ends with translate(-400px, -225px) so the
+      // iframe content straddles (0,0) instead of starting at it.
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9"></poly-iframe>
+        </poly-scene>
+      `;
+      const wrapper = host.querySelector(".polycss-iframe") as HTMLElement;
+      expect(wrapper.style.transform).toContain("translate(-400px, -225px)");
+    });
+
+    it("applies world→CSS axis swap on position and ×BASE_TILE", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9" position="3, 5, 7"></poly-iframe>
+        </poly-scene>
+      `;
+      const wrapper = host.querySelector(".polycss-iframe") as HTMLElement;
+      // position=[3, 5, 7] (world axes) → CSS [pos[1]*50, pos[0]*50, pos[2]*50]
+      // = [250, 150, 350]
+      expect(wrapper.style.transform).toContain("translate3d(250px, 150px, 350px)");
+    });
+
+    it("applies the post-parity rotation conjugation (rotateY(-rx) rotateX(-ry) rotateZ(-rz))", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9" rotation="30, 0, 0"></poly-iframe>
+        </poly-scene>
+      `;
+      const wrapper = host.querySelector(".polycss-iframe") as HTMLElement;
+      expect(wrapper.style.transform).toContain("rotateY(-30deg)");
+    });
+
+    it("applies scale via scale3d", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9" scale="2"></poly-iframe>
+        </poly-scene>
+      `;
+      const wrapper = host.querySelector(".polycss-iframe") as HTMLElement;
+      expect(wrapper.style.transform).toContain("scale3d(2, 2, 2)");
+    });
+
+    it("updates transform when position changes", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="about:blank" width="16" height="9" position="0, 0, 0"></poly-iframe>
+        </poly-scene>
+      `;
+      const polyIframe = host.querySelector("poly-iframe")!;
+      polyIframe.setAttribute("position", "1, 2, 3");
+      const wrapper = host.querySelector(".polycss-iframe") as HTMLElement;
+      // position=[1,2,3] → CSS [pos[1]*50, pos[0]*50, pos[2]*50] = [100, 50, 150]
+      expect(wrapper.style.transform).toContain("translate3d(100px, 50px, 150px)");
+    });
+
+    it("updates iframe.src when the src attribute changes", () => {
+      host.innerHTML = `
+        <poly-scene>
+          <poly-iframe src="https://a.example" width="16" height="9"></poly-iframe>
+        </poly-scene>
+      `;
+      const polyIframe = host.querySelector("poly-iframe")!;
+      polyIframe.setAttribute("src", "https://b.example");
+      const iframe = host.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+      expect(iframe.src).toBe("https://b.example/");
+    });
+  });
+
+  describe("buildIframeTransform (pure helper)", () => {
+    it("returns identity-ish transform (just centering) when no position/rotation/scale supplied", () => {
+      const t = buildIframeTransform(undefined, undefined, undefined, 800, 450);
+      expect(t).toBe("translate3d(0px, 0px, 0px) translate(-400px, -225px)");
+    });
+
+    it("composes translate3d → rotation → scale → 2D centering in that order", () => {
+      const t = buildIframeTransform([1, 2, 3], [10, 0, 0], 1.5, 800, 450);
+      // translate3d(pos[1]*50, pos[0]*50, pos[2]*50) → translate3d(100, 50, 150)
+      // rotateY(-rotation[0]) → rotateY(-10)
+      // scale3d(1.5, 1.5, 1.5)
+      // translate(-w/2, -h/2)
+      expect(t).toBe(
+        "translate3d(100px, 50px, 150px) rotateY(-10deg) scale3d(1.5, 1.5, 1.5) translate(-400px, -225px)",
+      );
+    });
+  });
+});
diff --git a/packages/polycss/src/elements/PolyIframeElement.ts b/packages/polycss/src/elements/PolyIframeElement.ts
new file mode 100644
index 00000000..64d332c1
--- /dev/null
+++ b/packages/polycss/src/elements/PolyIframeElement.ts
@@ -0,0 +1,223 @@
+/**
+ * <poly-iframe src="…"> custom element. Vanilla counterpart to React's
+ * <PolyIframe> / Vue's <PolyIframe>. A flat textured "quad" whose texture
+ * is a live document instead of an atlas slice — the iframe inherits the
+ * scene's preserve-3d context so `matrix3d` transforms compose naturally
+ * with surrounding polygons.
+ *
+ * Conventions match `<poly-mesh>` post-parity:
+ *   - `position` (Vec3, world units, world-axis order +X right +Y forward +Z up)
+ *   - `rotation` (Vec3, Euler degrees, world XYZ)
+ *   - `scale`    (number or Vec3, defaults to 1)
+ *   - `width` / `height` (numbers, world units — the iframe surface size)
+ *
+ * The iframe is centered at the wrapper's local origin (the trailing
+ * `translate(-w/2, -h/2)` in the transform string), so rotation/scale
+ * pivot at the visible center — matching `<poly-icosahedron size>` and
+ * other primitive shapes whose vertices straddle the origin.
+ *
+ * On connect: walks up to the nearest `<poly-scene>` and appends a
+ * wrapper div + iframe inside the scene's `.polycss-scene` element so
+ * the CSS camera transform applies. On disconnect: removes the wrapper.
+ */
+import { BASE_TILE } from "@layoutit/polycss-core";
+import type { Vec3 } from "@layoutit/polycss-core";
+import type { PolySceneElement } from "./PolySceneElement";
+
+const ELEMENT_BASE: typeof HTMLElement =
+  typeof HTMLElement !== "undefined"
+    ? HTMLElement
+    : (class {} as unknown as typeof HTMLElement);
+
+const OBSERVED_ATTRS = [
+  "src",
+  "width",
+  "height",
+  "position",
+  "rotation",
+  "scale",
+  "allow",
+  "loading",
+  "referrerpolicy",
+  "sandbox",
+  "title",
+] as const;
+
+function parseVec3(value: string | null): Vec3 | undefined {
+  if (!value) return undefined;
+  const parts = value.split(",").map((p) => parseFloat(p.trim()));
+  if (parts.length !== 3 || parts.some((p) => !Number.isFinite(p))) return undefined;
+  return [parts[0], parts[1], parts[2]];
+}
+
+function parseScale(value: string | null): number | Vec3 | undefined {
+  if (!value) return undefined;
+  if (!value.includes(",")) {
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : undefined;
+  }
+  return parseVec3(value);
+}
+
+function parseNumber(value: string | null, fallback: number): number {
+  if (value === null) return fallback;
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+function findSceneRoot(el: HTMLElement): HTMLElement | null {
+  const sceneCustomEl = el.closest("poly-scene") as
+    | (PolySceneElement & Element)
+    | null;
+  if (!sceneCustomEl) return null;
+  // createPolyScene mounts `.polycss-scene` two levels deep inside
+  // `<poly-scene>` (`<poly-scene> > .polycss-camera > .polycss-scene`).
+  return sceneCustomEl.querySelector(".polycss-scene") as HTMLElement | null;
+}
+
+/**
+ * Build the wrapper transform string. Mirrors `buildMeshTransform` in
+ * `packages/polycss/src/api/scene/transforms.ts` exactly — world→CSS axis
+ * swap on position, rotation conjugation (`rotateY(-rx) rotateX(-ry)
+ * rotateZ(-rz)` because the swap reflects axes, det=-1), scale at the
+ * end. The trailing `translate(-w/2, -h/2)` is the only addition: it
+ * centers the iframe content at the wrapper's local origin (otherwise the
+ * iframe would extend from (0,0) to (w,h) and rotation would pivot at the
+ * iframe's corner).
+ */
+export function buildIframeTransform(
+  position: Vec3 | undefined,
+  rotation: Vec3 | undefined,
+  scale: number | Vec3 | undefined,
+  cssWidth: number,
+  cssHeight: number,
+): string {
+  const sx = typeof scale === "number" ? scale : (scale?.[0] ?? 1);
+  const sy = typeof scale === "number" ? scale : (scale?.[1] ?? 1);
+  const sz = typeof scale === "number" ? scale : (scale?.[2] ?? 1);
+  const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
+  const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
+  const cssX = (position?.[1] ?? 0) * BASE_TILE;
+  const cssY = (position?.[0] ?? 0) * BASE_TILE;
+  const cssZ = (position?.[2] ?? 0) * BASE_TILE;
+
+  const parts: string[] = [];
+  parts.push(`translate3d(${cssX}px, ${cssY}px, ${cssZ}px)`);
+  if (hasRotation) {
+    if (rotation![0]) parts.push(`rotateY(${-rotation![0]}deg)`);
+    if (rotation![1]) parts.push(`rotateX(${-rotation![1]}deg)`);
+    if (rotation![2]) parts.push(`rotateZ(${-rotation![2]}deg)`);
+  }
+  if (hasScale) {
+    parts.push(`scale3d(${sx}, ${sy}, ${sz})`);
+  }
+  // 2D translate at the end: rotation/scale operate on the centered
+  // iframe, then the centering offset is applied. Order matters — placing
+  // this before rotation would rotate the offset itself and the iframe
+  // would orbit instead of spinning in place.
+  parts.push(`translate(${-cssWidth / 2}px, ${-cssHeight / 2}px)`);
+  return parts.join(" ");
+}
+
+export class PolyIframeElement extends ELEMENT_BASE {
+  static get observedAttributes(): string[] {
+    return [...OBSERVED_ATTRS];
+  }
+
+  private _wrapper: HTMLDivElement | null = null;
+  private _iframe: HTMLIFrameElement | null = null;
+
+  /** The iframe element this <poly-iframe> mounted, or null when detached. */
+  getIframeElement(): HTMLIFrameElement | null {
+    return this._iframe;
+  }
+
+  connectedCallback(): void {
+    this._mount();
+  }
+
+  disconnectedCallback(): void {
+    this._teardown();
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void {
+    if (oldValue === newValue) return;
+    if (!this._wrapper || !this._iframe) return;
+    if (name === "src") {
+      this._iframe.src = this.getAttribute("src") ?? "";
+      return;
+    }
+    if (name === "allow" || name === "loading" || name === "referrerpolicy" || name === "sandbox" || name === "title") {
+      const v = this.getAttribute(name);
+      if (v === null) this._iframe.removeAttribute(name);
+      else this._iframe.setAttribute(name, v);
+      return;
+    }
+    // Geometry-affecting attribute: rebuild transform + iframe size.
+    this._applyGeometry();
+  }
+
+  private _mount(): void {
+    const sceneRoot = findSceneRoot(this);
+    if (!sceneRoot) return;
+    const doc = this.ownerDocument;
+    if (!doc) return;
+
+    const wrapper = doc.createElement("div");
+    wrapper.className = "polycss-iframe";
+    wrapper.style.position = "absolute";
+    wrapper.style.left = "0";
+    wrapper.style.top = "0";
+    wrapper.style.transformOrigin = "0 0";
+    wrapper.style.transformStyle = "preserve-3d";
+
+    const iframe = doc.createElement("iframe");
+    iframe.style.display = "block";
+    iframe.style.border = "0";
+    iframe.style.background = "#000";
+    // Forward iframe-specific attributes if they're set on the custom
+    // element. Useful for autoplay (`allow="autoplay"`), iOS inline
+    // playback (`playsinline` — passed via the src URL params on YouTube
+    // embeds, not via an attribute), permissions, etc.
+    const src = this.getAttribute("src");
+    if (src) iframe.src = src;
+    const allow = this.getAttribute("allow");
+    if (allow) iframe.setAttribute("allow", allow);
+    for (const attr of ["loading", "referrerpolicy", "sandbox", "title"] as const) {
+      const v = this.getAttribute(attr);
+      if (v !== null) iframe.setAttribute(attr, v);
+    }
+
+    wrapper.appendChild(iframe);
+    sceneRoot.appendChild(wrapper);
+    this._wrapper = wrapper;
+    this._iframe = iframe;
+    this._applyGeometry();
+  }
+
+  private _applyGeometry(): void {
+    if (!this._wrapper || !this._iframe) return;
+    const width = parseNumber(this.getAttribute("width"), 16);
+    const height = parseNumber(this.getAttribute("height"), 9);
+    const cssW = width * BASE_TILE;
+    const cssH = height * BASE_TILE;
+    this._iframe.style.width = `${cssW}px`;
+    this._iframe.style.height = `${cssH}px`;
+    const position = parseVec3(this.getAttribute("position"));
+    const rotation = parseVec3(this.getAttribute("rotation"));
+    const scale = parseScale(this.getAttribute("scale"));
+    this._wrapper.style.transform = buildIframeTransform(position, rotation, scale, cssW, cssH);
+  }
+
+  private _teardown(): void {
+    if (this._wrapper?.parentNode) {
+      this._wrapper.parentNode.removeChild(this._wrapper);
+    }
+    this._wrapper = null;
+    this._iframe = null;
+  }
+}
diff --git a/packages/polycss/src/elements/PolyOrthographicCameraElement.ts b/packages/polycss/src/elements/PolyOrthographicCameraElement.ts
index 53bb206c..9d90e82d 100644
--- a/packages/polycss/src/elements/PolyOrthographicCameraElement.ts
+++ b/packages/polycss/src/elements/PolyOrthographicCameraElement.ts
@@ -100,5 +100,10 @@ export class PolyOrthographicCameraElement extends ELEMENT_BASE {
     if (opts.rotY !== undefined) this._camera.update({ rotY: opts.rotY });
     if (opts.target !== undefined) this._camera.update({ target: opts.target });
     if (opts.distance !== undefined) this._camera.update({ distance: opts.distance });
+    // Push the updated transform into the scene root. <poly-scene> is a
+    // DESCENDANT of <poly-orthographic-camera>, not an ancestor.
+    const sceneEl = this.querySelector("poly-scene");
+    const sc = (sceneEl as unknown as { getScene?: () => { applyCamera: () => void } | null } | null)?.getScene?.();
+    sc?.applyCamera();
   }
 }
diff --git a/packages/polycss/src/elements/PolyPerspectiveCameraElement.ts b/packages/polycss/src/elements/PolyPerspectiveCameraElement.ts
index 0f090b30..ee942022 100644
--- a/packages/polycss/src/elements/PolyPerspectiveCameraElement.ts
+++ b/packages/polycss/src/elements/PolyPerspectiveCameraElement.ts
@@ -95,16 +95,36 @@ export class PolyPerspectiveCameraElement extends ELEMENT_BASE {
   }
 
   attributeChangedCallback(
-    _name: string,
+    name: string,
     oldValue: string | null,
     newValue: string | null,
   ): void {
     if (oldValue === newValue) return;
     if (!this._camera || !this._wrapper) return;
     const opts = this._readOptions();
-    // Re-create camera with new options (options like perspective require re-creation).
-    // createPolyPerspectiveCamera already applies all opts in its constructor.
-    this._camera = createPolyPerspectiveCamera(opts);
-    this._wrapper.style.perspective = this._camera.perspectiveStyle;
+    if (name === "perspective") {
+      // Re-creating the handle is required for perspective — it's baked
+      // into `perspectiveStyle` on the wrapper. Everything else uses
+      // update() so the SCENE keeps its reference to the same handle.
+      this._camera = createPolyPerspectiveCamera(opts);
+      this._wrapper.style.perspective = this._camera.perspectiveStyle;
+      return;
+    }
+    // Mutate the existing handle in place — the scene captured this object
+    // on connect and looks it up by identity on every `applyCamera()`,
+    // so swapping the reference here would orphan the scene's pointer.
+    this._camera.update({
+      rotX: opts.rotX,
+      rotY: opts.rotY,
+      zoom: opts.zoom,
+      target: opts.target,
+      distance: opts.distance,
+    });
+    // Push the updated transform into the scene root. <poly-scene> is a
+    // DESCENDANT of <poly-perspective-camera>, not an ancestor — the
+    // scene wraps itself inside the camera's .polycss-camera div on mount.
+    const sceneEl = this.querySelector("poly-scene");
+    const sc = (sceneEl as unknown as { getScene?: () => { applyCamera: () => void } | null } | null)?.getScene?.();
+    sc?.applyCamera();
   }
 }
diff --git a/packages/polycss/src/elements/PolyShapeElements.ts b/packages/polycss/src/elements/PolyShapeElements.ts
index 5119051a..12dc2655 100644
--- a/packages/polycss/src/elements/PolyShapeElements.ts
+++ b/packages/polycss/src/elements/PolyShapeElements.ts
@@ -87,6 +87,42 @@ abstract class PolyShapeElement extends ELEMENT_BASE {
     this._tearDown();
   }
 
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void {
+    if (oldValue === newValue) return;
+    if (!this._handle) return;
+    // Transform attributes update the handle in place. Geometry attributes
+    // (size, color, etc.) require re-emitting polygons — re-mount.
+    if (
+      name === "position" ||
+      name === "scale" ||
+      name === "rotation" ||
+      name === "cast-shadow" ||
+      name === "receive-shadow"
+    ) {
+      this._handle.setTransform({
+        position: parseVec3Attr(this, "position"),
+        scale: (() => {
+          const raw = this.getAttribute("scale");
+          if (!raw) return undefined;
+          if (raw.includes(",")) return parseVec3Attr(this, "scale");
+          const n = parseFloat(raw);
+          return Number.isFinite(n) ? n : undefined;
+        })(),
+        rotation: parseVec3Attr(this, "rotation"),
+        castShadow: this.hasAttribute("cast-shadow"),
+        receiveShadow: this.hasAttribute("receive-shadow"),
+      });
+      return;
+    }
+    // Geometry/material change: tear down and re-mount.
+    this._tearDown();
+    this._mount();
+  }
+
   private _tearDown(): void {
     if (this._handle) {
       try { this._handle.dispose(); } catch { /* ignore */ }
@@ -125,6 +161,14 @@ abstract class PolyShapeElement extends ELEMENT_BASE {
           return Number.isFinite(n) ? n : undefined;
         })(),
         rotation: parseVec3Attr(this, "rotation"),
+        // Shadow flags mirror <poly-mesh> so primitive shapes can act as
+        // ground planes for shadow receivers without needing a GLB.
+        castShadow: this.hasAttribute("cast-shadow"),
+        receiveShadow: this.hasAttribute("receive-shadow"),
+        // Helper shapes (ground planes, axes, light gizmos) shouldn't
+        // skew the scene's auto-center calculation. Opt out via the
+        // `exclude-from-auto-center` attribute.
+        excludeFromAutoCenter: this.hasAttribute("exclude-from-auto-center"),
         merge: false,
       },
     );
@@ -150,15 +194,33 @@ export class PolyBoxElement extends PolyShapeElement {
 
 export class PolyPlaneElement extends PolyShapeElement {
   static get observedAttributes(): string[] {
-    return ["axis", "size", "color", "auto-center", "position", "scale", "rotation"];
+    return [
+      "axis",
+      "size",
+      "offset",
+      "color",
+      "auto-center",
+      "position",
+      "scale",
+      "rotation",
+      "cast-shadow",
+      "receive-shadow",
+    ];
   }
 
   buildPolygons(): Polygon[] {
     const axisRaw = numAttr(this, "axis", 2);
     const axis = (axisRaw === 0 || axisRaw === 1 || axisRaw === 2 ? axisRaw : 2) as 0 | 1 | 2;
+    // Default offset to 0 (plane centered at the element's local origin) —
+    // `planePolygons` itself defaults to `size * 2` because it was authored
+    // for transform-control drag handles, but for ground planes / generic
+    // quads "centered" is the obvious user expectation.
+    const offsetAttr = this.getAttribute("offset");
+    const offset = offsetAttr === null ? 0 : parseFloat(offsetAttr);
     return planePolygons({
       axis,
       size: numAttr(this, "size", 0.4),
+      offset: Number.isFinite(offset) ? offset : 0,
       color: strAttr(this, "color"),
     });
   }
diff --git a/packages/polycss/src/elements/index.ts b/packages/polycss/src/elements/index.ts
index fd4a773b..8ed380a9 100644
--- a/packages/polycss/src/elements/index.ts
+++ b/packages/polycss/src/elements/index.ts
@@ -11,6 +11,7 @@
  */
 import { PolySceneElement } from "./PolySceneElement";
 import { PolyMeshElement } from "./PolyMeshElement";
+import { PolyIframeElement } from "./PolyIframeElement";
 import { PolyPolygonElement } from "./PolyPolygonElement";
 import { PolyAxesHelperElement } from "./PolyAxesHelperElement";
 import { PolyDirectionalLightHelperElement } from "./PolyDirectionalLightHelperElement";
@@ -43,6 +44,9 @@ if (typeof customElements !== "undefined") {
   if (!customElements.get("poly-mesh")) {
     customElements.define("poly-mesh", PolyMeshElement);
   }
+  if (!customElements.get("poly-iframe")) {
+    customElements.define("poly-iframe", PolyIframeElement);
+  }
   if (!customElements.get("poly-polygon")) {
     customElements.define("poly-polygon", PolyPolygonElement);
   }
@@ -117,6 +121,7 @@ if (typeof customElements !== "undefined") {
 export {
   PolySceneElement,
   PolyMeshElement,
+  PolyIframeElement,
   PolyPolygonElement,
   PolyAxesHelperElement,
   PolyDirectionalLightHelperElement,
diff --git a/packages/polycss/src/index.ts b/packages/polycss/src/index.ts
index 60042139..750055f7 100644
--- a/packages/polycss/src/index.ts
+++ b/packages/polycss/src/index.ts
@@ -74,6 +74,7 @@ export type {
 // ── Custom element classes (without auto-registering — that's @layoutit/polycss/elements) ──
 export { PolySceneElement } from "./elements/PolySceneElement";
 export { PolyMeshElement } from "./elements/PolyMeshElement";
+export { PolyIframeElement } from "./elements/PolyIframeElement";
 export { PolyPolygonElement } from "./elements/PolyPolygonElement";
 export { PolyOrbitControlsElement } from "./elements/PolyOrbitControlsElement";
 export { PolyMapControlsElement } from "./elements/PolyMapControlsElement";
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7c7a42c5..62297ab2 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -22,10 +22,11 @@ export type {
   PolyCameraContextValue,
 } from "./camera";
 
-export { PolyScene, PolyMesh, PolyGround, usePolySceneContext, usePolyMesh, findPolyMeshHandle, pointInMeshElement, findMeshUnderPoint, usePolyMaterial } from "./scene";
+export { PolyScene, PolyMesh, PolyIframe, PolyGround, usePolySceneContext, usePolyMesh, findPolyMeshHandle, pointInMeshElement, findMeshUnderPoint, usePolyMaterial } from "./scene";
 export type {
   PolySceneProps,
   PolyMeshProps,
+  PolyIframeProps,
   PolyGroundProps,
   UseSceneContextOptions,
   UseSceneContextResult,
diff --git a/packages/react/src/scene/PolyIframe.test.tsx b/packages/react/src/scene/PolyIframe.test.tsx
new file mode 100644
index 00000000..69575374
--- /dev/null
+++ b/packages/react/src/scene/PolyIframe.test.tsx
@@ -0,0 +1,129 @@
+/**
+ * <PolyIframe> React component tests. Renders an <iframe> wrapper inside
+ * the scene's preserve-3d context with the same world→CSS transform
+ * conventions as <PolyMesh>.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { BASE_TILE } from "@layoutit/polycss-core";
+import { PolyCamera } from "../camera/PolyCamera";
+import { PolyScene } from "./PolyScene";
+import { PolyIframe } from "./PolyIframe";
+
+function renderIframe(
+  props: React.ComponentProps<typeof PolyIframe>,
+): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() =>
+    root.render(
+      React.createElement(
+        PolyCamera,
+        {},
+        React.createElement(
+          PolyScene,
+          {},
+          React.createElement(PolyIframe, props),
+        ),
+      ),
+    ),
+  );
+  return container;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("<PolyIframe>", () => {
+  it("renders an <iframe> inside .polycss-iframe inside .polycss-scene", () => {
+    const container = renderIframe({ src: "https://example.com", width: 16, height: 9 });
+    const sceneRoot = container.querySelector(".polycss-scene");
+    expect(sceneRoot).not.toBeNull();
+    const wrapper = sceneRoot!.querySelector(".polycss-iframe");
+    expect(wrapper).not.toBeNull();
+    const iframe = wrapper!.querySelector("iframe");
+    expect(iframe).not.toBeNull();
+    expect(iframe!.getAttribute("src")).toBe("https://example.com");
+  });
+
+  it("sets the iframe's CSS-px size from width/height × BASE_TILE (world units)", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9 });
+    const iframe = container.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+    expect(iframe.style.width).toBe(`${16 * BASE_TILE}px`);
+    expect(iframe.style.height).toBe(`${9 * BASE_TILE}px`);
+  });
+
+  it("centers the iframe at the wrapper's local origin (translate(-w/2, -h/2))", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9 });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("translate(-400px, -225px)");
+  });
+
+  it("applies world→CSS axis swap on position and ×BASE_TILE", () => {
+    const container = renderIframe({
+      src: "about:blank",
+      width: 16,
+      height: 9,
+      position: [3, 5, 7],
+    });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    // position=[3, 5, 7] → CSS [pos[1]*50, pos[0]*50, pos[2]*50] = [250, 150, 350]
+    expect(wrapper.style.transform).toContain("translate3d(250px, 150px, 350px)");
+  });
+
+  it("applies the post-parity rotation conjugation (rotateY(-rx) rotateX(-ry) rotateZ(-rz))", () => {
+    const container = renderIframe({
+      src: "about:blank",
+      width: 16,
+      height: 9,
+      rotation: [30, 0, 0],
+    });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("rotateY(-30deg)");
+  });
+
+  it("applies scale via scale3d", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9, scale: 2 });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("scale3d(2, 2, 2)");
+  });
+
+  it("forwards iframe attributes (allow, sandbox, loading, referrerPolicy, title)", () => {
+    const container = renderIframe({
+      src: "https://example.com",
+      width: 16,
+      height: 9,
+      allow: "autoplay; encrypted-media",
+      sandbox: "allow-scripts",
+      loading: "lazy",
+      referrerPolicy: "no-referrer",
+      title: "Example",
+    });
+    const iframe = container.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+    expect(iframe.getAttribute("allow")).toBe("autoplay; encrypted-media");
+    expect(iframe.getAttribute("sandbox")).toBe("allow-scripts");
+    expect(iframe.getAttribute("loading")).toBe("lazy");
+    expect(iframe.getAttribute("referrerpolicy")).toBe("no-referrer");
+    expect(iframe.getAttribute("title")).toBe("Example");
+  });
+
+  it("merges className + style overrides on the wrapper without overwriting transform", () => {
+    const container = renderIframe({
+      src: "about:blank",
+      width: 16,
+      height: 9,
+      position: [1, 0, 0],
+      className: "tv-screen",
+      style: { opacity: 0.9 },
+    });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.className).toContain("polycss-iframe");
+    expect(wrapper.className).toContain("tv-screen");
+    expect(wrapper.style.opacity).toBe("0.9");
+    // position[1]=0 → cssX=0, position[0]=1 → cssY=50.
+    expect(wrapper.style.transform).toContain("translate3d(0px, 50px, 0px)");
+  });
+});
diff --git a/packages/react/src/scene/PolyIframe.tsx b/packages/react/src/scene/PolyIframe.tsx
new file mode 100644
index 00000000..8d420365
--- /dev/null
+++ b/packages/react/src/scene/PolyIframe.tsx
@@ -0,0 +1,133 @@
+/**
+ * <PolyIframe> — React counterpart to vanilla's <poly-iframe>. A flat
+ * textured "quad" whose texture is a live document instead of an atlas
+ * slice. Mounts an <iframe> inside the scene's preserve-3d context so the
+ * camera transform composes naturally with surrounding polygons.
+ *
+ * Conventions mirror post-parity <PolyMesh>:
+ *   - `position` (Vec3, world units, world-axis order)
+ *   - `rotation` (Vec3, Euler degrees, world XYZ)
+ *   - `scale`    (number or Vec3, defaults to 1)
+ *   - `width` / `height` (numbers, world units)
+ *
+ * The iframe is centered at the wrapper's local origin (the trailing
+ * `translate(-w/2, -h/2)` in the transform string), so rotation/scale
+ * pivot at the visible center — same shape as `<PolyIcosahedron size>`
+ * whose vertices straddle the origin.
+ */
+import type { CSSProperties, IframeHTMLAttributes } from "react";
+import { BASE_TILE, type Vec3 } from "@layoutit/polycss-core";
+
+export interface PolyIframeProps {
+  /** Iframe URL — forwarded to the underlying <iframe>'s `src` attribute. */
+  src: string;
+  /** Width in world units (multiplied by BASE_TILE for CSS px). */
+  width: number;
+  /** Height in world units (multiplied by BASE_TILE for CSS px). */
+  height: number;
+  /** World-units position (+X right, +Y forward, +Z up). */
+  position?: Vec3;
+  /** World Euler XYZ in degrees. */
+  rotation?: Vec3;
+  /** Uniform scale (number) or per-axis Vec3. */
+  scale?: number | Vec3;
+  /** Forwarded to the underlying <iframe>'s `allow`. */
+  allow?: string;
+  /** Forwarded to the underlying <iframe>'s `sandbox`. */
+  sandbox?: string;
+  /** Forwarded to the underlying <iframe>'s `loading`. */
+  loading?: IframeHTMLAttributes<HTMLIFrameElement>["loading"];
+  /** Forwarded to the underlying <iframe>'s `referrerpolicy`. */
+  referrerPolicy?: IframeHTMLAttributes<HTMLIFrameElement>["referrerPolicy"];
+  /** Forwarded to the underlying <iframe>'s `title` (a11y label). */
+  title?: string;
+  className?: string;
+  /** Style overrides on the wrapper div (NOT on the iframe). */
+  style?: CSSProperties;
+}
+
+/**
+ * Build the wrapper transform string. Mirrors vanilla's
+ * `buildIframeTransform` exactly — world→CSS axis swap on position,
+ * rotation conjugation (`rotateY(-rx) rotateX(-ry) rotateZ(-rz)` because
+ * the swap reflects axes, det=-1), scale at the end. The trailing
+ * `translate(-w/2, -h/2)` centers the iframe content at the wrapper's
+ * local origin so rotation/scale pivot at the visible center.
+ */
+function buildIframeTransform(
+  position: Vec3 | undefined,
+  rotation: Vec3 | undefined,
+  scale: number | Vec3 | undefined,
+  cssWidth: number,
+  cssHeight: number,
+): string {
+  const sx = typeof scale === "number" ? scale : (scale?.[0] ?? 1);
+  const sy = typeof scale === "number" ? scale : (scale?.[1] ?? 1);
+  const sz = typeof scale === "number" ? scale : (scale?.[2] ?? 1);
+  const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
+  const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
+  const cssX = (position?.[1] ?? 0) * BASE_TILE;
+  const cssY = (position?.[0] ?? 0) * BASE_TILE;
+  const cssZ = (position?.[2] ?? 0) * BASE_TILE;
+  const parts: string[] = [];
+  parts.push(`translate3d(${cssX}px, ${cssY}px, ${cssZ}px)`);
+  if (hasRotation) {
+    if (rotation![0]) parts.push(`rotateY(${-rotation![0]}deg)`);
+    if (rotation![1]) parts.push(`rotateX(${-rotation![1]}deg)`);
+    if (rotation![2]) parts.push(`rotateZ(${-rotation![2]}deg)`);
+  }
+  if (hasScale) parts.push(`scale3d(${sx}, ${sy}, ${sz})`);
+  parts.push(`translate(${-cssWidth / 2}px, ${-cssHeight / 2}px)`);
+  return parts.join(" ");
+}
+
+export function PolyIframe({
+  src,
+  width,
+  height,
+  position,
+  rotation,
+  scale,
+  allow,
+  sandbox,
+  loading,
+  referrerPolicy,
+  title,
+  className,
+  style,
+}: PolyIframeProps) {
+  const cssW = width * BASE_TILE;
+  const cssH = height * BASE_TILE;
+  const transform = buildIframeTransform(position, rotation, scale, cssW, cssH);
+  const wrapperStyle: CSSProperties = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    transformOrigin: "0 0",
+    transformStyle: "preserve-3d",
+    transform,
+    ...style,
+  };
+  return (
+    <div
+      className={`polycss-iframe${className ? ` ${className}` : ""}`}
+      style={wrapperStyle}
+    >
+      <iframe
+        src={src}
+        allow={allow}
+        sandbox={sandbox}
+        loading={loading}
+        referrerPolicy={referrerPolicy}
+        title={title}
+        style={{
+          width: cssW,
+          height: cssH,
+          border: 0,
+          display: "block",
+          background: "#000",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/react/src/scene/index.ts b/packages/react/src/scene/index.ts
index 3c35f653..a791477e 100644
--- a/packages/react/src/scene/index.ts
+++ b/packages/react/src/scene/index.ts
@@ -3,6 +3,8 @@ export type { PolySceneProps } from "./PolyScene";
 export type { PolyRenderStrategy, PolyRenderStrategiesOption } from "./atlas";
 export { PolyMesh } from "./PolyMesh";
 export type { PolyMeshProps } from "./PolyMesh";
+export { PolyIframe } from "./PolyIframe";
+export type { PolyIframeProps } from "./PolyIframe";
 export { PolyGround } from "./PolyGround";
 export type { PolyGroundProps } from "./PolyGround";
 export { usePolySceneContext } from "./useSceneContext";
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index e8819d30..719e036e 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -16,6 +16,8 @@ export type { PolySceneProps } from "./scene";
 export type { PolyRenderStrategy, PolyRenderStrategiesOption } from "@layoutit/polycss-core";
 export { PolyMesh } from "./scene";
 export type { PolyMeshProps } from "./scene";
+export { PolyIframe } from "./scene";
+export type { PolyIframeProps } from "./scene";
 export { PolyGround } from "./scene";
 export type { PolyGroundProps } from "./scene";
 export { usePolySceneContext } from "./scene";
diff --git a/packages/vue/src/scene/PolyIframe.test.ts b/packages/vue/src/scene/PolyIframe.test.ts
new file mode 100644
index 00000000..847a0bbd
--- /dev/null
+++ b/packages/vue/src/scene/PolyIframe.test.ts
@@ -0,0 +1,116 @@
+/**
+ * <PolyIframe> Vue component tests. Mirrors the React + vanilla counterparts —
+ * renders an <iframe> wrapper inside the scene's preserve-3d context with
+ * the same world→CSS transform conventions as <PolyMesh>.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+import { BASE_TILE } from "@layoutit/polycss-core";
+import { PolyCamera } from "../camera/PolyCamera";
+import { PolyScene } from "./PolyScene";
+import { PolyIframe, type PolyIframeProps } from "./PolyIframe";
+
+let mountedApps: Array<{ container: HTMLElement; app: ReturnType<typeof createApp> }> = [];
+
+function renderIframe(
+  iframeProps: PolyIframeProps,
+): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    setup() {
+      return () =>
+        h(PolyCamera, {}, {
+          default: () =>
+            h(PolyScene, {}, {
+              default: () => h(PolyIframe, iframeProps),
+            }),
+        });
+    },
+  });
+  app.mount(container);
+  mountedApps.push({ container, app });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mountedApps) {
+    app.unmount();
+    if (container.parentNode) container.parentNode.removeChild(container);
+  }
+  mountedApps = [];
+});
+
+describe("<PolyIframe> (Vue)", () => {
+  it("renders an <iframe> inside .polycss-iframe inside .polycss-scene", () => {
+    const container = renderIframe({ src: "https://example.com", width: 16, height: 9 });
+    const sceneRoot = container.querySelector(".polycss-scene");
+    expect(sceneRoot).not.toBeNull();
+    const wrapper = sceneRoot!.querySelector(".polycss-iframe");
+    expect(wrapper).not.toBeNull();
+    const iframe = wrapper!.querySelector("iframe");
+    expect(iframe).not.toBeNull();
+    expect(iframe!.getAttribute("src")).toBe("https://example.com");
+  });
+
+  it("sets the iframe's CSS-px size from width/height × BASE_TILE (world units)", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9 });
+    const iframe = container.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+    expect(iframe.style.width).toBe(`${16 * BASE_TILE}px`);
+    expect(iframe.style.height).toBe(`${9 * BASE_TILE}px`);
+  });
+
+  it("centers the iframe at the wrapper's local origin (translate(-w/2, -h/2))", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9 });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("translate(-400px, -225px)");
+  });
+
+  it("applies world→CSS axis swap on position and ×BASE_TILE", () => {
+    const container = renderIframe({
+      src: "about:blank",
+      width: 16,
+      height: 9,
+      position: [3, 5, 7],
+    });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    // position=[3, 5, 7] → CSS [pos[1]*50, pos[0]*50, pos[2]*50] = [250, 150, 350]
+    expect(wrapper.style.transform).toContain("translate3d(250px, 150px, 350px)");
+  });
+
+  it("applies the post-parity rotation conjugation (rotateY(-rx) rotateX(-ry) rotateZ(-rz))", () => {
+    const container = renderIframe({
+      src: "about:blank",
+      width: 16,
+      height: 9,
+      rotation: [30, 0, 0],
+    });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("rotateY(-30deg)");
+  });
+
+  it("applies scale via scale3d", () => {
+    const container = renderIframe({ src: "about:blank", width: 16, height: 9, scale: 2 });
+    const wrapper = container.querySelector(".polycss-iframe") as HTMLElement;
+    expect(wrapper.style.transform).toContain("scale3d(2, 2, 2)");
+  });
+
+  it("forwards iframe attributes (allow, sandbox, loading, referrerpolicy, title)", () => {
+    const container = renderIframe({
+      src: "https://example.com",
+      width: 16,
+      height: 9,
+      allow: "autoplay; encrypted-media",
+      sandbox: "allow-scripts",
+      loading: "lazy",
+      referrerpolicy: "no-referrer",
+      title: "Example",
+    });
+    const iframe = container.querySelector(".polycss-iframe iframe") as HTMLIFrameElement;
+    expect(iframe.getAttribute("allow")).toBe("autoplay; encrypted-media");
+    expect(iframe.getAttribute("sandbox")).toBe("allow-scripts");
+    expect(iframe.getAttribute("loading")).toBe("lazy");
+    expect(iframe.getAttribute("referrerpolicy")).toBe("no-referrer");
+    expect(iframe.getAttribute("title")).toBe("Example");
+  });
+});
diff --git a/packages/vue/src/scene/PolyIframe.ts b/packages/vue/src/scene/PolyIframe.ts
new file mode 100644
index 00000000..625f786c
--- /dev/null
+++ b/packages/vue/src/scene/PolyIframe.ts
@@ -0,0 +1,130 @@
+/**
+ * `<PolyIframe>` (Vue) — flat textured "quad" whose texture is a live
+ * document instead of an atlas slice. Mounts an `<iframe>` inside the
+ * scene's preserve-3d context so `matrix3d` transforms compose with
+ * surrounding polygons.
+ *
+ * Mirrors the React + vanilla counterparts 1:1. Conventions match
+ * post-parity `<PolyMesh>`:
+ *   - `position` (Vec3, world units, world-axis order +X right +Y forward +Z up)
+ *   - `rotation` (Vec3, Euler degrees, world XYZ)
+ *   - `scale`    (number or Vec3, defaults to 1)
+ *   - `width` / `height` (numbers, world units)
+ *
+ * The iframe is centered at the wrapper's local origin (trailing
+ * `translate(-w/2, -h/2)` in the transform string), so rotation/scale
+ * pivot at the visible center — same shape as `<PolyIcosahedron size>`.
+ */
+import { defineComponent, h, computed } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import { BASE_TILE, type Vec3 } from "@layoutit/polycss-core";
+
+export interface PolyIframeProps {
+  src: string;
+  width: number;
+  height: number;
+  position?: Vec3;
+  rotation?: Vec3;
+  scale?: number | Vec3;
+  allow?: string;
+  sandbox?: string;
+  loading?: "lazy" | "eager";
+  referrerpolicy?: string;
+  title?: string;
+  class?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Build the wrapper transform string. Mirrors vanilla's
+ * `buildIframeTransform` and React's exactly — world→CSS axis swap on
+ * position, rotation conjugation (`rotateY(-rx) rotateX(-ry)
+ * rotateZ(-rz)`), scale at the end, trailing `translate(-w/2, -h/2)` to
+ * center the iframe content at the wrapper's local origin.
+ */
+function buildIframeTransform(
+  position: Vec3 | undefined,
+  rotation: Vec3 | undefined,
+  scale: number | Vec3 | undefined,
+  cssWidth: number,
+  cssHeight: number,
+): string {
+  const sx = typeof scale === "number" ? scale : (scale?.[0] ?? 1);
+  const sy = typeof scale === "number" ? scale : (scale?.[1] ?? 1);
+  const sz = typeof scale === "number" ? scale : (scale?.[2] ?? 1);
+  const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
+  const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
+  const cssX = (position?.[1] ?? 0) * BASE_TILE;
+  const cssY = (position?.[0] ?? 0) * BASE_TILE;
+  const cssZ = (position?.[2] ?? 0) * BASE_TILE;
+  const parts: string[] = [];
+  parts.push(`translate3d(${cssX}px, ${cssY}px, ${cssZ}px)`);
+  if (hasRotation) {
+    if (rotation![0]) parts.push(`rotateY(${-rotation![0]}deg)`);
+    if (rotation![1]) parts.push(`rotateX(${-rotation![1]}deg)`);
+    if (rotation![2]) parts.push(`rotateZ(${-rotation![2]}deg)`);
+  }
+  if (hasScale) parts.push(`scale3d(${sx}, ${sy}, ${sz})`);
+  parts.push(`translate(${-cssWidth / 2}px, ${-cssHeight / 2}px)`);
+  return parts.join(" ");
+}
+
+export const PolyIframe = defineComponent({
+  name: "PolyIframe",
+  props: {
+    src: { type: String, required: true },
+    width: { type: Number, required: true },
+    height: { type: Number, required: true },
+    position: { type: Array as unknown as PropType<Vec3>, default: undefined },
+    rotation: { type: Array as unknown as PropType<Vec3>, default: undefined },
+    scale: { type: [Number, Array] as unknown as PropType<number | Vec3>, default: undefined },
+    allow: { type: String, default: undefined },
+    sandbox: { type: String, default: undefined },
+    loading: { type: String as PropType<"lazy" | "eager">, default: undefined },
+    referrerpolicy: { type: String, default: undefined },
+    title: { type: String, default: undefined },
+    class: { type: String, default: undefined },
+    style: { type: Object as PropType<CSSProperties>, default: undefined },
+  },
+  setup(props) {
+    const cssW = computed(() => props.width * BASE_TILE);
+    const cssH = computed(() => props.height * BASE_TILE);
+    const transform = computed(() =>
+      buildIframeTransform(props.position, props.rotation, props.scale, cssW.value, cssH.value),
+    );
+    return () => {
+      const wrapperStyle: CSSProperties = {
+        position: "absolute",
+        left: "0",
+        top: "0",
+        transformOrigin: "0 0",
+        transformStyle: "preserve-3d",
+        transform: transform.value,
+        ...(props.style ?? {}),
+      };
+      const iframeAttrs: Record<string, unknown> = {
+        src: props.src,
+        style: {
+          width: `${cssW.value}px`,
+          height: `${cssH.value}px`,
+          border: "0",
+          display: "block",
+          background: "#000",
+        },
+      };
+      if (props.allow) iframeAttrs.allow = props.allow;
+      if (props.sandbox) iframeAttrs.sandbox = props.sandbox;
+      if (props.loading) iframeAttrs.loading = props.loading;
+      if (props.referrerpolicy) iframeAttrs.referrerpolicy = props.referrerpolicy;
+      if (props.title) iframeAttrs.title = props.title;
+      return h(
+        "div",
+        {
+          class: props.class ? `polycss-iframe ${props.class}` : "polycss-iframe",
+          style: wrapperStyle,
+        },
+        [h("iframe", iframeAttrs)],
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/scene/index.ts b/packages/vue/src/scene/index.ts
index 78413797..05a3a7ea 100644
--- a/packages/vue/src/scene/index.ts
+++ b/packages/vue/src/scene/index.ts
@@ -2,6 +2,8 @@ export { PolyScene } from "./PolyScene";
 export type { PolySceneProps } from "./PolyScene";
 export { PolyMesh } from "./PolyMesh";
 export type { PolyMeshProps } from "./PolyMesh";
+export { PolyIframe } from "./PolyIframe";
+export type { PolyIframeProps } from "./PolyIframe";
 export { PolyGround } from "./PolyGround";
 export type { PolyGroundProps } from "./PolyGround";
 export { usePolySceneContext } from "./useSceneContext";
diff --git a/website/public/tv/electronic-tv.glb b/website/public/tv/electronic-tv.glb
new file mode 100644
index 00000000..7972e968
Binary files /dev/null and b/website/public/tv/electronic-tv.glb differ
diff --git a/website/public/tv/materials.mtl b/website/public/tv/materials.mtl
new file mode 100644
index 00000000..b54f1178
--- /dev/null
+++ b/website/public/tv/materials.mtl
@@ -0,0 +1,114 @@
+newmtl mat0
+  Ka 0.73 0.41 0.78
+  Kd 0.50 0.14 0.58
+
+newmtl mat1
+  Ka 0.61 0.15 0.69
+  Kd 0.34 0.02 0.44
+
+newmtl mat2
+  Ka 0.40 0.23 0.72
+  Kd 0.13 0.04 0.49
+
+newmtl mat3
+  Ka 0.50 0.87 0.92
+  Kd 0.22 0.74 0.83
+
+newmtl mat4
+  Ka 0.00 0.74 0.83
+  Kd 0.00 0.52 0.66
+
+newmtl mat5
+  Ka 0.01 0.61 0.90
+  Kd 0.00 0.34 0.79
+
+newmtl mat6
+  Ka 0.97 0.73 0.82
+  Kd 0.94 0.50 0.65
+
+newmtl mat7
+  Ka 0.94 0.38 0.57
+  Kd 0.87 0.12 0.29
+
+newmtl mat8
+  Ka 0.96 0.26 0.21
+  Kd 0.91 0.05 0.03
+
+newmtl mat9
+  Ka 0.55 0.76 0.29
+  Kd 0.27 0.55 0.07
+
+newmtl mat10
+  Ka 0.30 0.69 0.31
+  Kd 0.07 0.44 0.08
+
+newmtl mat11
+  Ka 0.00 0.59 0.53
+  Kd 0.00 0.31 0.25
+
+newmtl mat12
+  Ka 1.00 0.92 0.23
+  Kd 1.00 0.83 0.04
+
+newmtl mat13
+  Ka 1.00 0.60 0.00
+  Kd 1.00 0.33 0.00
+
+newmtl mat14
+  Ka 1.00 0.34 0.13
+  Kd 1.00 0.09 0.01
+
+newmtl mat15
+  Ka 0.81 0.85 0.86
+  Kd 0.63 0.70 0.72
+
+newmtl mat16
+  Ka 0.47 0.56 0.61
+  Kd 0.19 0.28 0.34
+
+newmtl mat17
+  Ka 0.27 0.35 0.39
+  Kd 0.06 0.10 0.13
+
+newmtl mat18
+  Ka 1.00 0.80 0.53
+  Kd 1.00 0.61 0.25
+
+newmtl mat19
+  Ka 0.87 0.60 0.27
+  Kd 0.74 0.33 0.06
+
+newmtl mat20
+  Ka 0.47 0.33 0.28
+  Kd 0.19 0.09 0.06
+
+newmtl mat21
+  Ka 1.00 1.00 1.00
+  Kd 1.00 1.00 1.00
+
+newmtl mat22
+  Ka 0.62 0.62 0.62
+  Kd 0.35 0.35 0.35
+
+newmtl mat23
+  Ka 0.10 0.10 0.10
+  Kd 0.01 0.01 0.01
+
+newmtl mat24
+  Ka 0.58 0.65 1.00
+  Kd 0.83 0.89 0.87
+  Ks 1 1 1
+  illum 4
+  Ns 300
+  d 0.4
+  Ni 1.5
+
+newmtl mat25
+  Ka 1.00 0.65 0.67
+  Kd 0.83 0.89 0.87
+  Ks 1 1 1
+  illum 4
+  Ns 300
+  d 0.4
+  Ni 1.5
+
diff --git a/website/public/tv/monitor.glb b/website/public/tv/monitor.glb
new file mode 100644
index 00000000..95cfb1ef
Binary files /dev/null and b/website/public/tv/monitor.glb differ
diff --git a/website/public/tv/old-tv.glb b/website/public/tv/old-tv.glb
new file mode 100644
index 00000000..d501d631
Binary files /dev/null and b/website/public/tv/old-tv.glb differ
diff --git a/website/public/tv/retro-tvs.glb b/website/public/tv/retro-tvs.glb
new file mode 100644
index 00000000..02fe78ae
Binary files /dev/null and b/website/public/tv/retro-tvs.glb differ
diff --git a/website/public/tv/tv-obj.obj b/website/public/tv/tv-obj.obj
new file mode 100644
index 00000000..13aef7b6
--- /dev/null
+++ b/website/public/tv/tv-obj.obj
@@ -0,0 +1,334 @@
+mtllib materials.mtl
+v 0.008260489 -0.04237592 -1.321995
+v 0.008260608 1.638598 -1.321995
+v -0.04970384 1.638598 -1.321995
+v -0.04970384 -0.04237592 -1.321995
+v 0.008260369 -0.04237616 1.298005
+v -0.04970419 -0.04237592 1.298005
+v -0.04970419 1.638598 1.298005
+v 0.008260489 1.638598 1.298005
+v 0.101004 0.04167247 1.167005
+v 0.1010039 0.04167235 0.5775049
+v 0.1010038 0.04167235 -0.01199527
+v 0.1010039 0.04167259 -1.190995
+v -0.04970396 1.55455 -1.225774
+v -0.04970419 0.04167259 -1.225774
+v -0.04970419 1.554549 1.201784
+v -0.04970443 0.04167223 1.201784
+v -0.003332257 1.554551 -1.225774
+v -0.003332853 0.04167259 -1.225774
+v -0.003332019 1.554549 1.201784
+v -0.003332853 0.04167163 1.201784
+v 0.1010041 1.554549 1.167005
+v 0.101004 0.7981106 1.167005
+v 0.101004 0.4198912 1.167005
+v 0.1010041 1.554549 -1.190995
+v 0.1010041 1.554549 -0.01199536
+v 0.1010041 1.554549 0.5775048
+v 0.101004 0.4198914 0.5775049
+v 0.1010041 0.7981108 0.5775048
+v 0.06622517 0.7791995 1.13753
+v 0.06622517 0.4388022 1.13753
+v 0.06622541 0.7791995 0.60698
+v 0.06622517 0.4388024 0.6069802
+v 0.0660615 0.005283356 -0.8718761
+v 0.06078374 0.005283356 -0.891573
+v 0.06078374 -0.1435045 -0.891573
+v 0.0660615 -0.1435045 -0.8718761
+v 0.04636455 0.005283356 -0.9059922
+v 0.04636455 -0.1435045 -0.9059922
+v 0.02666759 0.005283356 -0.91127
+v 0.02666759 -0.1435045 -0.91127
+v 0.006970644 0.005283356 -0.9059922
+v 0.006970644 -0.1435045 -0.9059922
+v -0.007448554 0.005283356 -0.891573
+v -0.007448554 -0.1435045 -0.891573
+v -0.01272631 0.005283356 -0.8718761
+v -0.01272631 -0.1435045 -0.8718761
+v -0.007448554 0.005283356 -0.8521791
+v -0.007448554 -0.1435045 -0.8521791
+v 0.006970644 0.005283356 -0.8377599
+v 0.006970644 -0.1435045 -0.8377599
+v 0.02666759 0.005283356 -0.8324821
+v 0.02666759 -0.1435045 -0.8324821
+v 0.04636455 0.005283356 -0.8377599
+v 0.04636455 -0.1435045 -0.8377599
+v 0.06078374 0.005283356 -0.8521791
+v 0.06078374 -0.1435045 -0.8521791
+v 0.02666771 -0.1277469 -0.9112701
+v 0.02666771 -0.2065347 -0.9112701
+v 0.02666771 -0.2065347 -0.8324822
+v 0.02666771 -0.1277469 -0.8324822
+v -0.2254535 -0.1828985 -0.9112701
+v -0.2254535 -0.1828984 -0.8324822
+v -0.2333323 -0.2065347 -0.8324822
+v -0.2333323 -0.2065347 -0.9112701
+v 0.02666759 -0.1277469 -0.8324822
+v 0.02666759 -0.2065347 -0.8324822
+v 0.02666759 -0.2065349 -0.9112701
+v 0.02666759 -0.1277469 -0.9112701
+v 0.2787888 -0.1828985 -0.8324822
+v 0.2787888 -0.1828984 -0.9112701
+v 0.2866676 -0.2065347 -0.9112701
+v 0.2866676 -0.2065347 -0.8324822
+v -0.06404471 -0.01868761 -0.01375399
+v -0.0533669 -0.01271069 -0.000859201
+v -0.04198956 -0.006639123 -0.01309465
+v -0.05266738 -0.01261604 -0.02598943
+v -0.08108056 0.01251662 -0.01411067
+v -0.06970322 0.01858819 -0.02634612
+v -0.05902541 0.0245651 -0.01345133
+v -0.07040274 0.01849353 -0.00121589
+v -0.0540663 -0.01280534 0.02427103
+v -0.06258428 0.002796769 0.02409269
+v -0.05120695 0.008868337 0.01185723
+v -0.04268897 -0.006733775 0.01203558
+v -0.07542181 -0.02475917 -0.001518548
+v -0.06404448 -0.01868761 -0.013754
+v -0.07256246 -0.003085494 -0.01393233
+v -0.08393979 -0.009157062 -0.001696892
+v -0.08177996 0.01242197 0.01101953
+v -0.07110214 0.01839888 0.02391432
+v -0.06258416 0.002796769 0.02409266
+v -0.07326198 -0.003180146 0.01119788
+v -0.05902529 0.0245651 -0.01345137
+v -0.05050731 0.00896287 -0.01327302
+v -0.03982949 0.01493979 -0.0003782287
+v -0.04834747 0.0305419 -0.0005565807
+v 0.06606126 0.005283356 0.876912
+v 0.06078351 0.005283356 0.857215
+v 0.06078351 -0.1435045 0.857215
+v 0.06606126 -0.1435045 0.876912
+v 0.04636431 0.005283356 0.8427958
+v 0.04636431 -0.1435045 0.8427958
+v 0.02666736 0.005283356 0.837518
+v 0.02666736 -0.1435045 0.837518
+v 0.006970406 0.005283356 0.8427958
+v 0.006970406 -0.1435045 0.8427958
+v -0.007448792 0.005283356 0.857215
+v -0.007448792 -0.1435045 0.857215
+v -0.01272655 0.005283356 0.876912
+v -0.01272655 -0.1435045 0.876912
+v -0.007448792 0.005283356 0.896609
+v -0.007448792 -0.1435045 0.8966089
+v 0.006970406 0.005283356 0.9110282
+v 0.006970406 -0.1435045 0.9110282
+v 0.02666736 0.005283356 0.916306
+v 0.02666736 -0.1435045 0.916306
+v 0.04636431 0.005283356 0.9110282
+v 0.04636431 -0.1435045 0.9110282
+v 0.06078351 0.005283356 0.8966089
+v 0.06078351 -0.1435045 0.8966089
+v 0.02666748 -0.1277469 0.837518
+v 0.02666748 -0.2065347 0.837518
+v 0.02666748 -0.2065347 0.9163058
+v 0.02666748 -0.1277469 0.9163058
+v -0.2254537 -0.1828985 0.837518
+v -0.2254537 -0.1828984 0.9163058
+v -0.2333325 -0.2065347 0.9163058
+v -0.2333325 -0.2065347 0.837518
+v 0.02666736 -0.1277469 0.9163058
+v 0.02666736 -0.2065347 0.9163058
+v 0.02666736 -0.2065349 0.8375179
+v 0.02666736 -0.1277469 0.8375179
+v 0.2787886 -0.1828985 0.9163058
+v 0.2787886 -0.1828984 0.837518
+v 0.2866673 -0.2065347 0.837518
+v 0.2866673 -0.2065347 0.9163058
+vn 1.192093E-07 0 -1
+vn -1.192093E-07 0 1
+vn 0.6715186 -0.7409877 4.169548E-08
+vn -1 -3.092428E-08 -3.931006E-07
+vn 0 -1 5.960464E-08
+vn 0 1 -5.960464E-08
+vn -1 1.385621E-06 -2.334701E-07
+vn -1 -3.211531E-08 2.112402E-06
+vn -1 -2.576436E-06 -2.334699E-07
+vn -1.328757E-07 -8.145818E-16 1
+vn 4.768359E-06 -1 -1.280043E-07
+vn -2.89798E-06 3.978166E-13 -1
+vn 2.384197E-06 1 5.373864E-08
+vn -1 -5.960464E-08 -1.788139E-07
+vn 0.8161659 -1.826389E-09 0.5778176
+vn 0.6715189 0.7409875 4.675599E-08
+vn 0.816166 -3.710706E-08 -0.5778176
+vn 1 5.960464E-08 1.788139E-07
+vn 1 5.960464E-08 1.788139E-07
+vn 1 5.960464E-08 1.788139E-07
+vn 1 5.960464E-08 1.788139E-07
+vn 0.6465386 7.85761E-09 -0.7628813
+vn 0.4777022 -0.8785218 -3.821583E-08
+vn 0.6465421 -1.446852E-07 0.7628784
+vn 0.4776974 0.8785245 9.223174E-08
+vn 1 5.960464E-08 1.788139E-07
+vn 0.9659263 -3.145554E-08 -0.2588176
+vn 0.7071067 4.063829E-08 -0.707107
+vn 0.2588205 -1.583137E-07 -0.9659256
+vn -0.2588204 3.715962E-08 -0.9659256
+vn -0.7071069 1.321423E-07 -0.7071068
+vn -0.9659263 2.750201E-07 -0.2588175
+vn -0.9659265 -5.58243E-08 0.258817
+vn -0.7071054 9.467179E-08 0.7071083
+vn -0.2588205 -1.096793E-07 0.9659256
+vn 0.2588204 2.318784E-09 0.9659256
+vn 0.7071071 3.139044E-08 0.7071067
+vn 0.9659262 1.85283E-07 0.2588179
+vn 1.748456E-07 1 0
+vn -1.748456E-07 -1 0
+vn 1 5.50865E-08 -1.267504E-07
+vn -0.9486833 0.3162278 1.725507E-07
+vn -1.267504E-07 1.192093E-07 -1
+vn 1.267504E-07 -1.192093E-07 1
+vn -0.2136969 0.9768999 1.441615E-07
+vn 5.508648E-08 -1 -1.192093E-07
+vn -1 -1.19759E-07 3.932762E-08
+vn 0.9486834 0.316228 -1.084628E-07
+vn 3.932759E-08 3.576279E-07 1
+vn -3.932759E-08 -3.576279E-07 -1
+vn 0.2136968 0.9768999 -1.837073E-07
+vn 1.197591E-07 -1 1.788139E-07
+vn 0.4791607 -0.8776699 0.01003245
+vn -0.4791607 0.8776699 -0.01003245
+vn -0.6400112 -0.3415441 0.688283
+vn 0.6400112 0.3415441 -0.688283
+vn -0.6006587 -0.3362191 -0.725373
+vn 0.6006587 0.3362191 0.725373
+vn 0.6006584 0.3362194 0.725373
+vn -0.6006584 -0.3362194 -0.725373
+vn -0.6400108 -0.3415446 0.688283
+vn 0.6400108 0.3415446 -0.688283
+vn 0.4791613 -0.8776696 0.01003239
+vn -0.4791613 0.8776696 -0.01003239
+vn -0.6400112 -0.341544 0.688283
+vn 0.6400112 0.341544 -0.688283
+vn -0.4791609 0.8776698 -0.01003288
+vn 0.4791609 -0.8776698 0.01003288
+vn -0.6006585 -0.3362194 -0.725373
+vn 0.6006585 0.3362194 0.725373
+vn 0.9659263 -3.145555E-08 -0.2588174
+vn 0.7071068 4.063829E-08 -0.7071069
+vn 0.2588207 -1.583137E-07 -0.9659256
+vn -0.2588202 3.715963E-08 -0.9659256
+vn -0.7071068 1.321423E-07 -0.7071069
+vn -0.9659263 2.750201E-07 -0.2588177
+vn -0.9659265 -5.58243E-08 0.2588168
+vn -0.7071055 9.467179E-08 0.7071082
+vn -0.2588207 -1.096793E-07 0.9659256
+vn 0.2588202 2.318775E-09 0.9659256
+vn 0.7071069 3.139042E-08 0.7071068
+vn 0.9659262 1.85283E-07 0.258818
+vn 1.748456E-07 1 3.552714E-14
+vn -1.748456E-07 -1 -3.552714E-14
+vn 1 5.508649E-08 4.809518E-08
+vn -0.9486833 0.3162278 6.677641E-09
+vn 4.809518E-08 1.192093E-07 -1
+vn -4.809518E-08 -1.192093E-07 1
+vn -0.2136969 0.9768999 1.067976E-07
+vn 5.50865E-08 -1 -1.192093E-07
+vn -1 -1.19759E-07 -1.355179E-07
+vn 0.9486834 0.316228 5.741022E-08
+vn -1.35518E-07 3.576279E-07 1
+vn 1.35518E-07 -3.576279E-07 -1
+vn 0.2136968 0.9768999 -1.463434E-07
+vn 1.19759E-07 -1 1.788139E-07
+usemtl mat23
+f 4//1 3//1 2//1 1//1
+f 8//2 7//2 6//2 5//2
+f 12//3 11//3 10//3 9//3 5//3 1//3
+f 14//4 13//4 3//4 4//4
+f 5//5 6//5 4//5 1//5
+f 3//6 7//6 8//6 2//6
+f 13//7 15//7 7//7 3//7
+f 15//8 16//8 6//8 7//8
+f 16//9 14//9 4//9 6//9
+f 18//10 17//10 13//10 14//10
+f 17//11 19//11 15//11 13//11
+f 19//12 20//12 16//12 15//12
+f 20//13 18//13 14//13 16//13
+f 9//15 23//15 22//15 21//15 8//15 5//15
+f 21//16 26//16 25//16 24//16 2//16 8//16
+f 24//17 12//17 1//17 2//17
+f 24//18 25//18 11//18 12//18
+f 25//19 26//19 28//19 27//19 10//19 11//19
+f 27//20 23//20 9//20 10//20
+f 28//21 26//21 21//21 22//21
+f 30//22 29//22 22//22 23//22
+f 29//23 31//23 28//23 22//23
+f 31//24 32//24 27//24 28//24
+f 32//25 30//25 23//25 27//25
+f 32//26 31//26 29//26 30//26
+f 36//27 35//27 34//27 33//27
+f 35//28 38//28 37//28 34//28
+f 38//29 40//29 39//29 37//29
+f 40//30 42//30 41//30 39//30
+f 42//31 44//31 43//31 41//31
+f 44//32 46//32 45//32 43//32
+f 46//33 48//33 47//33 45//33
+f 48//34 50//34 49//34 47//34
+f 50//35 52//35 51//35 49//35
+f 52//36 54//36 53//36 51//36
+f 54//37 56//37 55//37 53//37
+f 56//38 36//38 33//38 55//38
+f 33//39 34//39 37//39 39//39 41//39 43//39 45//39 47//39 49//39 51//39 53//39 55//39
+f 56//40 54//40 52//40 50//40 48//40 46//40 44//40 42//40 40//40 38//40 35//40 36//40
+f 60//41 59//41 58//41 57//41
+f 64//42 63//42 62//42 61//42
+f 58//43 64//43 61//43 57//43
+f 62//44 63//44 59//44 60//44
+f 61//45 62//45 60//45 57//45
+f 59//46 63//46 64//46 58//46
+f 68//47 67//47 66//47 65//47
+f 72//48 71//48 70//48 69//48
+f 66//49 72//49 69//49 65//49
+f 70//50 71//50 67//50 68//50
+f 69//51 70//51 68//51 65//51
+f 67//52 71//52 72//52 66//52
+f 100//71 99//71 98//71 97//71
+f 99//72 102//72 101//72 98//72
+f 102//73 104//73 103//73 101//73
+f 104//74 106//74 105//74 103//74
+f 106//75 108//75 107//75 105//75
+f 108//76 110//76 109//76 107//76
+f 110//77 112//77 111//77 109//77
+f 112//78 114//78 113//78 111//78
+f 114//79 116//79 115//79 113//79
+f 116//80 118//80 117//80 115//80
+f 118//81 120//81 119//81 117//81
+f 120//82 100//82 97//82 119//82
+f 97//83 98//83 101//83 103//83 105//83 107//83 109//83 111//83 113//83 115//83 117//83 119//83
+f 120//84 118//84 116//84 114//84 112//84 110//84 108//84 106//84 104//84 102//84 99//84 100//84
+f 124//85 123//85 122//85 121//85
+f 128//86 127//86 126//86 125//86
+f 122//87 128//87 125//87 121//87
+f 126//88 127//88 123//88 124//88
+f 125//89 126//89 124//89 121//89
+f 123//90 127//90 128//90 122//90
+f 132//91 131//91 130//91 129//91
+f 136//92 135//92 134//92 133//92
+f 130//93 136//93 133//93 129//93
+f 134//94 135//94 131//94 132//94
+f 133//95 134//95 132//95 129//95
+f 131//96 135//96 136//96 130//96
+usemtl mat17
+f 20//14 19//14 17//14 18//14
+usemtl mat12
+f 76//53 75//53 74//53 73//53
+f 80//54 79//54 78//54 77//54
+f 74//55 80//55 77//55 73//55
+f 78//56 79//56 75//56 76//56
+f 77//57 78//57 76//57 73//57
+f 75//58 79//58 80//58 74//58
+usemtl mat4
+f 84//59 83//59 82//59 81//59
+f 88//60 87//60 86//60 85//60
+f 82//61 88//61 85//61 81//61
+f 86//62 87//62 83//62 84//62
+f 85//63 86//63 84//63 81//63
+f 83//64 87//64 88//64 82//64
+usemtl mat8
+f 92//65 91//65 90//65 89//65
+f 96//66 95//66 94//66 93//66
+f 90//67 96//67 93//67 89//67
+f 94//68 95//68 91//68 92//68
+f 93//69 94//69 92//69 89//69
+f 91//70 95//70 96//70 90//70
diff --git a/website/src/components/DocsHeader.astro b/website/src/components/DocsHeader.astro
index c20b8bad..18e3d8d7 100644
--- a/website/src/components/DocsHeader.astro
+++ b/website/src/components/DocsHeader.astro
@@ -12,6 +12,7 @@ const isLanding = pathname === '/';
 const isGallery = pathname.startsWith('/gallery');
 const isBuilder = pathname.startsWith('/builder');
 const isWordart = pathname.startsWith('/wordart');
+const isTv = pathname.startsWith('/tv');
 // Hide search dock on landing + workbench pages (gallery, builder) where
 // the Starlight floating search position overlaps the workbench's own
 // sidebar / search input. Branding + GitHub still render on workbenches —
@@ -33,6 +34,7 @@ const topLinks = [
   { href: '/gallery', label: 'Gallery', active: pathname.startsWith('/gallery') },
   { href: '/builder', label: 'Builder', active: pathname.startsWith('/builder') },
   { href: '/wordart', label: 'WordArt', active: pathname.startsWith('/wordart') },
+  { href: '/tv', label: 'TV', active: pathname.startsWith('/tv') },
 ];
 ---
 
@@ -42,7 +44,7 @@ const topLinks = [
       <SiteTitle />
     </div>
   )}
-  {!isLanding && !isGallery && !isBuilder && !isWordart && (
+  {!isLanding && !isGallery && !isBuilder && !isWordart && !isTv && (
     <div class="sidebar-search-dock print:hidden">
       {shouldRenderSearch && <Search />}
     </div>
diff --git a/website/src/pages/tv.astro b/website/src/pages/tv.astro
new file mode 100644
index 00000000..6870a7b6
--- /dev/null
+++ b/website/src/pages/tv.astro
@@ -0,0 +1,731 @@
+---
+import DocsHeader from '../components/DocsHeader.astro';
+import Analytics from '../components/Analytics.astro';
+import '../styles/custom.css';
+
+const title = 'TV | PolyCSS';
+const description = 'Live YouTube iframe placed in 3D space on the screen face of CSS-rendered TV meshes, via the <poly-iframe> custom element.';
+const canonical = 'https://polycss.com/tv/';
+
+// Per-TV presets. `screenPolyIndex` is the polygon (post-optimization)
+// inside the GLB/OBJ that represents the screen face — we derive the
+// iframe's position, rotation, width, and height from THAT polygon's
+// vertices at load time. No more eyeballing 8 numbers per TV.
+// Each entry binds a mesh source to one or more screen faces. Each
+// `screens[i].polyIndices` lists the polygons (post-optimization) that
+// make up that screen face; placement is derived from those vertices
+// at load time (no manual position/rotation/size calibration). The first
+// screen's surface normal also drives the camera's rotY so the TV is
+// shown front-on. Per-screen `videoSrc` overrides the default video.
+const DEFAULT_VIDEO_SRC = 'https://www.youtube.com/embed/h03QBNVwX8Q?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0&start=175';
+const TVS = [
+  {
+    id: 'old-tv',
+    label: 'Cabinet TV',
+    src: '/tv/old-tv.glb',
+    // 50 anchors the plane (it's vertical); 48 is tilted and only contributes
+    // its vertices to the bbox so the iframe still spans that strip.
+    screens: [{ polyIndices: [48, 49, 50, 51, 52, 53] }],
+    cam: { rotX: 70, rotY: 215, zoom: 8 },
+  },
+  {
+    id: 'electronic-tv',
+    label: 'Electronic TV',
+    src: '/tv/electronic-tv.glb',
+    screens: [{ polyIndices: [35] }],
+    cam: { rotX: 70, rotY: 35, zoom: 8 },
+  },
+  {
+    id: 'monitor',
+    label: 'Monitor',
+    src: '/tv/monitor.glb',
+    screens: [{ polyIndices: [32] }],
+    cam: { rotX: 70, rotY: 35, zoom: 8 },
+  },
+  {
+    id: 'retro-tvs',
+    label: 'Retro Stack',
+    src: '/tv/retro-tvs.glb',
+    // Each stacked CRT gets its own iframe. Polygon indices supplied by
+    // hand from the inspector — more screens to come.
+    // Negative lift recesses the iframe slightly behind the screen
+    // polygon — these CRT meshes already model the glass surface, so
+    // the video reads better sitting inside the bezel. Each screen gets
+    // its own YouTube embed so all five CRTs play different content.
+    screens: [
+      {
+        polyIndices: [212, 213, 214, 215, 216],
+        lift: -0.6,
+        videoSrc: 'https://www.youtube.com/embed/frdBb9Slu1A?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0&start=650',
+      },
+      {
+        polyIndices: [65, 66, 67, 68, 69],
+        lift: -0.6,
+        videoSrc: 'https://www.youtube.com/embed/QK8mJJJvaes?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0',
+      },
+      {
+        polyIndices: [119, 120, 121, 122, 123],
+        lift: -0.6,
+        videoSrc: 'https://www.youtube.com/embed/CduA0TULnow?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0',
+      },
+      {
+        polyIndices: [207, 208, 209, 210, 211],
+        lift: -0.6,
+        videoSrc: 'https://www.youtube.com/embed/UqyT8IEBkvY?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0&start=35',
+      },
+      {
+        polyIndices: [265, 266, 267, 268, 269],
+        lift: -0.6,
+        videoSrc: 'https://www.youtube.com/embed/SskpYGyEDmU?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0&start=50',
+      },
+    ],
+    cam: { rotX: 70, rotY: 215, zoom: 8 },
+  },
+  {
+    id: 'tv-obj',
+    label: 'Pixel TV',
+    src: '/tv/tv-obj.obj',
+    mtl: '/tv/materials.mtl',
+    screens: [{ polyIndices: [70] }],
+    cam: { rotX: 70, rotY: 245, zoom: 10 },
+  },
+] as const;
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <Analytics />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div class="page">
+      <DocsHeader />
+      <div class="tv-page" data-presets={JSON.stringify(TVS)}>
+        <aside class="tv-rail">
+          <div class="tv-rail__list">
+            {TVS.map((tv, i) => (
+              <button
+                type="button"
+                class:list={['tv-tile', { 'is-active': i === 0 }]}
+                data-preset-id={tv.id}
+                aria-label={`Switch to ${tv.label}`}
+              >
+                <span class={`tv-tile__art tv-tile__art--${tv.id}`} aria-hidden="true">
+                  {tv.id === 'old-tv' && (
+                    <svg viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="4" y="6" width="56" height="40" rx="3" fill="#5b2e15" />
+                      <rect x="9" y="11" width="46" height="28" rx="6" fill="#1c2330" />
+                      <rect x="12" y="14" width="40" height="22" rx="4" fill="#414c5a" />
+                      <rect x="16" y="42" width="32" height="3" fill="#2b1610" />
+                      <rect x="9" y="46" width="3" height="6" fill="#3c1e0e" />
+                      <rect x="52" y="46" width="3" height="6" fill="#3c1e0e" />
+                    </svg>
+                  )}
+                  {tv.id === 'electronic-tv' && (
+                    <svg viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="32" y="4" width="2" height="14" fill="#9aa4b1" />
+                      <circle cx="33" cy="3" r="2" fill="#ff6b35" />
+                      <path d="M10 18 L54 18 L58 22 L58 46 L6 46 L6 22 Z" fill="#e9c958" stroke="#9a7e1f" stroke-width="1" />
+                      <rect x="14" y="22" width="36" height="20" rx="2" fill="#1c2330" />
+                      <circle cx="18" cy="48" r="1.5" fill="#222" />
+                      <circle cx="24" cy="48" r="1.5" fill="#222" />
+                      <circle cx="30" cy="48" r="1.5" fill="#222" />
+                    </svg>
+                  )}
+                  {tv.id === 'monitor' && (
+                    <svg viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="6" y="6" width="52" height="36" rx="2" fill="#c2b594" />
+                      <rect x="11" y="11" width="42" height="26" rx="1" fill="#3d3a32" />
+                      <rect x="25" y="44" width="14" height="4" fill="#a89b7a" />
+                      <rect x="18" y="48" width="28" height="4" rx="1" fill="#807461" />
+                    </svg>
+                  )}
+                  {tv.id === 'retro-tvs' && (
+                    <svg viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="24" y="2" width="22" height="14" rx="1" fill="#476285" />
+                      <rect x="27" y="5" width="16" height="8" rx="1" fill="#1c2330" />
+                      <rect x="18" y="16" width="28" height="16" rx="1" fill="#e6e4dd" />
+                      <rect x="21" y="19" width="20" height="10" rx="1" fill="#3a3a3a" />
+                      <rect x="28" y="32" width="34" height="20" rx="1" fill="#3d4759" />
+                      <rect x="31" y="35" width="24" height="14" rx="1" fill="#1c2330" />
+                      <rect x="4" y="50" width="56" height="3" fill="#c46a8e" />
+                    </svg>
+                  )}
+                  {tv.id === 'tv-obj' && (
+                    <svg viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="4" y="10" width="56" height="32" rx="2" fill="#0e1116" stroke="#27313f" stroke-width="1" />
+                      <rect x="7" y="13" width="50" height="26" rx="1" fill="#1c2330" />
+                      <rect x="28" y="42" width="8" height="4" fill="#1a1f27" />
+                      <rect x="20" y="46" width="24" height="3" rx="1" fill="#1a1f27" />
+                    </svg>
+                  )}
+                </span>
+                <span class="tv-tile__body">
+                  <span class="tv-tile__label">{tv.label}</span>
+                  <span class="tv-tile__meta">{tv.screens.length} screen{tv.screens.length === 1 ? '' : 's'}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+        </aside>
+        <div class="tv-stage" id="tv-host">
+          <poly-perspective-camera
+            id="tv-camera"
+            rot-x={String(TVS[0].cam.rotX)}
+            rot-y={String(TVS[0].cam.rotY)}
+            zoom={String(TVS[0].cam.zoom)}
+            perspective="32000"
+          >
+            <poly-scene
+              id="tv-scene"
+              auto-center
+              directional-direction="0.4,-0.7,0.59"
+              directional-intensity="6.5"
+              ambient-intensity="0.4"
+            >
+              <poly-orbit-controls drag wheel></poly-orbit-controls>
+              <poly-mesh id="tv-mesh" src={TVS[0].src} mtl={('mtl' in TVS[0] ? TVS[0].mtl : undefined)} auto-center cast-shadow receive-shadow></poly-mesh>
+              {/* Ground plane for shadow reception. Z position is set
+                  per-preset by the script (= TV's bbox minZ) so the floor
+                  always sits flush with the TV's bottom regardless of how
+                  the GLB was authored. Excluded from auto-center so the
+                  big plane doesn't push the camera target around. */}
+              <poly-plane
+                id="tv-floor"
+                axis="2"
+                size="200"
+                color="#4a505a"
+                position="0,0,0"
+                exclude-from-auto-center
+                receive-shadow
+              ></poly-plane>
+              {/* <poly-iframe> elements are added dynamically per preset
+                  (one per `screens[]` entry) so a multi-screen TV like the
+                  Retro Stack can light up every CRT independently. */}
+            </poly-scene>
+          </poly-perspective-camera>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      import "@layoutit/polycss/elements";
+
+      interface TvScreen {
+        polyIndices: readonly number[];
+        videoSrc?: string;
+        /** World-unit lift along the screen normal. Default `0.2 + 0.01 * max(w,h)`
+         *  (in front of the polygon to avoid z-fighting). Pass a negative
+         *  value to recess the iframe into the bezel. */
+        lift?: number;
+      }
+
+      interface TvPreset {
+        id: string;
+        label: string;
+        src: string;
+        mtl?: string;
+        screens: readonly TvScreen[];
+        cam: { rotX: number; rotY: number; zoom: number };
+      }
+
+      interface PolygonLike { vertices: Array<[number, number, number]>; }
+
+      // Vertex-count outward test. Counts how many mesh vertices sit on
+      // each side of the plane through `(ax,ay,az)` with normal `(nx,ny,nz)`.
+      // The screen's OUTSIDE is the side with FEWER vertices — just air /
+      // the viewer in front of the TV. The cabinet body sits behind the
+      // screen and contributes most of the mesh's vertices.
+      //
+      // Returns +1 if the normal already points outward, -1 if it should
+      // be flipped. More robust than a bbox-center test for L-shaped or
+      // asymmetric meshes where the bbox midpoint sits outside the body.
+      function outwardSignByVertexCount(
+        nx: number, ny: number, nz: number,
+        ax: number, ay: number, az: number,
+        allPolygons: PolygonLike[],
+      ): number {
+        let inFront = 0, behind = 0;
+        for (const p of allPolygons) {
+          for (const v of p.vertices) {
+            const d = (v[0] - ax) * nx + (v[1] - ay) * ny + (v[2] - az) * nz;
+            if (d > 1e-6) inFront++;
+            else if (d < -1e-6) behind++;
+          }
+        }
+        return inFront > behind ? -1 : 1;
+      }
+
+      // Derive iframe placement from one or more polygons. The polygons are
+      // the TV's screen face (a single polygon for simple meshes, a strip
+      // when the modeller subdivided the bezel — common on CRTs).
+      //
+      // - Normal: AREA-WEIGHTED average across all polygons. Summing the
+      //   cross product `e1 × e2` for each triangle in each polygon gives
+      //   `2 · area · unit_normal`, so the sum naturally weights bigger
+      //   polygons more — the "mostly flat" face wins over a few tilted
+      //   stragglers in the same strip (retro-stack: 212/213/214/230 are
+      //   slightly off, 215 is the true flat screen).
+      // - Outward flip: if `allPolygons` is supplied, count vertices on each
+      //   side of the screen plane and flip the normal so it points to the
+      //   sparser side (the front of the cabinet, not the inside).
+      // - Bbox + placement: project all vertices onto the (right, up) frame
+      //   built from the average normal, take their bbox, place the iframe
+      //   at the bbox center along that frame.
+      function placementFromPolygons(
+        polygons: PolygonLike[],
+        allPolygons?: PolygonLike[],
+        liftOverride?: number,
+      ): {
+        position: [number, number, number];
+        rotation: [number, number, number];
+        width: number;
+        height: number;
+        /** World-space surface normal of the screen face. The camera rotY
+         *  that puts this face camera-facing at a given rotX is
+         *  `atan2(normal.y, normal.x) * 180/π` (see deriveCameraRotY). */
+        normal: [number, number, number];
+      } | null {
+        if (polygons.length === 0) return null;
+
+        // Area-weighted average normal: sum (e1 × e2) for each triangle.
+        let nx = 0, ny = 0, nz = 0;
+        for (const poly of polygons) {
+          const verts = poly.vertices;
+          if (verts.length < 3) continue;
+          const v0 = verts[0];
+          // Fan-triangulate from v0 so polygons with >3 vertices contribute
+          // each of their triangles to the area weighting.
+          for (let i = 1; i + 1 < verts.length; i++) {
+            const va = verts[i], vb = verts[i + 1];
+            const e1x = va[0] - v0[0], e1y = va[1] - v0[1], e1z = va[2] - v0[2];
+            const e2x = vb[0] - v0[0], e2y = vb[1] - v0[1], e2z = vb[2] - v0[2];
+            nx += e1y * e2z - e1z * e2y;
+            ny += e1z * e2x - e1x * e2z;
+            nz += e1x * e2y - e1y * e2x;
+          }
+        }
+        const nlen = Math.hypot(nx, ny, nz);
+        if (nlen < 1e-9) return null;
+        nx /= nlen; ny /= nlen; nz /= nlen;
+
+        // Anchor for bbox + outward-test: the average vertex across all
+        // screen polygons (close enough to the centroid for our purposes).
+        let ax = 0, ay = 0, az = 0, count = 0;
+        for (const poly of polygons) {
+          for (const v of poly.vertices) {
+            ax += v[0]; ay += v[1]; az += v[2]; count++;
+          }
+        }
+        if (count === 0) return null;
+        ax /= count; ay /= count; az /= count;
+
+        // No auto outward-flip. GLB/OBJ files reliably wind screen-face
+        // polygons with the normal pointing outward (away from the cabinet
+        // body); the vertex-count heuristic misfires for meshes whose
+        // body geometry extends in front of the screen plane (e.g. CRT
+        // monitors with deep tubes/stands behind the bezel). Trust the
+        // modeller's winding; rely on per-preset rotY tuning if needed.
+        void allPolygons;
+
+        // "Up" reference: world-Z, unless the polygon is nearly horizontal
+        // (a floor/ceiling face, |n.z| ≈ 1), in which case fall back to
+        // world-Y so the basis stays non-degenerate.
+        const upRef = Math.abs(nz) > 0.95
+          ? { x: 0, y: 1, z: 0 }
+          : { x: 0, y: 0, z: 1 };
+        // up = upRef projected onto plane perpendicular to n, normalized.
+        const dot = upRef.x * nx + upRef.y * ny + upRef.z * nz;
+        let upx = upRef.x - dot * nx;
+        let upy = upRef.y - dot * ny;
+        let upz = upRef.z - dot * nz;
+        const upLen = Math.hypot(upx, upy, upz);
+        if (upLen < 1e-9) return null;
+        upx /= upLen; upy /= upLen; upz /= upLen;
+        // right = up × normal (right-handed frame with normal forward).
+        const rx = upy * nz - upz * ny;
+        const ry = upz * nx - upx * nz;
+        const rz = upx * ny - upy * nx;
+
+        // bbox in (right, up) frame, projected onto the average plane.
+        // Anchor at the centroid (`ax, ay, az` above) so all vertices project
+        // symmetrically — when individual polygons aren't perfectly coplanar
+        // (the retro-stack strips), this centers the iframe over the strip
+        // instead of biasing it toward whichever polygon owns vertex 0.
+        let minR = Infinity, maxR = -Infinity, minU = Infinity, maxU = -Infinity;
+        for (const poly of polygons) {
+          for (const v of poly.vertices) {
+            const dx = v[0] - ax, dy = v[1] - ay, dz = v[2] - az;
+            const r = dx * rx + dy * ry + dz * rz;
+            const u = dx * upx + dy * upy + dz * upz;
+            if (r < minR) minR = r;
+            if (r > maxR) maxR = r;
+            if (u < minU) minU = u;
+            if (u > maxU) maxU = u;
+          }
+        }
+        const width = maxR - minR;
+        const height = maxU - minU;
+        if (!(width > 0) || !(height > 0)) return null;
+        const bcR = (minR + maxR) / 2;
+        const bcU = (minU + maxU) / 2;
+        // World position = centroid + bbox center offset in (right, up),
+        // nudged along the normal so the iframe doesn't z-fight with the
+        // screen polygons themselves. Combines a small fixed floor with
+        // a size-proportional term so small meshes (monitor, tv-obj) get
+        // enough absolute lift to clear CSS-3D z-stacking, while bigger
+        // meshes (cabinet) still get a proportionally larger nudge.
+        // Default lift puts the iframe slightly IN FRONT of the screen
+        // polygon so it doesn't z-fight. Callers can pass a negative
+        // `liftOverride` to recess the iframe INTO the bezel — useful for
+        // meshes (like the retro stack CRTs) where the screen polygon
+        // already represents the glass surface and the iframe should
+        // appear inset behind it.
+        const lift = liftOverride ?? (0.2 + 0.01 * Math.max(width, height));
+        const posX = ax + bcR * rx + bcU * upx + lift * nx;
+        const posY = ay + bcR * ry + bcU * upy + lift * ny;
+        const posZ = az + bcR * rz + bcU * upz + lift * nz;
+        const normal: [number, number, number] = [nx, ny, nz];
+
+        // Build world rotation that takes the iframe's default basis to
+        // the polygon's basis. The iframe default in WORLD coords (after
+        // the world↔CSS axis swap): width=world-Y, height-down=world-X,
+        // normal=world-Z. So we want a rotation M such that
+        //   M(world-Y) = right,  M(-world-X) = up,  M(world-Z) = normal.
+        // Columns of M are M(world-X), M(world-Y), M(world-Z) = -up, right, normal.
+        // Extract Euler XYZ where M = Rx(rx_e)·Ry(ry_e)·Rz(rz_e):
+        //   M[0][2] = sin(ry_e) → ry_e = asin(N.x)
+        //   M[1][2] = -sin(rx)cos(ry); M[2][2] = cos(rx)cos(ry)
+        //     → rx_e = atan2(-N.y, N.z) when not gimbal-locked
+        //   M[0][1] = -cos(ry)sin(rz); M[0][0] = cos(ry)cos(rz)
+        //     → rz_e = atan2(-R.x, -U.x)
+        const clamp = (v: number) => Math.max(-1, Math.min(1, v));
+        const ryEuler = Math.asin(clamp(nx));
+        let rxEuler: number;
+        let rzEuler: number;
+        if (Math.abs(nx) < 0.9999) {
+          rxEuler = Math.atan2(-ny, nz);
+          rzEuler = Math.atan2(-rx, -upx);
+        } else {
+          // Gimbal lock: ry = ±90°. Pin rz=0 and put the remaining angle in rx.
+          rxEuler = Math.atan2(-upy, ry);
+          rzEuler = 0;
+        }
+        const toDeg = 180 / Math.PI;
+        return {
+          position: [posX, posY, posZ],
+          rotation: [rxEuler * toDeg, ryEuler * toDeg, rzEuler * toDeg],
+          width,
+          height,
+          normal,
+        };
+      }
+
+      // Derive the camera's rotY so the screen face (with world normal N) sits
+      // camera-facing. The camera's look direction in world frame, given
+      // (rotX, rotY), is `(-sin(rotX)·cos(rotY), -sin(rotX)·sin(rotY), -cos(rotX))`
+      // (see the inverse of the scene-root rotateX·rotateZ composition plus
+      // the world↔CSS axis swap). Matching that to -N component-wise yields
+      // `rotY = atan2(N.y, N.x)`. We keep the user's preferred rotX so the
+      // view-tilt stays as authored.
+      function deriveCameraRotYDeg(normal: [number, number, number]): number {
+        return Math.atan2(normal[1], normal[0]) * 180 / Math.PI;
+      }
+
+      (() => {
+        const DEFAULT_VIDEO = "https://www.youtube.com/embed/h03QBNVwX8Q?autoplay=1&mute=1&playsinline=1&modestbranding=1&controls=0&start=175";
+        const IFRAME_ALLOW = "autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+
+        const root = document.querySelector<HTMLElement>(".tv-page");
+        const presetsAttr = root?.dataset?.presets;
+        const presets: TvPreset[] = presetsAttr ? JSON.parse(presetsAttr) : [];
+        const camera = document.getElementById("tv-camera");
+        const sceneEl = document.getElementById("tv-scene");
+        const floor = document.getElementById("tv-floor");
+        const mesh = document.getElementById("tv-mesh") as
+          (HTMLElement & { getMeshHandle?: () => { polygons: PolygonLike[] } | null })
+          | null;
+        if (!root || !camera || !sceneEl || !mesh || presets.length === 0) return;
+
+        // Shadows: the receiver-shadow code sits the shadow SVG at the
+        // floor's plane plus `shadow.lift` (default 0.05 world = 2.5 CSS
+        // px). With big planes like our 400-world-unit floor + low-angle
+        // camera, that razor-thin gap z-fights with the floor itself and
+        // the shadow only shows from straight-overhead views. Bump the
+        // lift to ~1 world unit (50 CSS px) so the shadow stays in front
+        // of the floor at any normal viewing angle.
+        const sceneHandle = (sceneEl as unknown as { getScene?: () => { setOptions: (o: Record<string, unknown>) => void } | null }).getScene?.();
+        sceneHandle?.setOptions({ shadow: { color: "#000000", opacity: 0.95, lift: 0.1 } });
+
+        let activePreset: TvPreset = presets[0];
+        let activeIframes: HTMLElement[] = [];
+
+        function rebuildIframesFor(preset: TvPreset): void {
+          if (!sceneEl) return;
+          // Tear down whatever was mounted previously.
+          for (const el of activeIframes) el.remove();
+          activeIframes = [];
+          // Create one <poly-iframe> per screen entry. Geometry attrs are
+          // placeholders — they'll be replaced when the mesh finishes
+          // loading and we can derive placement from the polygons.
+          for (let i = 0; i < preset.screens.length; i++) {
+            const screen = preset.screens[i];
+            const ifr = document.createElement("poly-iframe");
+            ifr.setAttribute("src", screen.videoSrc ?? DEFAULT_VIDEO);
+            ifr.setAttribute("width", "1");
+            ifr.setAttribute("height", "1");
+            ifr.setAttribute("allow", IFRAME_ALLOW);
+            ifr.setAttribute("title", `${preset.label} screen ${i + 1}`);
+            ifr.dataset.screenIndex = String(i);
+            sceneEl.appendChild(ifr);
+            activeIframes.push(ifr);
+          }
+        }
+
+        function applyPlacementsFromMesh(): void {
+          if (!mesh || !camera) return;
+          const handle = mesh.getMeshHandle?.();
+          if (!handle) return;
+          // All-mesh polygon array, passed to placementFromPolygons so each
+          // screen's normal can be vertex-count flipped to point outward.
+          const allPolygons = handle.polygons;
+          // Move the ground plane to the TV's bbox center (in mesh-local
+          // coords) at the bottom Z so it sits flush under the TV. Floor
+          // is excluded from auto-center so the scene transform shifts
+          // everything by -bboxCenter; the floor needs to be authored at
+          // bboxCenter in mesh-local to land at scene origin after that
+          // shift.
+          if (floor) {
+            let minX = Infinity, maxX = -Infinity;
+            let minY = Infinity, maxY = -Infinity;
+            let minZ = Infinity;
+            for (const p of allPolygons) {
+              for (const v of p.vertices) {
+                if (v[0] < minX) minX = v[0];
+                if (v[0] > maxX) maxX = v[0];
+                if (v[1] < minY) minY = v[1];
+                if (v[1] > maxY) maxY = v[1];
+                if (v[2] < minZ) minZ = v[2];
+              }
+            }
+            if (Number.isFinite(minZ)) {
+              const cx = (minX + maxX) / 2;
+              const cy = (minY + maxY) / 2;
+              floor.setAttribute("position", `${cx},${cy},${minZ}`);
+            }
+          }
+          for (let i = 0; i < activePreset.screens.length; i++) {
+            const screen = activePreset.screens[i];
+            const ifr = activeIframes[i];
+            if (!ifr) continue;
+            const polys = screen.polyIndices
+              .map((idx) => handle.polygons[idx])
+              .filter((p): p is PolygonLike => !!p);
+            if (polys.length === 0) {
+              console.warn("[tv] screen", i, "polys", screen.polyIndices, "out of range for", activePreset.id);
+              continue;
+            }
+            const placement = placementFromPolygons(polys, allPolygons, screen.lift);
+            if (!placement) {
+              console.warn("[tv] couldn't derive placement for", activePreset.id, "screen", i);
+              continue;
+            }
+            ifr.setAttribute("width", String(placement.width));
+            ifr.setAttribute("height", String(placement.height));
+            ifr.setAttribute("position", placement.position.join(", "));
+            ifr.setAttribute("rotation", placement.rotation.join(", "));
+          }
+        }
+
+        // <poly-mesh> fires polycss:loaded once parsing + scene.add() finish.
+        // That's our cue to read polygons and derive every screen's placement.
+        mesh.addEventListener("polycss:loaded", () => {
+          applyPlacementsFromMesh();
+        });
+
+        function applyPreset(p: TvPreset, opts: { pushUrl?: boolean } = {}): void {
+          if (!camera || !mesh) return;
+          activePreset = p;
+          // Camera state is hand-tuned per preset — apply all three so the
+          // TV shows up the right way + at a sensible size on every switch.
+          camera.setAttribute("rot-x", String(p.cam.rotX));
+          camera.setAttribute("rot-y", String(p.cam.rotY));
+          camera.setAttribute("zoom", String(p.cam.zoom));
+          rebuildIframesFor(p);
+          if (p.mtl) mesh.setAttribute("mtl", p.mtl);
+          else mesh.removeAttribute("mtl");
+          mesh.setAttribute("src", p.src);
+          // polycss:loaded fires after the new src loads, and the listener
+          // re-derives every iframe's placement.
+          if (opts.pushUrl !== false) syncUrl(p.id);
+        }
+
+        function syncUrl(id: string): void {
+          const url = new URL(window.location.href);
+          if (url.searchParams.get("model") === id) return;
+          url.searchParams.set("model", id);
+          window.history.replaceState({}, "", url.toString());
+        }
+
+        function selectTile(id: string): void {
+          root!.querySelectorAll(".tv-tile.is-active").forEach((el) =>
+            el.classList.remove("is-active"),
+          );
+          const tile = root!.querySelector<HTMLElement>(`.tv-tile[data-preset-id="${id}"]`);
+          if (tile) tile.classList.add("is-active");
+        }
+
+        // Initial preset: ?model=<id> wins over the markup default. Falls back
+        // to the first preset (which is what's already wired up in the HTML).
+        const urlParam = new URLSearchParams(window.location.search).get("model");
+        const initial = (urlParam && presets.find((p) => p.id === urlParam)) || presets[0];
+        if (initial.id !== presets[0].id) {
+          selectTile(initial.id);
+          applyPreset(initial, { pushUrl: false });
+        } else {
+          // First-paint: build iframes for the initial preset; placement is
+          // applied when (or if) the mesh handle is already available.
+          rebuildIframesFor(activePreset);
+          if (mesh.getMeshHandle?.()) applyPlacementsFromMesh();
+          // Reflect the markup default in the URL too so links share cleanly.
+          syncUrl(initial.id);
+        }
+
+        root.querySelectorAll<HTMLButtonElement>(".tv-tile").forEach((tile) => {
+          tile.addEventListener("click", () => {
+            const id = tile.dataset.presetId;
+            const preset = presets.find((p) => p.id === id);
+            if (!preset) return;
+            selectTile(preset.id);
+            applyPreset(preset);
+          });
+        });
+
+        // Back / forward navigation: re-select the preset named in the URL.
+        window.addEventListener("popstate", () => {
+          const id = new URLSearchParams(window.location.search).get("model");
+          const preset = id ? presets.find((p) => p.id === id) : null;
+          if (!preset) return;
+          selectTile(preset.id);
+          applyPreset(preset, { pushUrl: false });
+        });
+      })();
+    </script>
+  </body>
+  <style>
+    :global(:root) { --sl-nav-height: 72px; }
+    @media (max-width: 38rem) {
+      :global(:root) { --sl-nav-height: 90px; }
+    }
+    :global(html, body) {
+      margin: 0;
+      background: #0a0b0d;
+      color: #e8edf2;
+    }
+    :global(body) { min-height: 100vh; overflow: hidden; }
+    .page { min-height: 100vh; background: #0a0b0d; }
+    .tv-page {
+      position: fixed;
+      inset: var(--sl-nav-height) 0 0;
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      overflow: hidden;
+    }
+    .tv-rail {
+      border-right: 1px solid #1c2330;
+      background: linear-gradient(180deg, #0d1119 0%, #0a0b0d 100%);
+      padding: 14px 12px;
+      overflow-y: auto;
+    }
+    .tv-rail__list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .tv-tile {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 60px 1fr;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      border: 1px solid #1a2230;
+      border-radius: 10px;
+      background: #0b0f18;
+      color: #e2e8f0;
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+    }
+    .tv-tile:hover {
+      border-color: #2f3a4a;
+      background: #0e1421;
+      transform: translateY(-1px);
+    }
+    .tv-tile.is-active {
+      background: linear-gradient(135deg, #142033 0%, #0d1828 100%);
+      border-color: #22d3ee;
+      box-shadow:
+        inset 0 0 0 1px rgba(34, 211, 238, 0.2),
+        0 6px 20px -10px rgba(34, 211, 238, 0.5);
+    }
+    .tv-tile__art {
+      display: grid;
+      place-items: center;
+      width: 60px;
+      height: 48px;
+      border-radius: 6px;
+      background: radial-gradient(circle at 30% 25%, #131a26 0%, #060810 100%);
+      padding: 4px;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
+    }
+    .tv-tile__art svg {
+      width: 100%;
+      height: 100%;
+      filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.7));
+    }
+    .tv-tile__body {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+    .tv-tile__label {
+      color: #e6ecf3;
+      font-size: 13.5px;
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .tv-tile__meta {
+      color: #6b7585;
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+    }
+    .tv-tile.is-active .tv-tile__label { color: #f1f7fb; }
+    .tv-tile.is-active .tv-tile__meta { color: #58c4d6; }
+    .tv-stage {
+      position: relative;
+      overflow: hidden;
+    }
+    @media (max-width: 38rem) {
+      .tv-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+      .tv-rail {
+        border-right: 0;
+        border-bottom: 1px solid #1c2330;
+        max-height: 180px;
+      }
+      .tv-rail__list { flex-direction: row; }
+      .tv-tile { min-width: 200px; }
+    }
+  </style>
+</html>