create-aura3d 1.0.9 → 1.1.0

package/templates/cartoon-channel/package.json

@@ -8,10 +8,11 @@
     "typecheck": "tsc --noEmit",
     "build": "npm run typecheck && vite build",
     "preview": "vite preview --host 0.0.0.0",
-    "test": "playwright test tests/route-health.spec.ts tests/storyboard-playback.spec.ts --workers=1"
+    "test": "playwright test tests/route-health.spec.ts tests/storyboard-playback.spec.ts tests/sample-episode-visual.spec.ts tests/concept-2-5d.spec.ts tests/puppet-2d.spec.ts tests/image-puppet.spec.ts tests/concept-2-5d-animation.spec.ts tests/puppet-2d-animation.spec.ts tests/image-puppet-animation.spec.ts --workers=1",
+    "test:negative-failed-puppets": "playwright test tests/concept-2-5d.spec.ts tests/puppet-2d.spec.ts tests/image-puppet.spec.ts tests/concept-2-5d-animation.spec.ts tests/puppet-2d-animation.spec.ts tests/image-puppet-animation.spec.ts --workers=1"
   },
   "dependencies": {
-    "@aura3d/engine": "1.0.9"
+    "@aura3d/engine": "1.0.10"
   },
   "devDependencies": {
     "@playwright/test": "^1.52.0",

package/templates/cartoon-channel/public/aura-assets/luma.thumb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><rect width="320" height="180" fill="#101720"/><path d="M80 126 160 46l80 80-80 28z" fill="#77a7ff"/><text x="160" y="160" text-anchor="middle" font-family="Arial" font-size="18" fill="#f4f7fb">luma 0.066x0.026x0.017</text></svg>

package/templates/cartoon-channel/public/aura-assets/miko.thumb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><rect width="320" height="180" fill="#101720"/><path d="M80 126 160 46l80 80-80 28z" fill="#77a7ff"/><text x="160" y="160" text-anchor="middle" font-family="Arial" font-size="18" fill="#f4f7fb">miko 0.066x0.026x0.017</text></svg>

package/templates/cartoon-channel/src/aura-assets.ts

@@ -1,14 +1,8 @@
 import { defineAuraAssets } from "@aura3d/engine";
-import { AURAVOICE_AURA3D_PROMPT_ANIMATION_CONTRACT_ID } from "./contract";
-
-export const assetContractId = AURAVOICE_AURA3D_PROMPT_ANIMATION_CONTRACT_ID;
 
 export const assets = defineAuraAssets({
-  /*
-   * Add character GLBs with the Aura3D CLI, then keep these generated keys:
-   *
-   * npx @aura3d/cli@latest assets add ./assets/miko.glb --name miko
-   * npx @aura3d/cli@latest assets add ./assets/luma.glb --name luma
-   * npx @aura3d/cli@latest assets validate-cartoon
-   */
-});
+  "luma": { type: "model", format: "glb", url: "/aura-assets/luma.047f5e5f.glb", hash: "sha256-047f5e5fb3bb6d378bd1df16ca6137f2a596c99b3a1b5690b4020c05aaf6f319", bounds: [0.066,0.026,0.017], sizeBytes: 463988, metadata: {"materials":["Grey","Main","Black"],"animations":["Dance","Death","Idle","Jump","No","Punch","Running","Sitting","Standing","ThumbsUp","Walking","WalkJump","Wave","Yes"],"animationClips":["Dance","Death","Idle","Jump","No","Punch","Running","Sitting","Standing","ThumbsUp","Walking","WalkJump","Wave","Yes"],"animationMetadata":{"clipCount":14,"clips":[{"index":0,"name":"Dance","channelCount":12,"samplerCount":12,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperArm.L","LowerArm.L","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":1,"name":"Death","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Shoulder.L","LowerArm.L","Shoulder.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":2,"name":"Idle","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":3,"name":"Jump","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":4,"name":"No","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":5,"name":"Punch","channelCount":15,"samplerCount":15,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":6,"name":"Running","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":7,"name":"Sitting","channelCount":10,"samplerCount":10,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":8,"name":"Standing","channelCount":10,"samplerCount":10,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":9,"name":"ThumbsUp","channelCount":15,"samplerCount":15,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","UpperArm.R","LowerArm.R","Middle1.R","Thumb.R","Thumb2.R","Index.R","Ring1.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":10,"name":"Walking","channelCount":20,"samplerCount":20,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"]},{"index":11,"name":"WalkJump","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":12,"name":"Wave","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","Shoulder.R","UpperArm.R","LowerArm.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Index.R","Index2.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":13,"name":"Yes","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]}],"messages":["Detected 14 embedded animation clips."]},"humanoid":true,"humanoidStatus":"humanoid","humanoidConfidence":"high","skeleton":{"skinCount":2,"jointCount":43,"skins":[{"index":0,"name":"skin-0","jointCount":43,"joints":["Bone","Foot.L","Body","Hips","Abdomen","Torso","Neck","Head","Shoulder.L","UpperArm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Thumb.L","Thumb2.L","Palm1.L","Index.L","Index2.L","Palm3.L","Ring1.L","Ring2.L","Shoulder.R","UpperArm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Palm1.R","Index.R","Index2.R","Palm3.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"],"skeleton":"Bone"},{"index":1,"name":"skin-1","jointCount":43,"joints":["Bone","Foot.L","Body","Hips","Abdomen","Torso","Neck","Head","Shoulder.L","UpperArm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Thumb.L","Thumb2.L","Palm1.L","Index.L","Index2.L","Palm3.L","Ring1.L","Ring2.L","Shoulder.R","UpperArm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Palm1.R","Index.R","Index2.R","Palm3.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"],"skeleton":"Bone"}],"messages":["Detected 2 skins with 43 unique joints."]},"morphTargets":{"targetCount":3,"targetNames":["Angry","Surprised","Sad"],"meshes":[{"index":2,"name":"Head","targetNames":["Angry","Surprised","Sad"]}],"messages":["Detected 3 morph targets."]},"provenance":{"sourcePath":"../../../engine/src/agent-api/assets/player-fixture.glb","checkedAt":"2026-06-06T23:36:54.694Z"},"sourcePath":"../../../engine/src/agent-api/assets/player-fixture.glb","outputPath":"public/aura-assets/luma.047f5e5f.glb","boundsMetadata":{"min":[-0.033,-0.013,-0.009],"max":[0.033,0.013,0.008],"size":[0.066,0.026,0.017],"center":[0,0,0],"maxDimension":0.066,"grounded":true},"materialMetadata":[{"name":"Grey","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]},{"name":"Main","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]},{"name":"Black","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]}],"orientation":{"source":"unknown","messages":["No orientation metadata detected; facing direction cannot be proven."]},"nodeNames":["RootNode","RobotArmature","Bone","Foot.L","Foot.L","Foot.L_end","Body","Torso","Hips","Abdomen","Torso","Neck","Head","Head","Head_end","Shoulder.L","Shoulder.L","UpperArm.L","Arm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Middle2.L_end","Thumb.L","Thumb2.L","Thumb2.L_end","Palm1.L","Index.L","Index2.L","Index2.L_end","Palm3.L","Ring1.L","Ring2.L","Ring2.L_end","Shoulder.R","Shoulder.R","UpperArm.R","Arm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Middle2.R_end","Thumb.R","Thumb2.R","Thumb2.R_end","Palm1.R","Index.R","Index2.R","Index2.R_end","Palm3.R","Ring1.R","Ring2.R","Ring2.R_end","UpperLeg.L","Leg.L","LowerLeg.L","LowerLeg.L","LowerLeg.L_end","UpperLeg.R","Leg.R","LowerLeg.R","LowerLeg.R","LowerLeg.R_end","PoleTarget.L","PoleTarget.L_end","Foot.R","Foot.R","Foot.R_end","PoleTarget.R","PoleTarget.R_end","Hand.R","Hand.L"],"textures":[],"dependencies":[],"thumbnailUrl":"/aura-assets/luma.thumb.svg"} },
+  "miko": { type: "model", format: "glb", url: "/aura-assets/miko.047f5e5f.glb", hash: "sha256-047f5e5fb3bb6d378bd1df16ca6137f2a596c99b3a1b5690b4020c05aaf6f319", bounds: [0.066,0.026,0.017], sizeBytes: 463988, metadata: {"materials":["Grey","Main","Black"],"animations":["Dance","Death","Idle","Jump","No","Punch","Running","Sitting","Standing","ThumbsUp","Walking","WalkJump","Wave","Yes"],"animationClips":["Dance","Death","Idle","Jump","No","Punch","Running","Sitting","Standing","ThumbsUp","Walking","WalkJump","Wave","Yes"],"animationMetadata":{"clipCount":14,"clips":[{"index":0,"name":"Dance","channelCount":12,"samplerCount":12,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperArm.L","LowerArm.L","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":1,"name":"Death","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Shoulder.L","LowerArm.L","Shoulder.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":2,"name":"Idle","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":3,"name":"Jump","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":4,"name":"No","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":5,"name":"Punch","channelCount":15,"samplerCount":15,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":6,"name":"Running","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":7,"name":"Sitting","channelCount":10,"samplerCount":10,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":8,"name":"Standing","channelCount":10,"samplerCount":10,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":9,"name":"ThumbsUp","channelCount":15,"samplerCount":15,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","LowerArm.L","UpperArm.R","LowerArm.R","Middle1.R","Thumb.R","Thumb2.R","Index.R","Ring1.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":10,"name":"Walking","channelCount":20,"samplerCount":20,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"]},{"index":11,"name":"WalkJump","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Foot.L","Body","Neck","UpperArm.L","LowerArm.L","Shoulder.R","UpperArm.R","LowerArm.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","Foot.R"]},{"index":12,"name":"Wave","channelCount":18,"samplerCount":18,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","Shoulder.R","UpperArm.R","LowerArm.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Index.R","Index2.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]},{"index":13,"name":"Yes","channelCount":7,"samplerCount":7,"targetPaths":["weights","translation","rotation"],"targetNodes":["Head","Body","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R"]}],"messages":["Detected 14 embedded animation clips."]},"humanoid":true,"humanoidStatus":"humanoid","humanoidConfidence":"high","skeleton":{"skinCount":2,"jointCount":43,"skins":[{"index":0,"name":"skin-0","jointCount":43,"joints":["Bone","Foot.L","Body","Hips","Abdomen","Torso","Neck","Head","Shoulder.L","UpperArm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Thumb.L","Thumb2.L","Palm1.L","Index.L","Index2.L","Palm3.L","Ring1.L","Ring2.L","Shoulder.R","UpperArm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Palm1.R","Index.R","Index2.R","Palm3.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"],"skeleton":"Bone"},{"index":1,"name":"skin-1","jointCount":43,"joints":["Bone","Foot.L","Body","Hips","Abdomen","Torso","Neck","Head","Shoulder.L","UpperArm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Thumb.L","Thumb2.L","Palm1.L","Index.L","Index2.L","Palm3.L","Ring1.L","Ring2.L","Shoulder.R","UpperArm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Thumb.R","Thumb2.R","Palm1.R","Index.R","Index2.R","Palm3.R","Ring1.R","Ring2.R","UpperLeg.L","LowerLeg.L","UpperLeg.R","LowerLeg.R","PoleTarget.L","Foot.R","PoleTarget.R"],"skeleton":"Bone"}],"messages":["Detected 2 skins with 43 unique joints."]},"morphTargets":{"targetCount":3,"targetNames":["Angry","Surprised","Sad"],"meshes":[{"index":2,"name":"Head","targetNames":["Angry","Surprised","Sad"]}],"messages":["Detected 3 morph targets."]},"provenance":{"sourcePath":"../../../../fixtures/threejs-parity/assets/character/robot-expressive.glb","checkedAt":"2026-06-06T23:22:20.212Z"},"sourcePath":"../../../../fixtures/threejs-parity/assets/character/robot-expressive.glb","outputPath":"public/aura-assets/miko.047f5e5f.glb","boundsMetadata":{"min":[-0.033,-0.013,-0.009],"max":[0.033,0.013,0.008],"size":[0.066,0.026,0.017],"center":[0,0,0],"maxDimension":0.066,"grounded":true},"materialMetadata":[{"name":"Grey","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]},{"name":"Main","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]},{"name":"Black","visible":true,"readable":true,"opacity":1,"alphaMode":"OPAQUE","reasons":[]}],"orientation":{"source":"unknown","messages":["No orientation metadata detected; facing direction cannot be proven."]},"nodeNames":["RootNode","RobotArmature","Bone","Foot.L","Foot.L","Foot.L_end","Body","Torso","Hips","Abdomen","Torso","Neck","Head","Head","Head_end","Shoulder.L","Shoulder.L","UpperArm.L","Arm.L","LowerArm.L","Palm2.L","Middle1.L","Middle2.L","Middle2.L_end","Thumb.L","Thumb2.L","Thumb2.L_end","Palm1.L","Index.L","Index2.L","Index2.L_end","Palm3.L","Ring1.L","Ring2.L","Ring2.L_end","Shoulder.R","Shoulder.R","UpperArm.R","Arm.R","LowerArm.R","Palm2.R","Middle1.R","Middle2.R","Middle2.R_end","Thumb.R","Thumb2.R","Thumb2.R_end","Palm1.R","Index.R","Index2.R","Index2.R_end","Palm3.R","Ring1.R","Ring2.R","Ring2.R_end","UpperLeg.L","Leg.L","LowerLeg.L","LowerLeg.L","LowerLeg.L_end","UpperLeg.R","Leg.R","LowerLeg.R","LowerLeg.R","LowerLeg.R_end","PoleTarget.L","PoleTarget.L_end","Foot.R","Foot.R","Foot.R_end","PoleTarget.R","PoleTarget.R_end","Hand.R","Hand.L"],"textures":[],"dependencies":[],"thumbnailUrl":"/aura-assets/miko.thumb.svg"} },
+} as const);
+
+export type AuraGeneratedAssets = typeof assets;

package/templates/cartoon-channel/src/concept-episode-2-5d.css

@@ -0,0 +1,159 @@
+body[data-cartoon-view="concept-2-5d"] {
+  background:
+    radial-gradient(circle at 50% 22%, rgba(169, 255, 225, 0.16), transparent 34%),
+    linear-gradient(180deg, #081118 0%, #11241f 56%, #081216 100%);
+}
+
+body[data-cartoon-view="concept-2-5d"] #caption-overlay {
+  display: none !important;
+}
+
+body[data-cartoon-view="concept-2-5d"] #app {
+  opacity: 0;
+}
+
+.concept-2-5d {
+  --parallax: 0;
+  --image: 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, 232, 170, 0.11), transparent 28%),
+    linear-gradient(180deg, rgba(9, 25, 22, 0.58), rgba(1, 8, 10, 0.88));
+}
+
+.concept-2-5d__frame {
+  position: relative;
+  width: min(1320px, calc(100vw - 56px));
+  aspect-ratio: 16 / 9;
+  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;
+}
+
+.concept-2-5d__layer {
+  position: absolute;
+  inset: 0;
+  background-image: var(--image);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  will-change: transform;
+}
+
+.concept-2-5d__layer--far {
+  z-index: 1;
+  transform: translate3d(calc(var(--parallax) * -10px), 0, 0) scale(1.02);
+  filter: saturate(1.02) brightness(0.94);
+}
+
+.concept-2-5d__layer--mid {
+  z-index: 2;
+  transform: translate3d(calc(var(--parallax) * 8px), 0, 0);
+  filter: saturate(1.08) brightness(1.02);
+  opacity: 0.42;
+  mask-image: radial-gradient(ellipse at 54% 54%, black 0 36%, rgba(0, 0, 0, 0.82) 48%, transparent 70%);
+}
+
+.concept-2-5d__layer--characters {
+  z-index: 3;
+  transform: translate3d(calc(var(--parallax) * 26px), calc(var(--parallax) * -2px), 0);
+  filter: saturate(1.14) brightness(1.04) drop-shadow(0 28px 28px rgba(0, 0, 0, 0.34));
+  mask-image: radial-gradient(ellipse at 50% 62%, black 0 29%, rgba(0, 0, 0, 0.74) 43%, transparent 62%);
+}
+
+.concept-2-5d__layer--foreground {
+  z-index: 4;
+  transform: translate3d(calc(var(--parallax) * 44px), 0, 0);
+  filter: saturate(1.22) brightness(1.08) drop-shadow(0 -24px 34px rgba(8, 24, 22, 0.34));
+  mask-image: linear-gradient(180deg, transparent 0 56%, rgba(0, 0, 0, 0.34) 66%, black 82%);
+}
+
+.concept-2-5d__grain {
+  position: absolute;
+  z-index: 7;
+  inset: 0;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 100% 4px,
+    radial-gradient(circle at 45% 30%, transparent 0 40%, rgba(2, 8, 8, 0.22) 74%, rgba(2, 8, 8, 0.52) 100%);
+  mix-blend-mode: soft-light;
+  pointer-events: none;
+}
+
+.concept-2-5d__hud,
+.concept-2-5d__caption {
+  position: absolute;
+  z-index: 8;
+  left: 28px;
+  right: 28px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: #f8fff2;
+  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
+}
+
+.concept-2-5d__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;
+}
+
+.concept-2-5d__hud span,
+.concept-2-5d__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);
+}
+
+.concept-2-5d__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;
+}
+
+.concept-2-5d__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.18), rgba(1, 10, 10, 0.68));
+  z-index: -1;
+}
+
+.concept-2-5d__timeline {
+  position: absolute;
+  z-index: 9;
+  left: 28px;
+  right: 28px;
+  bottom: 20px;
+  height: 4px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(248, 255, 242, 0.16);
+}
+
+.concept-2-5d__timeline-fill {
+  display: block;
+  width: var(--progress, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ffdd87, #65ffc6);
+}

package/templates/cartoon-channel/src/concept-episode-2-5d.ts

@@ -0,0 +1,155 @@
+import { episode, episodeSampleDescription, youtubeDraftMetadata } from "./episode";
+import type { CartoonRouteSampleForVisual } from "./sample-episode-visual";
+import "./concept-episode-2-5d.css";
+
+export interface ConceptEpisode2_5DOptions {
+  readonly sampleAt: (time: number) => CartoonRouteSampleForVisual;
+  readonly duration: number;
+  readonly fixedTime?: number;
+}
+
+export interface ConceptEpisode2_5DProof {
+  readonly contractId: string;
+  readonly episodeId: string;
+  readonly title: string;
+  readonly route: string;
+  readonly mode: "2.5d-parallax-concept";
+  readonly sourceImage: string;
+  readonly notTrue3D: true;
+  readonly screenshotTarget: "#concept-episode-2-5d";
+  readonly sample: CartoonRouteSampleForVisual;
+  readonly parallax: number;
+  readonly layers: readonly {
+    readonly id: string;
+    readonly role: string;
+    readonly depth: number;
+    readonly source: "same-concept-frame";
+  }[];
+  readonly aura3dRole: readonly string[];
+  readonly limitations: readonly string[];
+}
+
+const sourceImage = "/aura-assets/moon-garden-feature-frame.png";
+const layers = [
+  { id: "far-background", role: "moonlit sky and set backdrop", depth: 0.12, source: "same-concept-frame" },
+  { id: "midground-set", role: "garden stage and central character space", depth: 0.42, source: "same-concept-frame" },
+  { id: "character-plane", role: "painted character/action plane", depth: 0.72, source: "same-concept-frame" },
+  { id: "foreground-garden", role: "front flowers/path edge", depth: 1, source: "same-concept-frame" }
+] as const;
+
+export function installConceptEpisode2_5D(options: ConceptEpisode2_5DOptions) {
+  document.body.dataset.cartoonView = "concept-2-5d";
+  const root = document.createElement("section");
+  root.id = "concept-episode-2-5d";
+  root.className = "concept-2-5d";
+  root.setAttribute("aria-label", "Aura3D 2.5D cartoon concept episode preview");
+  root.innerHTML = `
+    <div class="concept-2-5d__frame">
+      <div class="concept-2-5d__layer concept-2-5d__layer--far" data-layer-id="far-background" aria-hidden="true"></div>
+      <div class="concept-2-5d__layer concept-2-5d__layer--mid" data-layer-id="midground-set" aria-hidden="true"></div>
+      <div class="concept-2-5d__layer concept-2-5d__layer--characters" data-layer-id="character-plane" aria-hidden="true"></div>
+      <div class="concept-2-5d__layer concept-2-5d__layer--foreground" data-layer-id="foreground-garden" aria-hidden="true"></div>
+      <div class="concept-2-5d__aura-host-slot" data-aura-host-slot></div>
+      <div class="concept-2-5d__grain" aria-hidden="true"></div>
+      <div class="concept-2-5d__hud">
+        <span>2.5D concept frame</span>
+        <strong data-concept-shot-label>Shot 1 / 3</strong>
+      </div>
+      <div class="concept-2-5d__caption" data-concept-caption></div>
+      <div class="concept-2-5d__timeline" aria-hidden="true">
+        <span class="concept-2-5d__timeline-fill" data-concept-progress></span>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(root);
+
+  const hostSlot = root.querySelector<HTMLElement>("[data-aura-host-slot]");
+  const appHost = document.querySelector<HTMLElement>("#app");
+  if (hostSlot && appHost) {
+    hostSlot.replaceWith(appHost);
+  }
+
+  const caption = root.querySelector<HTMLElement>("[data-concept-caption]");
+  const shotLabel = root.querySelector<HTMLElement>("[data-concept-shot-label]");
+  const progress = root.querySelector<HTMLElement>("[data-concept-progress]");
+  const query = new URLSearchParams(window.location.search);
+  const queryTime = query.get("sampleTime");
+  const queryParallax = query.get("parallax");
+  const animateParallax = query.get("animateParallax") === "1";
+  const fixedTime = options.fixedTime ?? (queryTime ? Number(queryTime) : undefined);
+  const fixedParallax = queryParallax ? Number(queryParallax) : undefined;
+  const start = performance.now();
+
+  function render(time: number, parallax: number) {
+    const clampedParallax = Math.max(-1, Math.min(1, Number.isFinite(parallax) ? parallax : 0));
+    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.conceptEpisode = "moon-garden-cleanup";
+    root.style.setProperty("--parallax", String(clampedParallax));
+
+    if (caption) {
+      caption.textContent = sample.captionText ?? "The image is treated as layered source art, not a true 3D mesh.";
+    }
+    if (shotLabel) {
+      shotLabel.textContent = `Shot ${shotIndex + 1} / ${episode.shotTimeline.shots.length}`;
+    }
+    if (progress) {
+      progress.style.setProperty("--progress", `${progressPercent}%`);
+    }
+
+    window.__AURA3D_CARTOON_2_5D_PROOF__ = {
+      contractId: episodeSampleDescription.contractId,
+      episodeId: episode.episodePlan.episodeId,
+      title: episode.episodePlan.title,
+      route: "/?view=concept-2-5d",
+      mode: "2.5d-parallax-concept",
+      sourceImage,
+      notTrue3D: true,
+      screenshotTarget: "#concept-episode-2-5d",
+      sample,
+      parallax: clampedParallax,
+      layers,
+      aura3dRole: [
+        "episode contract and shot timing",
+        "caption timing",
+        "camera/parallax plan",
+        "proof metadata",
+        "optional foreground Aura3D scene graph"
+      ],
+      limitations: [
+        "This is not mesh reconstruction from a still image.",
+        "The camera can pan, push, and create depth parallax, but it cannot orbit behind the painted characters.",
+        "Production-quality 2.5D needs actual masks/depth maps or separated PSD-style layers."
+      ]
+    };
+  }
+
+  if (Number.isFinite(fixedTime) && !animateParallax) {
+    render(Number(fixedTime), Number.isFinite(fixedParallax) ? Number(fixedParallax) : 0);
+    return root;
+  }
+
+  const tick = () => {
+    const elapsed = (performance.now() - start) / 1000;
+    const sampleTime = Number.isFinite(fixedTime) ? Number(fixedTime) : elapsed % options.duration;
+    render(sampleTime, Math.sin(elapsed * 0.82));
+    requestAnimationFrame(tick);
+  };
+  tick();
+  return root;
+}
+
+declare global {
+  interface Window {
+    __AURA3D_CARTOON_2_5D_PROOF__?: ConceptEpisode2_5DProof;
+  }
+}
+
+function clampTime(time: number, duration: number) {
+  if (!Number.isFinite(time)) return 0;
+  return Math.max(0, Math.min(duration - 1 / 30, time));
+}