@supersoniks/concorde 4.9.97-visual-stack.0 → 4.9.98-visual-stack.1

package/src/core/components/functional/webgpu/webgpu.ts

@@ -3,6 +3,10 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
+import {
+  lookupLiveElement,
+  FrameConsumerRegistry,
+} from "@supersoniks/concorde/core/utils/mediaRef";
 import { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 import { formBind } from "./form-bind";
 import { WebGl2FallbackRuntime } from "./gl-fallback";
@@ -138,6 +142,8 @@ export class SonicWebGpu extends LitElement {
   raf = 0;
   startTime = 0;
   frame = 0;
+  /** Contrat SonicFrameSource — incrémenté après chaque draw. */
+  frameSeq = 0;
   mouseVec: [number, number, number, number] = [0, 0, 0, 0];
   /** Cible normalisée (0–1, origine haut-gauche) depuis dataProvider — tracking / DP. */
   remoteTarget: { x: number; y: number } | null = null;
@@ -148,6 +154,7 @@ export class SonicWebGpu extends LitElement {
   private resizeObserver: ResizeObserver | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
   private rebuildToken = 0;
+  private frameConsumers = new FrameConsumerRegistry();
   ready = false;
   /** Évite deux boots concurrents (IO + rAF) qui disposent le fallback. */
   private boot: Promise<void> | null = null;
@@ -202,6 +209,7 @@ export class SonicWebGpu extends LitElement {
     this.removeEventListener("pointerenter", this.onPointerEnter);
     this.unbindFormProvider();
     this.revokeFrameUrl();
+    this.frameConsumers.clear();
     this.frameOutSeq++;
     this.frameOutBusy = false;
     this.resizeObserver?.disconnect();
@@ -402,6 +410,10 @@ export class SonicWebGpu extends LitElement {
       }
 
       this.runtime = runtime;
+      const maybeGl2 = this.runtime as unknown as {
+        setElementResolver?: (fn: (key: string) => Element | null) => void;
+      };
+      maybeGl2.setElementResolver?.((key) => this.lookupElement(key));
       const backend = runtime.backend as SonicWebGpuBackend;
       this.activeBackend = backend;
       let notice = "";
@@ -473,6 +485,21 @@ export class SonicWebGpu extends LitElement {
     return canvas;
   }
 
+  /** Résout `#id` dans getRootNode() puis document ; clés live `__sonic_frame_`. */
+  private lookupElement(key: string): Element | null {
+    if (!key.startsWith("#")) return null;
+    const live = lookupLiveElement(key);
+    if (live) return live;
+    const id = key.slice(1);
+    if (!id || id.startsWith("__sonic_frame_")) return null;
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      const el = root.getElementById(id);
+      if (el) return el;
+    }
+    return typeof document !== "undefined" ? document.getElementById(id) : null;
+  }
+
   private releaseRuntime() {
     this.stopLoop();
     this.ready = false;
@@ -484,6 +511,14 @@ export class SonicWebGpu extends LitElement {
     this.canvasEl = null;
   }
 
+  /** Enregistre les producteurs live pour play-offscreen auto. */
+  private syncFrameConsumers() {
+    const keys = [this.channel0, this.channel1, this.channel2, this.channel3];
+    this.frameConsumers.sync(
+      keys.filter((k) => k.startsWith("#")).map((k) => this.lookupElement(k)),
+    );
+  }
+
   private async rebuild() {
     if (!this.runtime) return;
     const token = ++this.rebuildToken;
@@ -507,6 +542,7 @@ export class SonicWebGpu extends LitElement {
         ]);
       }
       if (token !== this.rebuildToken) return;
+      this.syncFrameConsumers();
       this.errorMessage = "";
       this.ready = true;
       this.syncSize();
@@ -587,6 +623,9 @@ export class SonicWebGpu extends LitElement {
             if (!this.startTime) this.startTime = now;
             const time = (now - this.startTime) / 1000;
             this.applyRemoteMouse();
+            if (this.runtime instanceof WebGpuRuntime) {
+              this.runtime.updateLiveChannels((key) => this.lookupElement(key));
+            }
             this.runtime.draw({
               width: w,
               height: h,
@@ -596,6 +635,7 @@ export class SonicWebGpu extends LitElement {
               params: [this.param0, this.param1, this.param2, this.param3],
             });
             this.frame++;
+            this.frameSeq++;
             this.maybePublishOut(now, time);
           } catch (e) {
             console.warn(`${LOG_PREFIX} frame skip:`, e);
@@ -620,6 +660,12 @@ export class SonicWebGpu extends LitElement {
     outFrame.maybePublishOut(this as never, now, time);
   }
 
+  /** Contrat SonicFrameSource — canvas WebGPU / fallback. */
+  getFrameCanvas(): HTMLCanvasElement | null {
+    if (!this.ready || this.errorMessage) return null;
+    return this.canvasEl;
+  }
+
   private revokeFrameUrl() {
     outFrame.revokeFrameUrl(this as never);
   }
@@ -653,7 +699,8 @@ export type {
 } from "./types";
 export { parseBackendPrefer, parseKernel, WebGpuCompileError } from "./types";
 export { buildWgslSource, DEFAULT_MAIN_IMAGE } from "./wgsl-prelude";
-export { WebGpuRuntime } from "./gpu-runtime";
+export { WebGpuRuntime, channelTextureNeedsRecreate } from "./gpu-runtime";
 export { WebGl2FallbackRuntime } from "./gl-fallback";
 export { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 export { ParticlesRuntime } from "./particles-runtime";
+export { channelFormValue } from "./helpers";

package/src/core/utils/mediaRef.spec.ts

@@ -2,7 +2,10 @@ import { describe, expect, it, vi, beforeEach } from "vitest";
 import {
   attachMediaUrls,
   cloneMediaRef,
+  isFrameSource,
   isMediaBlobObject,
+  mediaElementKey,
+  registerLiveElement,
   revokeMediaUrls,
   toMediaUrl,
 } from "./mediaRef";
@@ -15,6 +18,64 @@ describe("toMediaUrl", () => {
     expect(toMediaUrl(null)).toBeNull();
     expect(toMediaUrl({ blob: new Blob() })).toBeNull();
   });
+
+  it("ignore element (pas d’URL)", () => {
+    expect(toMediaUrl({ element: "#plateau" })).toBeNull();
+  });
+});
+
+describe("isFrameSource / mediaElementKey", () => {
+  it("détecte SonicFrameSource", () => {
+    expect(
+      isFrameSource({
+        getFrameCanvas: () => null,
+        frameSeq: 0,
+      }),
+    ).toBe(true);
+    expect(isFrameSource({})).toBe(false);
+    expect(isFrameSource(null)).toBe(false);
+  });
+
+  it("FrameConsumerRegistry register / unregister", async () => {
+    const { FrameConsumerRegistry, isFrameConsumerHost } = await import(
+      "./mediaRef"
+    );
+    const tokens: object[] = [];
+    const host = {
+      registerFrameConsumer(t: object = {}) {
+        tokens.push(t);
+      },
+      unregisterFrameConsumer(t: object = {}) {
+        const i = tokens.indexOf(t);
+        if (i >= 0) tokens.splice(i, 1);
+      },
+      getFrameCanvas: () => null,
+      frameSeq: 0,
+    };
+    expect(isFrameConsumerHost(host)).toBe(true);
+    const reg = new FrameConsumerRegistry();
+    // FrameConsumerRegistry expects Element — cast for unit test
+    reg.sync([host as unknown as Element]);
+    expect(tokens.length).toBe(1);
+    reg.clear();
+    expect(tokens.length).toBe(0);
+  });
+
+  it("normalise element string / Element avec id", () => {
+    expect(mediaElementKey("#plateau")).toBe("#plateau");
+    expect(mediaElementKey("plateau")).toBe("#plateau");
+    expect(mediaElementKey("")).toBeNull();
+    const el = document.createElement("div");
+    el.id = "scene";
+    expect(mediaElementKey(el)).toBe("#scene");
+  });
+
+  it("enregistre un Element sans id", () => {
+    const el = document.createElement("div");
+    const key = registerLiveElement(el);
+    expect(key.startsWith("#__sonic_frame_")).toBe(true);
+    expect(mediaElementKey(el)).toBe(key);
+  });
 });
 
 describe("attachMediaUrls / revokeMediaUrls", () => {

package/src/core/utils/mediaRef.ts

@@ -4,6 +4,7 @@
  * - `url` : http(s) | blob: | data: (préféré pour les canaux shader)
  * - `blob` : binaire (HF, upload) — le producteur publie aussi `url` quand possible
  * - `blobUrl` : alias historique (extract shader)
+ * - `element` : sélecteur `#id` ou Element (pont live → canaux shader, ignoré par toMediaUrl)
  */
 
 export type SonicMediaRef = {
@@ -13,8 +14,115 @@ export type SonicMediaRef = {
   width?: number;
   height?: number;
   mime?: string;
+  /** Sélecteur `#id` ou référence Element (upload live, pas d’URL). */
+  element?: string | Element;
 };
 
+/**
+ * Contrat minimal pour qu’un composant Concorde alimente un canal shader
+ * sans JPEG / blob (`channel0="#plateau"` ou `{ element }`).
+ */
+export type SonicFrameSource = {
+  /** Canvas lisible (preserveDrawingBuffer ou 2D). `null` tant que pas prêt. */
+  getFrameCanvas(): HTMLCanvasElement | null;
+  /** Incrémenté après chaque rendu effectif. */
+  readonly frameSeq: number;
+};
+
+/**
+ * Producteur de frames live qui peut rester actif hors viewport
+ * tant qu’un consommateur est enregistré (`sonic-3d` Lot 9).
+ */
+export type SonicFrameConsumerHost = {
+  registerFrameConsumer(token?: object): void;
+  unregisterFrameConsumer(token?: object): void;
+};
+
+export function isFrameSource(el: unknown): el is SonicFrameSource {
+  if (!el || typeof el !== "object") return false;
+  const o = el as SonicFrameSource;
+  return (
+    typeof o.getFrameCanvas === "function" && typeof o.frameSeq === "number"
+  );
+}
+
+export function isFrameConsumerHost(el: unknown): el is SonicFrameConsumerHost {
+  if (!el || typeof el !== "object") return false;
+  const o = el as SonicFrameConsumerHost;
+  return (
+    typeof o.registerFrameConsumer === "function" &&
+    typeof o.unregisterFrameConsumer === "function"
+  );
+}
+
+/** Suit les `#id` résolus → register/unregister auprès du producteur. */
+export class FrameConsumerRegistry {
+  private tokens = new Map<Element, object>();
+
+  sync(elements: Iterable<Element | null | undefined>) {
+    const next = new Set<Element>();
+    for (const el of elements) {
+      if (el && isFrameConsumerHost(el)) next.add(el);
+    }
+    for (const [el, token] of [...this.tokens]) {
+      if (next.has(el)) continue;
+      if (isFrameConsumerHost(el)) el.unregisterFrameConsumer(token);
+      this.tokens.delete(el);
+    }
+    for (const el of next) {
+      if (this.tokens.has(el)) continue;
+      const token = {};
+      (el as unknown as SonicFrameConsumerHost).registerFrameConsumer(token);
+      this.tokens.set(el, token);
+    }
+  }
+
+  clear() {
+    this.sync([]);
+  }
+}
+
+/** Clés synthétiques pour Elements DP sans `id` (`#__sonic_frame_N`). */
+const LIVE_PREFIX = "#__sonic_frame_";
+let liveSeq = 0;
+const liveByKey = new Map<string, Element>();
+const keyByLive = new WeakMap<Element, string>();
+
+/** Enregistre un Element sans id → clé `#__sonic_frame_N` (réutilisée). */
+export function registerLiveElement(el: Element): string {
+  const existing = keyByLive.get(el);
+  if (existing) return existing;
+  const key = `${LIVE_PREFIX}${++liveSeq}`;
+  liveByKey.set(key, el);
+  keyByLive.set(el, key);
+  return key;
+}
+
+export function lookupLiveElement(key: string): Element | null {
+  if (!key.startsWith(LIVE_PREFIX)) return null;
+  const el = liveByKey.get(key) ?? null;
+  if (el && !el.isConnected) {
+    liveByKey.delete(key);
+    return null;
+  }
+  return el;
+}
+
+/** Normalise `element` DP → clé canal (`#id` ou live). */
+export function mediaElementKey(value: unknown): string | null {
+  if (value == null) return null;
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (!s) return null;
+    return s.startsWith("#") ? s : `#${s}`;
+  }
+  if (typeof Element !== "undefined" && value instanceof Element) {
+    if (value.id) return `#${value.id}`;
+    return registerLiveElement(value);
+  }
+  return null;
+}
+
 /** Objet image sérialisé (sortie HF / extract) : Blob + dimensions. */
 export function isMediaBlobObject(
   value: unknown,

package/src/docs/_misc/visual-stack.md

@@ -1,6 +1,6 @@
 # Visual stack
 
-Examples of chaining opt-in addons (HF, shader, WebGPU). Outside the main “functional” flow.
+Examples of chaining opt-in addons (HF, shader, WebGPU, 3D). Outside the main “functional” flow.
 
 ## HF depth → parallax
 
@@ -29,9 +29,42 @@ photo (sample)
 
 <docs-lit-demo for="docs-visual-stack-demo"></docs-lit-demo>
 
+## 3D → shader live (GPU bridge)
+
+`sonic-3d` and `sonic-shader` keep separate WebGL contexts. For realtime post, point a channel at the 3D host with `#id` — the shader copies the canvas each frame (`texImage2D`), no JPEG.
+
+```html
+<sonic-3d id="plateau" play auto-rotate …></sonic-3d>
+<sonic-shader channel0="#plateau" image="…" play></sonic-shader>
+```
+
+Also accepted: `<img>`, `<video>`, `<canvas>`, or another Concorde host that implements `SonicFrameSource` (`getFrameCanvas` + `frameSeq`). DP form: `{ element: "#plateau" }` or `{ element: el }`.
+
+`frame-out` (JPEG ObjectURL) remains for export / HF / freeze — not for live post.
+
+<docs-lit-demo for="docs-3d-shader-live-demo"></docs-lit-demo>
+
+## 3D → WebGPU live
+
+Same `#id` bridge as the shader: `sonic-webgpu channel0="#plateau-gpu"` copies the 3D canvas each `frameSeq` via `copyExternalImageToTexture` (persistent texture — no recreate when size is stable).
+
+<docs-lit-demo for="docs-3d-webgpu-live-demo"></docs-lit-demo>
+
+## Post FX + depth (in sonic-3d)
+
+Scene → offscreen color + depth → GLSL passes (`post-*`) in the same WebGL context. Use `post-image-ch1="depth"` for edge / DoF-style effects without a second component.
+
+<docs-lit-demo for="docs-3d-post-depth-demo"></docs-lit-demo>
+
 ## Harris → patches → WebGPU
 
-`sonic-shader` detects corners (Harris) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+`sonic-shader` detects corners (Harris, `buffer-format="rgba16f"` + NMS 5×5 / shape filter) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+
+Use `buffer-format="rgba16f"` so signed `IxIy` / non-clamped `Ix²` survive the buffer (RGBA8 zeros negatives and saturates). See [Shader — buffer precision](#core/components/functional/shader/shader.md/shader).
+
+Channel rebinds and `release-offscreen="auto"` (keep FBO state when a pass uses `self`) : [Shader — état et visibilité](#core/components/functional/shader/shader.md/shader).
+
+`sonic-3d` live sources keep playing off-screen when a `#id` consumer is registered (or `play-offscreen`) — see [3D — bridging](#core/components/functional/3d/3d.md/3d).
 
 <docs-lit-demo for="docs-harris-webgpu-demo"></docs-lit-demo>
 
@@ -41,9 +74,10 @@ photo (sample)
 |------|-----|
 | Depth | [Hugging Face infer](#core/components/functional/infer/hugging-face/hugging-face-infer.md/hugging-face-infer) |
 | FX + extract | [Shader](#core/components/functional/shader/shader.md/shader) |
+| 3D viewer | [3D](#core/components/functional/3d/3d.md/3d) |
 | Compute / mosaic | [WebGPU](#core/components/functional/webgpu/webgpu.md/webgpu) |
 | Stats / thresholds | [Jsonata](#core/components/functional/jsonata/jsonata.md/jsonata) |
 
 ## Media contract
 
-`SonicMediaRef` / `toMediaUrl` / `cloneMediaRef` — `@supersoniks/concorde/core/utils/mediaRef`.
+`SonicMediaRef` / `SonicFrameSource` / `toMediaUrl` / `cloneMediaRef` — `@supersoniks/concorde/core/utils/mediaRef`.

package/src/docs/components/docs-demo-sources.ts

@@ -215,6 +215,30 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       },
     ],
   },
+  "docs-3d-shader-live-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-shader-live-demo.ts",
+        label: "3D → shader live",
+      },
+    ],
+  },
+  "docs-3d-webgpu-live-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+        label: "3D → webgpu live",
+      },
+    ],
+  },
+  "docs-3d-post-depth-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-post-depth-demo.ts",
+        label: "3D post depth edges",
+      },
+    ],
+  },
   "docs-webgpu-demo": {
     sources: [
       {
@@ -492,6 +516,24 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "docs-visual-stack-demo": [
     { path: "src/docs/example/docs-visual-stack-demo.ts", label: "visual stack" },
   ],
+  "docs-3d-shader-live-demo": [
+    {
+      path: "src/docs/example/docs-3d-shader-live-demo.ts",
+      label: "3d → shader live",
+    },
+  ],
+  "docs-3d-webgpu-live-demo": [
+    {
+      path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+      label: "3d → webgpu live",
+    },
+  ],
+  "docs-3d-post-depth-demo": [
+    {
+      path: "src/docs/example/docs-3d-post-depth-demo.ts",
+      label: "3d post depth",
+    },
+  ],
   "docs-webgpu-demo": [
     { path: "src/docs/example/docs-webgpu-demo.ts", label: "webgpu demo" },
   ],

package/src/docs/docs.ts

@@ -21,6 +21,9 @@ import "./example/docs-hugging-face-demos";
 import "./example/docs-shader-demos";
 import "./example/docs-webgpu-demo";
 import "./example/docs-visual-stack-demo";
+import "./example/docs-3d-shader-live-demo";
+import "./example/docs-3d-webgpu-live-demo";
+import "./example/docs-3d-post-depth-demo";
 import "./example/docs-harris-webgpu-demo";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";

package/src/docs/example/docs-3d-post-depth-demo.ts

@@ -0,0 +1,68 @@
+/**
+ * Démo Lot 2 : post FX dans sonic-3d avec canal depth (contours).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+const DEPTH_EDGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
+  vec3 col = texture(iChannel0, uv).rgb;
+
+  float dC = texture(iChannel1, uv).r;
+  float dL = texture(iChannel1, uv - px * vec2(1.0, 0.0)).r;
+  float dR = texture(iChannel1, uv + px * vec2(1.0, 0.0)).r;
+  float dU = texture(iChannel1, uv + px * vec2(0.0, 1.0)).r;
+  float dD = texture(iChannel1, uv - px * vec2(0.0, 1.0)).r;
+  float edge = length(vec2(dR - dL, dU - dD));
+  edge = smoothstep(0.002 + uParam0 * 0.02, 0.02 + uParam0 * 0.05, edge);
+
+  vec3 ink = vec3(0.05, 0.95, 1.0);
+  col = mix(col, ink, edge * 0.85);
+  col *= 0.92 + 0.08 * sin(iTime * 1.5);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-post-depth-demo")
+export class Docs3dPostDepthDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      sonic-3d {
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          play
+          pick
+          min-distance="1"
+          max-distance="10"
+          aspect-ratio="16/10"
+          post-image=${DEPTH_EDGE}
+          post-image-ch0="scene"
+          post-image-ch1="depth"
+          param0="0.55"
+        ></sonic-3d>
+        <p class="text-sm text-neutral-500">
+          Post FX interne (<code>post-image</code>) : couleur
+          <code>scene</code> + discontinuités sur <code>depth</code> — pas de
+          copie vers un second composant.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-shader-live-demo.ts

@@ -0,0 +1,98 @@
+/**
+ * Démo pont live : sonic-3d → sonic-shader via channel0="#plateau"
+ * (copie canvas chaque frame, sans JPEG frame-out).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/shader/shader";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Aberration chromatique + bords neon — bien visible vs le 3d brut. */
+const LIVE_POST = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 c = uv - 0.5;
+  float aber = 0.004 + clamp(uParam0, 0.0, 1.0) * 0.028;
+  aber *= 1.0 + 0.35 * sin(iTime * 2.2);
+
+  float r = texture(iChannel0, uv + c * aber).r;
+  float g = texture(iChannel0, uv).g;
+  float b = texture(iChannel0, uv - c * aber).b;
+  vec3 col = vec3(r, g, b);
+
+  // Contours sobel légers (luma)
+  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
+  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float edge = length(vec2(tr + br - tl - bl, tl + tr - bl - br));
+  col += vec3(0.15, 0.85, 1.0) * smoothstep(0.08, 0.45, edge);
+
+  // Scanlines + vignette
+  col *= 0.88 + 0.12 * sin(uv.y * iResolution.y * 1.2);
+  float vig = smoothstep(1.15, 0.35, length(c));
+  col *= vig;
+
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-shader-live-demo")
+export class Docs3dShaderLiveDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      .grid {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 720px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      sonic-3d,
+      sonic-shader {
+        width: 100%;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <div class="grid">
+          <sonic-3d
+            id="plateau"
+            src=${HELMET_GLB}
+            camera="orbit"
+            auto-rotate
+            play
+            min-distance="1"
+            max-distance="10"
+            aspect-ratio="16/10"
+          ></sonic-3d>
+          <sonic-shader
+            play
+            channel0="#plateau"
+            image=${LIVE_POST}
+            param0="0.7"
+            aspect-ratio="16/10"
+          ></sonic-shader>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Live bridge: <code>channel0="#plateau"</code> (no JPEG). Left = raw
+          <code>sonic-3d</code>, right = chromatic aberration + neon edges +
+          scanlines. Slider-ready via <code>param0</code> (aberration strength).
+        </p>
+      </div>
+    `;
+  }
+}