create-aura3d 1.0.10 → 1.1.0

package/templates/cartoon-channel/src/image-puppet-episode.css

@@ -0,0 +1,290 @@
+body[data-cartoon-view="image-puppet"] {
+  background:
+    radial-gradient(circle at 50% 20%, rgba(115, 225, 255, 0.12), transparent 34%),
+    linear-gradient(180deg, #06101d 0%, #102820 58%, #07100f 100%);
+}
+
+body[data-cartoon-view="image-puppet"] #caption-overlay,
+body[data-cartoon-view="image-puppet"] .aura-diagnostics-overlay {
+  display: none !important;
+}
+
+body[data-cartoon-view="image-puppet"] #app {
+  opacity: 0;
+}
+
+.image-puppet {
+  --source-frame: url("/aura-assets/moon-garden-feature-frame.png");
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding: 28px;
+  background:
+    radial-gradient(circle at 50% 32%, rgba(255, 226, 150, 0.11), transparent 28%),
+    linear-gradient(180deg, rgba(7, 19, 28, 0.64), rgba(1, 8, 10, 0.9));
+}
+
+.image-puppet__frame {
+  position: relative;
+  width: min(1320px, calc(100vw - 56px));
+  aspect-ratio: 1672 / 941;
+  overflow: hidden;
+  border: 1px solid rgba(255, 232, 170, 0.28);
+  border-radius: 22px;
+  background: #06100f;
+  box-shadow:
+    0 36px 94px rgba(0, 0, 0, 0.58),
+    0 0 90px rgba(64, 255, 191, 0.12);
+  isolation: isolate;
+}
+
+.image-puppet__base,
+.image-puppet__cutout {
+  position: absolute;
+  inset: 0;
+  background-image: var(--source-frame);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 100% 100%;
+}
+
+.image-puppet__base {
+  z-index: 1;
+  filter: saturate(0.96) brightness(0.78);
+  transform: scale(1.01);
+}
+
+.image-puppet__matte {
+  position: absolute;
+  z-index: 2;
+  border-radius: 999px;
+  background:
+    radial-gradient(ellipse at 50% 50%, rgba(8, 30, 36, 0.78), rgba(8, 30, 36, 0.4) 52%, transparent 72%);
+  filter: blur(10px);
+}
+
+.image-puppet__matte--blue {
+  left: 28%;
+  top: 40%;
+  width: 22%;
+  height: 42%;
+}
+
+.image-puppet__matte--yellow {
+  left: 53%;
+  top: 33%;
+  width: 22%;
+  height: 47%;
+}
+
+.image-puppet__matte--cart {
+  left: 46%;
+  top: 62%;
+  width: 17%;
+  height: 18%;
+}
+
+.image-puppet__cutout {
+  z-index: 5;
+  will-change: transform;
+  filter:
+    saturate(1.2)
+    brightness(1.1)
+    drop-shadow(0 20px 22px rgba(0, 0, 0, 0.34));
+}
+
+.image-puppet__cutout--moon {
+  z-index: 3;
+  transform-origin: 58% 25%;
+  animation: sourceMoonPulse 2.4s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 17% 20% at 58% 25%, black 0 58%, transparent 72%);
+  mask-image: radial-gradient(ellipse 17% 20% at 58% 25%, black 0 58%, transparent 72%);
+  filter: saturate(1.15) brightness(1.12) drop-shadow(0 0 30px rgba(115, 230, 255, 0.42));
+}
+
+.image-puppet__cutout--blue-body {
+  transform-origin: 35% 70%;
+  animation: sourceBlueBody 1.25s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 9% 18% at 35% 67%, black 0 57%, transparent 72%);
+  mask-image: radial-gradient(ellipse 9% 18% at 35% 67%, black 0 57%, transparent 72%);
+}
+
+.image-puppet__cutout--blue-head {
+  z-index: 6;
+  transform-origin: 36.5% 54%;
+  animation: sourceBlueHead 1.25s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 8% 10% at 36.5% 54%, black 0 56%, transparent 72%);
+  mask-image: radial-gradient(ellipse 8% 10% at 36.5% 54%, black 0 56%, transparent 72%);
+}
+
+.image-puppet__cutout--blue-broom {
+  z-index: 7;
+  transform-origin: 42% 70%;
+  animation: sourceBroomSweep 0.88s ease-in-out infinite;
+  -webkit-mask-image:
+    linear-gradient(118deg, transparent 0 39%, black 41% 45%, transparent 48% 100%),
+    radial-gradient(ellipse 5% 5% at 42% 83%, black 0 52%, transparent 70%);
+  mask-image:
+    linear-gradient(118deg, transparent 0 39%, black 41% 45%, transparent 48% 100%),
+    radial-gradient(ellipse 5% 5% at 42% 83%, black 0 52%, transparent 70%);
+}
+
+.image-puppet__cutout--cart {
+  z-index: 5;
+  transform-origin: 53% 72%;
+  animation: sourceCartRoll 1.15s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 10% 8% at 52.5% 72%, black 0 60%, transparent 75%);
+  mask-image: radial-gradient(ellipse 10% 8% at 52.5% 72%, black 0 60%, transparent 75%);
+}
+
+.image-puppet__cutout--yellow-body {
+  transform-origin: 61% 67%;
+  animation: sourceYellowBody 1.6s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 9% 20% at 61% 64%, black 0 60%, transparent 74%);
+  mask-image: radial-gradient(ellipse 9% 20% at 61% 64%, black 0 60%, transparent 74%);
+}
+
+.image-puppet__cutout--yellow-head {
+  z-index: 6;
+  transform-origin: 61% 45%;
+  animation: sourceYellowHead 1.6s ease-in-out infinite;
+  -webkit-mask-image: radial-gradient(ellipse 8% 10% at 61% 45%, black 0 57%, transparent 72%);
+  mask-image: radial-gradient(ellipse 8% 10% at 61% 45%, black 0 57%, transparent 72%);
+}
+
+.image-puppet__cutout--yellow-tool {
+  z-index: 7;
+  transform-origin: 57% 68%;
+  animation: sourceYellowTool 1.15s ease-in-out infinite;
+  -webkit-mask-image:
+    linear-gradient(73deg, transparent 0 43%, black 45% 48%, transparent 51% 100%),
+    radial-gradient(ellipse 8% 7% at 58% 67%, black 0 54%, transparent 72%);
+  mask-image:
+    linear-gradient(73deg, transparent 0 43%, black 45% 48%, transparent 51% 100%),
+    radial-gradient(ellipse 8% 7% at 58% 67%, black 0 54%, transparent 72%);
+}
+
+.image-puppet__cutout--foreground {
+  z-index: 9;
+  transform-origin: 50% 91%;
+  animation: sourceForegroundGlow 2s ease-in-out infinite alternate;
+  -webkit-mask-image: linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.42) 78%, black 100%);
+  mask-image: linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.42) 78%, black 100%);
+  filter: saturate(1.18) brightness(1.08) drop-shadow(0 -12px 24px rgba(115, 230, 255, 0.18));
+}
+
+.image-puppet__hud,
+.image-puppet__caption {
+  position: absolute;
+  z-index: 12;
+  left: 28px;
+  right: 28px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: #f8fff2;
+  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
+}
+
+.image-puppet__hud {
+  top: 24px;
+  justify-content: space-between;
+  font: 700 13px/1.2 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.image-puppet__hud span,
+.image-puppet__hud strong {
+  padding: 8px 12px;
+  border: 1px solid rgba(248, 255, 242, 0.18);
+  border-radius: 999px;
+  background: rgba(1, 10, 10, 0.58);
+  backdrop-filter: blur(8px);
+}
+
+.image-puppet__caption {
+  bottom: 42px;
+  justify-content: center;
+  text-align: center;
+  font: 800 clamp(18px, 2.2vw, 30px) / 1.24 ui-rounded, "Trebuchet MS", system-ui, sans-serif;
+}
+
+.image-puppet__caption::before {
+  content: "";
+  position: absolute;
+  inset: -14px auto auto 50%;
+  width: min(880px, calc(100vw - 120px));
+  height: calc(100% + 28px);
+  transform: translateX(-50%);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(1, 10, 10, 0.1), rgba(1, 10, 10, 0.68));
+  z-index: -1;
+}
+
+.image-puppet__timeline {
+  position: absolute;
+  z-index: 13;
+  left: 28px;
+  right: 28px;
+  bottom: 20px;
+  height: 4px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(248, 255, 242, 0.16);
+}
+
+.image-puppet__timeline-fill {
+  display: block;
+  width: var(--progress, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ffdd87, #65ffc6);
+}
+
+@keyframes sourceMoonPulse {
+  0%, 100% { transform: scale(0.985); opacity: 0.52; }
+  50% { transform: scale(1.035); opacity: 0.88; }
+}
+
+@keyframes sourceBlueBody {
+  0%, 100% { transform: translate(-2px, 0) rotate(-1.2deg); }
+  50% { transform: translate(7px, 8px) rotate(2.6deg); }
+}
+
+@keyframes sourceBlueHead {
+  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
+  50% { transform: translate(5px, 8px) rotate(4deg); }
+}
+
+@keyframes sourceBroomSweep {
+  0%, 100% { transform: translate(-8px, 0) rotate(-5deg); }
+  50% { transform: translate(15px, 9px) rotate(8deg); }
+}
+
+@keyframes sourceCartRoll {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  50% { transform: translateX(-10px) rotate(-1.6deg); }
+}
+
+@keyframes sourceYellowBody {
+  0%, 100% { transform: translate(0, 0) rotate(1deg); }
+  50% { transform: translate(-9px, 3px) rotate(-1.8deg); }
+}
+
+@keyframes sourceYellowHead {
+  0%, 100% { transform: translate(0, 0) rotate(1.5deg); }
+  50% { transform: translate(-7px, 4px) rotate(-3deg); }
+}
+
+@keyframes sourceYellowTool {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(-13px, 9px) rotate(-5deg); }
+}
+
+@keyframes sourceForegroundGlow {
+  from { opacity: 0.62; transform: scale(1); }
+  to { opacity: 0.86; transform: scale(1.012); }
+}

package/templates/cartoon-channel/src/image-puppet-episode.ts

@@ -0,0 +1,139 @@
+import { episode, episodeSampleDescription } from "./episode";
+import type { CartoonRouteSampleForVisual } from "./sample-episode-visual";
+import "./image-puppet-episode.css";
+
+export interface ImagePuppetEpisodeOptions {
+  readonly sampleAt: (time: number) => CartoonRouteSampleForVisual;
+  readonly duration: number;
+  readonly fixedTime?: number;
+}
+
+export interface ImagePuppetEpisodeProof {
+  readonly contractId: string;
+  readonly episodeId: string;
+  readonly title: string;
+  readonly route: string;
+  readonly mode: "image-derived-puppet-cutouts";
+  readonly sourceImage: string;
+  readonly sourcePixelsAnimated: true;
+  readonly notTrue3D: true;
+  readonly screenshotTarget: "#image-puppet-episode";
+  readonly sample: CartoonRouteSampleForVisual;
+  readonly movingCutouts: readonly string[];
+  readonly limitations: readonly string[];
+}
+
+const sourceImage = "/aura-assets/moon-garden-feature-frame.png";
+const movingCutouts = [
+  "blue robot source-pixel head/body cutout",
+  "blue robot source-pixel broom area",
+  "yellow robot source-pixel head/body cutout",
+  "yellow robot source-pixel arm/tool area",
+  "wheelbarrow source-pixel cutout",
+  "foreground flower source-pixel layer",
+  "moon source-pixel pulse layer"
+] as const;
+
+export function installImagePuppetEpisode(options: ImagePuppetEpisodeOptions) {
+  document.body.dataset.cartoonView = "image-puppet";
+  const root = document.createElement("section");
+  root.id = "image-puppet-episode";
+  root.className = "image-puppet";
+  root.setAttribute("aria-label", "Image-derived puppet animation using cutouts from the moon garden source PNG");
+  root.innerHTML = `
+    <div class="image-puppet__frame">
+      <div class="image-puppet__base" aria-hidden="true"></div>
+      <div class="image-puppet__matte image-puppet__matte--blue" aria-hidden="true"></div>
+      <div class="image-puppet__matte image-puppet__matte--yellow" aria-hidden="true"></div>
+      <div class="image-puppet__matte image-puppet__matte--cart" aria-hidden="true"></div>
+
+      <div class="image-puppet__cutout image-puppet__cutout--moon" data-source-cutout="moon" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--blue-body" data-source-cutout="blue-body" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--blue-head" data-source-cutout="blue-head" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--blue-broom" data-source-cutout="blue-broom" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--cart" data-source-cutout="cart" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--yellow-body" data-source-cutout="yellow-body" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--yellow-head" data-source-cutout="yellow-head" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--yellow-tool" data-source-cutout="yellow-tool" aria-hidden="true"></div>
+      <div class="image-puppet__cutout image-puppet__cutout--foreground" data-source-cutout="foreground" aria-hidden="true"></div>
+
+      <div class="image-puppet__hud">
+        <span>Image-derived cutouts</span>
+        <strong data-image-puppet-shot-label>Shot 1 / 3</strong>
+      </div>
+      <div class="image-puppet__caption" data-image-puppet-caption></div>
+      <div class="image-puppet__timeline" aria-hidden="true">
+        <span class="image-puppet__timeline-fill" data-image-puppet-progress></span>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(root);
+
+  const caption = root.querySelector<HTMLElement>("[data-image-puppet-caption]");
+  const shotLabel = root.querySelector<HTMLElement>("[data-image-puppet-shot-label]");
+  const progress = root.querySelector<HTMLElement>("[data-image-puppet-progress]");
+  const query = new URLSearchParams(window.location.search);
+  const queryTime = query.get("sampleTime");
+  const fixedTime = options.fixedTime ?? (queryTime ? Number(queryTime) : undefined);
+  const start = performance.now();
+
+  function render(time: number) {
+    const sample = options.sampleAt(clampTime(time, options.duration));
+    const shotIndex = Math.max(0, episode.shotTimeline.shots.findIndex((shot) => shot.shotId === sample.shotId));
+    const progressPercent = Math.max(0, Math.min(100, (sample.time / options.duration) * 100));
+
+    root.dataset.shotId = sample.shotId ?? "";
+    root.dataset.captionId = sample.captionId ?? "";
+    root.dataset.sourceImage = sourceImage;
+
+    if (caption) {
+      caption.textContent = sample.captionText ?? "The source image is duplicated into moving cutout layers.";
+    }
+    if (shotLabel) {
+      shotLabel.textContent = `Shot ${shotIndex + 1} / ${episode.shotTimeline.shots.length}`;
+    }
+    if (progress) {
+      progress.style.setProperty("--progress", `${progressPercent}%`);
+    }
+
+    window.__AURA3D_CARTOON_IMAGE_PUPPET_PROOF__ = {
+      contractId: episodeSampleDescription.contractId,
+      episodeId: episode.episodePlan.episodeId,
+      title: episode.episodePlan.title,
+      route: "/?view=image-puppet",
+      mode: "image-derived-puppet-cutouts",
+      sourceImage,
+      sourcePixelsAnimated: true,
+      notTrue3D: true,
+      screenshotTarget: "#image-puppet-episode",
+      sample,
+      movingCutouts,
+      limitations: [
+        "The PNG is flattened, so these are approximate masked source-pixel cutouts, not clean production layers.",
+        "The original still remains visible under the moving cutouts unless a real background plate or inpainted clean plate exists.",
+        "This is image-derived 2D animation, not 3D reconstruction or rigged GLB character animation."
+      ]
+    };
+  }
+
+  render(Number.isFinite(fixedTime) ? Number(fixedTime) : 0);
+  const tick = () => {
+    if (!Number.isFinite(fixedTime)) {
+      render(((performance.now() - start) / 1000) % options.duration);
+    }
+    requestAnimationFrame(tick);
+  };
+  tick();
+  return root;
+}
+
+declare global {
+  interface Window {
+    __AURA3D_CARTOON_IMAGE_PUPPET_PROOF__?: ImagePuppetEpisodeProof;
+  }
+}
+
+function clampTime(time: number, duration: number) {
+  if (!Number.isFinite(time)) return 0;
+  return Math.max(0, Math.min(duration - 1 / 30, time));
+}

package/templates/cartoon-channel/src/main.ts

@@ -16,6 +16,7 @@ import {
   scene,
   type AuraAssetRef
 } from "@aura3d/engine";
+import "./sample-episode-visual.css";
 import { assets } from "./aura-assets";
 import {
   episode,
@@ -45,6 +46,7 @@ import {
   visemeFrameSyncSourceProof,
   visemeTrack
 } from "./render-plan";
+import { installSampleEpisodeVisual } from "./sample-episode-visual";
 
 declare global {
   interface Window {
@@ -64,8 +66,12 @@ declare global {
       readonly bridgeIssues: readonly unknown[];
       readonly promptAnimationEvidence: unknown;
       readonly publishReadiness: unknown;
+      readonly releaseFacingViews: readonly string[];
+      readonly rejectedViews: readonly string[];
+      readonly rejectedViewReason: string;
       readonly sourceProofs: unknown;
       readonly sampleRenderSourceWorkflow: unknown;
+      diagnostics(): unknown;
       sampleAt(time: number): unknown;
     };
   }
@@ -118,14 +124,22 @@ captionOverlay.dataset.captionId = playbackProbeSamples[0]?.captionId ?? firstCa
 document.body.dataset.cartoonShotCount = String(episode.shotTimeline.shots.length);
 document.body.dataset.cartoonCaptionCount = String(episode.captionTrack.cues.length);
 document.body.dataset.cartoonStoryBibleProps = String(storyBible.props.length);
+document.body.dataset.cartoonReleaseFacingView = "sample-episode-visual";
+document.body.dataset.cartoonRejectedViews = "concept-2-5d,puppet-2d,image-puppet";
+installSampleEpisodeVisual({
+  sampleAt: sampleCartoonRouteAt,
+  duration: episode.episodePlan.runtime.duration,
+  usesTypedAssets: missingCartoonCharacterAssets.length === 0
+});
 
 const app = createAuraApp("#app", {
   scene: scene()
     .background("#081b2a")
-    .add(createCharacterBody("miko", "Miko", "miko", [-0.8, 0.75, 0], [0.32, 0.42, 0.32], 0.72, "#7de2ff"))
-    .add(createMouthCard("miko:mouth", "Miko", [-0.8, 0.8, 0.32], "#f8fff2"))
-    .add(createCharacterBody("luma", "Luma", "luma", [0.8, 0.72, 0], [0.3, 0.38, 0.3], 0.68, "#ffe18e"))
-    .add(createMouthCard("luma:mouth", "Luma", [0.8, 0.77, 0.32], "#40ffbf"))
+    .addMany(createAuraRenderedCartoonScene())
+    .add(createCharacterBody("miko", "Miko", "miko", [-0.72, 0.08, -0.34], [0.32, 0.42, 0.32], 0.9, "#7de2ff"))
+    .add(createMouthCard("miko:mouth", "Miko", [-3.2, -3.2, -3.2], "#f8fff2"))
+    .add(createCharacterBody("luma", "Luma", "luma", [0.72, 0.08, -0.34], [0.3, 0.38, 0.3], 0.9, "#ffe18e"))
+    .add(createMouthCard("luma:mouth", "Luma", [3.2, -3.2, -3.2], "#40ffbf"))
     .add(
       primitives
         .box({ name: "moon garden path", material: material.pbr({ color: "#182d3f", roughness: 0.78 }) })
@@ -134,7 +148,7 @@ const app = createAuraApp("#app", {
     )
     .add(
       primitives
-        .sphere({ name: "glow stones primitive fallback", material: material.emissive({ color: "#ffe18e", intensity: 0.42 }) })
+        .sphere({ name: "glow stones primitive fallback", material: material.emissive({ color: "#ffe18e" }) })
         .position(0.18, 0.16, 0.28)
         .scale([0.16, 0.08, 0.16])
     )
@@ -144,73 +158,11 @@ const app = createAuraApp("#app", {
         .position(-0.38, 0.2, 0.18)
         .scale([0.12, 0.24, 0.04])
     )
-    .add(labels.hud({ text: firstCaption?.text ?? firstStoryboardShot?.storyBeat ?? "Aura3D cartoon channel", position: "bottom-center" }))
+    .add(labels.hud(firstCaption?.text ?? firstStoryboardShot?.storyBeat ?? "Aura3D cartoon channel"))
     .add(lights.studio({ intensity: 1.2 }))
     .add(effects.bloom({ intensity: 0.18, color: "#7de2ff" }))
-    .camera(camera.perspective({ position: [0, 1.4, 4.2], target: [0, 0.7, 0], fov: 42 })),
-  diagnostics: true,
-  metadata: {
-    contractId: episodeContractId,
-    template: "cartoon-channel",
-    runtimePlayback: "app.onFrame updates runtime nodes; createAuraApp is called once",
-    renderQueueItems: renderPlan.items.length,
-    renderPackageId: renderOutputPackage.packageId,
-    storyBibleId: storyBible.episodeId,
-    storyBibleProps: storyBible.props.map((prop) => prop.id),
-    styleGuide: storyBible.styleGuide.visualStyle,
-    shotListCount: storyBible.shotList.length,
-    playbackProbeSamples: playbackProbeSamples.map((sample) => ({
-      time: sample.time,
-      frame: sample.frame,
-      shotId: sample.shotId,
-      captionId: sample.captionId,
-      nodeUpdateCount: sample.nodeUpdates.length
-    })),
-    thumbnailCaptureSceneStateId: thumbnailCapture.sourceSceneStateId,
-    thumbnailCaptureTime: thumbnailCapture.time,
-    thumbnailCaptionId: thumbnailCaption?.captionId,
-    deterministicCaptureItems: renderPlan.items.filter((item) => item.sourceSceneState).length,
-    deterministicScreenshotFixtures,
-    typedAssets: typedCartoonAssetSummary,
-    requiredTypedAssets: requiredCartoonCharacterAssets,
-    missingTypedAssets: missingCartoonCharacterAssets,
-    assetCommands: publicCartoonAssetInstructions,
-    bridgeIssueCount: bridgeIssues.length,
-    bridgeSampleAtThumbnail: {
-      time: bridgeSampleAtThumbnail.time,
-      frame: bridgeSampleAtThumbnail.frame,
-      shotId: bridgeSampleAtThumbnail.shot?.shotId,
-      dialogueLineId: bridgeSampleAtThumbnail.dialogue?.lineId
-    },
-    promptAnimationEvidence: {
-      publishReady: promptAnimationEvidence.publishReady,
-      assetStatus: promptAnimationEvidence.assetStatus,
-      captions: promptAnimationEvidence.captions,
-      visemes: promptAnimationEvidence.visemes,
-      audio: promptAnimationEvidence.audio,
-      deterministicCapture: promptAnimationEvidence.deterministicCapture,
-      routeHealth: promptAnimationEvidence.routeHealth
-    },
-    publishReadiness: {
-      ready: publishReadiness.ready,
-      issueCount: publishReadiness.issues.length
-    },
-    captionTimingProof: {
-      status: captionTimingProof.status,
-      maxDriftFrames: captionTimingProof.maxDriftFrames,
-      coveredLineIds: captionTimingProof.coveredLineIds
-    },
-    captionFrameSyncSourceProof,
-    visemeFrameSyncSourceProof,
-    sampleRenderSourceWorkflow,
-    accessibilityProof: {
-      captions: accessibilityProofMetadata?.captions.status,
-      reducedMotion: accessibilityProofMetadata?.reducedMotion.status,
-      highContrast: accessibilityProofMetadata?.highContrast.status
-    },
-    primitiveMouthRuntimeExample,
-    glbVisemeRuntimeExample
-  }
+    .camera(camera.perspective({ position: [0, 1.18, 4.4], target: [0, 0.82, -0.45], fov: 38 })),
+  diagnostics: true
 });
 
 window.__AURA3D_CARTOON_TEMPLATE__ = {
@@ -229,12 +181,19 @@ window.__AURA3D_CARTOON_TEMPLATE__ = {
   bridgeIssues,
   promptAnimationEvidence,
   publishReadiness,
+  releaseFacingViews: ["sample-episode-visual"],
+  rejectedViews: ["concept-2-5d", "puppet-2d", "image-puppet"],
+  rejectedViewReason:
+    "Rejected 1.0.10 puppet/parallax experiments are quarantined from the release-facing cartoon-channel route because still-image parallax, flat cutout motion, and notTrue3D proof cannot satisfy Aura3D 1.1 cartoon animation readiness.",
   sourceProofs: {
     captionFrameSyncSourceProof,
     visemeFrameSyncSourceProof,
     phonemeVisemeDubSyncSourceProof
   },
   sampleRenderSourceWorkflow,
+  diagnostics() {
+    return app.diagnostics();
+  },
   sampleAt(time: number) {
     return sampleCartoonRouteAt(time);
   }
@@ -267,6 +226,7 @@ function createCharacterBody(
     return model(asset, { name: `${name} typed character asset` })
       .position(position[0], position[1], position[2])
       .scale(modelScale)
+      .material(material.pbr({ color, roughness: 0.38, metallic: 0.02 }))
       .runtime(runtime);
   }
   return primitives
@@ -283,13 +243,71 @@ function createMouthCard(id: "miko:mouth" | "luma:mouth", name: string, position
   return primitives
     .box({
       name: `${name} primitive mouth card`,
-      material: material.emissive({ color, intensity: 0.32 })
+      material: material.emissive({ color })
     })
     .position(position[0], position[1], position[2])
     .scale([0.22, 0.035, 0.025])
     .runtime(game.runtimeNode(id, { tags: ["mouth", "primitive", name.toLowerCase()] }));
 }
 
+function createAuraRenderedCartoonScene() {
+  const skyMat = material.emissive({ color: "#0a2941", emissive: "#0f4765", emissiveIntensity: 0.18 });
+  const gardenMat = material.pbr({ color: "#17493e", roughness: 0.64, metallic: 0.02 });
+  const pathMat = material.clearcoat({ color: "#526b62", roughness: 0.2, clearcoat: 0.4 });
+  const shadowMat = material.pbr({ color: "#020813", roughness: 0.96, opacity: 0.44 });
+  const moonMat = material.emissive({ color: "#b7f4ff", emissive: "#7de2ff", emissiveIntensity: 0.82, opacity: 0.72 });
+  const bloomCyan = material.emissive({ color: "#7de2ff", emissive: "#7de2ff", emissiveIntensity: 1.45 });
+  const bloomGold = material.emissive({ color: "#ffe18e", emissive: "#ffe18e", emissiveIntensity: 1.35 });
+  return [
+    primitives.plane({ name: "Aura3D moon garden sky plate", material: skyMat }).position(0, 1.35, -2.15).rotate(-0.04, 0, 0).scale([5.8, 1, 2.5]),
+    primitives.sphere({ name: "Aura3D glowing moon portal core", material: moonMat }).position(0, 1.35, -1.95).scale([0.62, 0.62, 0.04]),
+    primitives.torus({ name: "Aura3D moon portal rim", material: bloomCyan }).position(0, 1.35, -1.94).scale([0.78, 0.78, 0.026]),
+    ...createCartoonCitySilhouette(),
+    primitives.plane({ name: "Aura3D moon garden floor", material: gardenMat }).position(0, -0.02, -0.45).scale([4.8, 1, 2.6]),
+    primitives.cylinder({ name: "Aura3D curved garden mound", material: gardenMat }).position(0, 0.03, -0.64).scale([1.72, 0.08, 0.74]),
+    primitives.box({ name: "Aura3D warm stone path", material: pathMat }).position(0, 0.06, 0.1).scale([1.58, 0.04, 0.28]),
+    primitives.cylinder({ name: "Aura3D blue robot contact shadow", material: shadowMat }).position(-0.72, 0.055, -0.34).scale([0.44, 0.012, 0.28]),
+    primitives.cylinder({ name: "Aura3D gold robot contact shadow", material: shadowMat }).position(0.72, 0.055, -0.34).scale([0.44, 0.012, 0.28]),
+    primitives.box({ name: "Aura3D broom handle", material: bloomCyan }).position(-0.25, 0.28, -0.2).rotate(0, 0, -0.6).scale([0.58, 0.035, 0.035]),
+    primitives.box({ name: "Aura3D broom bristles", material: bloomGold }).position(-0.55, 0.14, -0.18).rotate(0, 0, -0.25).scale([0.18, 0.1, 0.04]),
+    ...createGlowStones(),
+    ...createMoonLilies(),
+    lights.ambient({ intensity: 0.2, color: "#b9f2ff" }),
+    lights.point({ name: "Aura3D moon garden cyan key", position: [-1.8, 2.4, 1.2], color: "#7de2ff", intensity: 2.8 }),
+    lights.point({ name: "Aura3D moon garden warm robot rim", position: [1.8, 1.7, 0.8], color: "#ffe18e", intensity: 2.0 })
+  ];
+}
+
+function createCartoonCitySilhouette() {
+  const mat = material.pbr({ color: "#071825", roughness: 0.88, metallic: 0.04 });
+  return [-2.2, -1.45, -0.62, 0.38, 1.25, 2.04].map((x, index) =>
+    primitives.box({ name: `Aura3D rounded distant city tower ${index + 1}`, material: mat })
+      .position(x, 0.45 + (index % 3) * 0.08, -1.72)
+      .scale([0.22 + (index % 2) * 0.08, 0.82 + (index % 3) * 0.18, 0.08])
+  );
+}
+
+function createGlowStones() {
+  const cyan = material.emissive({ color: "#7de2ff", emissive: "#7de2ff", emissiveIntensity: 1.2 });
+  const gold = material.emissive({ color: "#ffe18e", emissive: "#ffe18e", emissiveIntensity: 1.1 });
+  return [
+    primitives.sphere({ name: "Aura3D glow stone left foreground", material: gold }).position(-1.45, 0.1, 0.22).scale([0.1, 0.045, 0.08]),
+    primitives.sphere({ name: "Aura3D glow stone center", material: cyan }).position(-0.1, 0.1, 0.0).scale([0.08, 0.035, 0.06]),
+    primitives.sphere({ name: "Aura3D glow stone right foreground", material: gold }).position(1.48, 0.1, 0.18).scale([0.1, 0.045, 0.08])
+  ];
+}
+
+function createMoonLilies() {
+  const petal = material.emissive({ color: "#eafcff", emissive: "#d7fbff", emissiveIntensity: 0.48 });
+  const stem = material.emissive({ color: "#40ffbf", emissive: "#40ffbf", emissiveIntensity: 0.72 });
+  return [
+    primitives.cylinder({ name: "Aura3D moon lily stem left", material: stem }).position(-1.72, 0.22, -0.2).scale([0.018, 0.24, 0.018]),
+    primitives.sphere({ name: "Aura3D moon lily bloom left", material: petal }).position(-1.72, 0.42, -0.2).scale([0.16, 0.06, 0.12]),
+    primitives.cylinder({ name: "Aura3D moon lily stem right", material: stem }).position(1.76, 0.22, -0.26).scale([0.018, 0.24, 0.018]),
+    primitives.sphere({ name: "Aura3D moon lily bloom right", material: petal }).position(1.76, 0.42, -0.26).scale([0.16, 0.06, 0.12])
+  ];
+}
+
 function sampleCartoonRouteAt(time: number) {
   const bridgeSample = sampleAuraVoiceBridgeAtTime(auraVoicePackage, time);
   const playbackSample = sampleShotPlaybackPlan(shotPlaybackPlan, time);