create-aura3d 1.0.9 → 1.1.0

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

@@ -0,0 +1,526 @@
+body[data-cartoon-view="puppet-2d"] {
+  background:
+    radial-gradient(circle at 50% 20%, rgba(115, 225, 255, 0.14), transparent 34%),
+    linear-gradient(180deg, #06101d 0%, #102820 58%, #07100f 100%);
+}
+
+body[data-cartoon-view="puppet-2d"] #caption-overlay {
+  display: none !important;
+}
+
+body[data-cartoon-view="puppet-2d"] #app {
+  opacity: 0;
+}
+
+.puppet-episode {
+  --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));
+}
+
+.puppet-episode__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;
+}
+
+.puppet-episode__backdrop,
+.puppet-episode__foreground {
+  position: absolute;
+  inset: 0;
+  background-image: var(--source-frame);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+}
+
+.puppet-episode__backdrop {
+  z-index: 1;
+  filter: saturate(0.92) brightness(0.76) blur(0.4px);
+  transform: scale(1.02);
+}
+
+.puppet-episode__foreground {
+  z-index: 8;
+  mask-image: linear-gradient(180deg, transparent 0 67%, rgba(0, 0, 0, 0.4) 76%, black 100%);
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.puppet-episode__moon-pulse {
+  position: absolute;
+  z-index: 2;
+  left: 48%;
+  top: 8%;
+  width: 27%;
+  aspect-ratio: 1;
+  border: 3px solid rgba(172, 250, 255, 0.78);
+  border-radius: 999px;
+  box-shadow:
+    0 0 28px rgba(103, 232, 255, 0.52),
+    inset 0 0 38px rgba(103, 232, 255, 0.26);
+  animation: moonPulse 2.4s ease-in-out infinite;
+}
+
+.puppet-episode__glow {
+  position: absolute;
+  z-index: 9;
+  width: 11%;
+  aspect-ratio: 1.45;
+  border-radius: 999px;
+  background: radial-gradient(ellipse, rgba(157, 233, 255, 0.65), transparent 62%);
+  filter: blur(7px);
+  opacity: 0.58;
+  animation: flowerGlow 1.8s ease-in-out infinite alternate;
+}
+
+.puppet-episode__glow--left {
+  left: 8%;
+  bottom: 7%;
+}
+
+.puppet-episode__glow--right {
+  right: 9%;
+  bottom: 9%;
+  animation-delay: 0.45s;
+}
+
+.puppet-robot,
+.puppet-wheelbarrow {
+  position: absolute;
+  z-index: 6;
+  filter: drop-shadow(0 26px 24px rgba(0, 0, 0, 0.38));
+  transform-origin: 50% 92%;
+}
+
+.puppet-robot {
+  --accent: #45d7ff;
+  --rim: rgba(245, 255, 255, 0.74);
+  width: 160px;
+  height: 220px;
+}
+
+.puppet-robot--miko {
+  left: 31%;
+  bottom: 18%;
+  transform: rotate(-7deg);
+  animation: mikoBody 1.35s ease-in-out infinite;
+}
+
+.puppet-robot--luma {
+  --accent: #ffc63b;
+  --rim: rgba(255, 250, 214, 0.78);
+  left: 57%;
+  bottom: 23%;
+  transform: rotate(3deg);
+  animation: lumaBody 1.8s ease-in-out infinite;
+}
+
+.puppet-robot__shadow {
+  position: absolute;
+  left: 12%;
+  right: 8%;
+  bottom: 0;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.28);
+  filter: blur(5px);
+}
+
+.puppet-robot__body,
+.puppet-robot__head,
+.puppet-robot__leg,
+.puppet-robot__arm {
+  position: absolute;
+  background:
+    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.72), transparent 13%),
+    linear-gradient(145deg, color-mix(in srgb, var(--accent) 94%, white 18%), color-mix(in srgb, var(--accent) 82%, black 12%));
+  border: 2px solid var(--rim);
+  box-shadow:
+    inset -8px -9px 16px rgba(0, 0, 0, 0.13),
+    0 0 22px color-mix(in srgb, var(--accent) 42%, transparent);
+}
+
+.puppet-robot__body {
+  left: 45px;
+  top: 86px;
+  width: 64px;
+  height: 76px;
+  border-radius: 36% 36% 42% 42%;
+  transform-origin: 50% 18%;
+}
+
+.puppet-robot__head {
+  left: 30px;
+  top: 20px;
+  width: 94px;
+  height: 74px;
+  border-radius: 42% 42% 38% 38%;
+  animation: headNod 1.35s ease-in-out infinite;
+}
+
+.puppet-robot--luma .puppet-robot__head {
+  animation-duration: 1.8s;
+}
+
+.puppet-robot__antenna {
+  position: absolute;
+  left: 47%;
+  top: -24px;
+  width: 10px;
+  height: 32px;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 -8px 14px var(--accent);
+}
+
+.puppet-robot__eye {
+  position: absolute;
+  top: 32px;
+  width: 17px;
+  height: 20px;
+  border-radius: 999px;
+  background: #f8fff2;
+  box-shadow: 0 0 14px #f8fff2;
+  animation: blink 3.6s steps(1) infinite;
+}
+
+.puppet-robot__eye--left {
+  left: 29px;
+}
+
+.puppet-robot__eye--right {
+  right: 27px;
+}
+
+.puppet-robot__smile {
+  position: absolute;
+  left: 40px;
+  top: 51px;
+  width: 24px;
+  height: 12px;
+  border-bottom: 3px solid #f8fff2;
+  border-radius: 0 0 999px 999px;
+  opacity: 0.92;
+}
+
+.puppet-robot__leg {
+  top: 150px;
+  width: 25px;
+  height: 58px;
+  border-radius: 999px 999px 12px 12px;
+  transform-origin: 50% 8%;
+}
+
+.puppet-robot__leg--front {
+  left: 82px;
+  transform: rotate(-9deg);
+}
+
+.puppet-robot__leg--back {
+  left: 49px;
+  transform: rotate(13deg);
+}
+
+.puppet-robot--miko .puppet-robot__leg--front {
+  animation: mikoFrontLeg 1.35s ease-in-out infinite;
+}
+
+.puppet-robot--miko .puppet-robot__leg--back {
+  animation: mikoBackLeg 1.35s ease-in-out infinite;
+}
+
+.puppet-robot__arm {
+  top: 92px;
+  width: 24px;
+  height: 76px;
+  border-radius: 999px;
+  transform-origin: 50% 8%;
+}
+
+.puppet-robot__arm--front {
+  left: 99px;
+}
+
+.puppet-robot__arm--back {
+  left: 31px;
+}
+
+.puppet-robot--miko .puppet-robot__arm--front {
+  animation: broomArmFront 0.88s ease-in-out infinite;
+}
+
+.puppet-robot--miko .puppet-robot__arm--back {
+  animation: broomArmBack 0.88s ease-in-out infinite;
+}
+
+.puppet-robot--luma .puppet-robot__arm--front {
+  animation: pushArmFront 1.15s ease-in-out infinite;
+}
+
+.puppet-robot--luma .puppet-robot__arm--back {
+  animation: pushArmBack 1.15s ease-in-out infinite;
+}
+
+.puppet-tool {
+  position: absolute;
+  z-index: 2;
+  transform-origin: 50% 10%;
+}
+
+.puppet-tool--broom {
+  left: 99px;
+  top: 132px;
+  width: 9px;
+  height: 128px;
+  border-radius: 999px;
+  background: #e4b978;
+  animation: broomSweep 0.88s ease-in-out infinite;
+}
+
+.puppet-tool--broom::after {
+  content: "";
+  position: absolute;
+  left: -21px;
+  bottom: -7px;
+  width: 54px;
+  height: 30px;
+  border-radius: 6px 6px 18px 18px;
+  background:
+    repeating-linear-gradient(90deg, #c78938 0 4px, #f0c771 4px 8px);
+  transform: rotate(8deg);
+}
+
+.puppet-tool--rake {
+  left: 34px;
+  top: 128px;
+  width: 8px;
+  height: 132px;
+  border-radius: 999px;
+  background: #d9a45b;
+  transform: rotate(-40deg);
+  animation: rakePush 1.15s ease-in-out infinite;
+}
+
+.puppet-tool--rake::after {
+  content: "";
+  position: absolute;
+  left: -20px;
+  bottom: -9px;
+  width: 48px;
+  height: 12px;
+  border-radius: 999px;
+  background: #f0c771;
+  box-shadow:
+    -12px 8px 0 -4px #f0c771,
+    0 8px 0 -4px #f0c771,
+    12px 8px 0 -4px #f0c771;
+}
+
+.puppet-wheelbarrow {
+  left: 49.5%;
+  bottom: 20.5%;
+  width: 190px;
+  height: 120px;
+  animation: wheelbarrowRoll 1.15s ease-in-out infinite;
+}
+
+.puppet-wheelbarrow__bin {
+  position: absolute;
+  left: 22px;
+  top: 28px;
+  width: 128px;
+  height: 70px;
+  border: 2px solid rgba(214, 240, 255, 0.72);
+  border-radius: 16px 16px 24px 24px;
+  background:
+    radial-gradient(circle at 52% 58%, rgba(78, 222, 255, 0.7), transparent 12%),
+    linear-gradient(180deg, #8a9fb1, #4c6675);
+  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.18);
+}
+
+.puppet-wheelbarrow__wheel {
+  position: absolute;
+  left: 118px;
+  bottom: 4px;
+  width: 30px;
+  height: 30px;
+  border: 5px solid #19313c;
+  border-top-color: #6ce8ff;
+  border-radius: 999px;
+  background: #07131a;
+  animation: wheelSpin 0.62s linear infinite;
+}
+
+.puppet-wheelbarrow__handles {
+  position: absolute;
+  left: 8px;
+  top: 42px;
+  width: 170px;
+  height: 12px;
+  border-top: 6px solid #d9a45b;
+  transform: rotate(11deg);
+}
+
+.puppet-episode__hud,
+.puppet-episode__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);
+}
+
+.puppet-episode__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;
+}
+
+.puppet-episode__hud span,
+.puppet-episode__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);
+}
+
+.puppet-episode__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;
+}
+
+.puppet-episode__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.14), rgba(1, 10, 10, 0.68));
+  z-index: -1;
+}
+
+.puppet-episode__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);
+}
+
+.puppet-episode__timeline-fill {
+  display: block;
+  width: var(--progress, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ffdd87, #65ffc6);
+}
+
+@keyframes moonPulse {
+  0%, 100% { transform: scale(0.98); opacity: 0.58; }
+  50% { transform: scale(1.04); opacity: 0.9; }
+}
+
+@keyframes flowerGlow {
+  from { opacity: 0.38; transform: scale(0.94); }
+  to { opacity: 0.78; transform: scale(1.08); }
+}
+
+@keyframes blink {
+  0%, 89%, 100% { transform: scaleY(1); }
+  90%, 94% { transform: scaleY(0.12); }
+}
+
+@keyframes headNod {
+  0%, 100% { transform: translateY(0) rotate(-2deg); }
+  50% { transform: translateY(5px) rotate(4deg); }
+}
+
+@keyframes mikoBody {
+  0%, 100% { transform: translateY(0) rotate(-8deg); }
+  50% { transform: translateY(6px) rotate(-3deg); }
+}
+
+@keyframes lumaBody {
+  0%, 100% { transform: translateX(0) rotate(3deg); }
+  50% { transform: translateX(-8px) rotate(0deg); }
+}
+
+@keyframes mikoFrontLeg {
+  0%, 100% { transform: rotate(-14deg); }
+  50% { transform: rotate(1deg); }
+}
+
+@keyframes mikoBackLeg {
+  0%, 100% { transform: rotate(18deg); }
+  50% { transform: rotate(7deg); }
+}
+
+@keyframes broomArmFront {
+  0%, 100% { transform: rotate(-58deg); }
+  50% { transform: rotate(-28deg); }
+}
+
+@keyframes broomArmBack {
+  0%, 100% { transform: rotate(42deg); }
+  50% { transform: rotate(18deg); }
+}
+
+@keyframes broomSweep {
+  0%, 100% { transform: rotate(-49deg) translateY(0); }
+  50% { transform: rotate(-18deg) translateY(6px); }
+}
+
+@keyframes pushArmFront {
+  0%, 100% { transform: rotate(64deg); }
+  50% { transform: rotate(36deg); }
+}
+
+@keyframes pushArmBack {
+  0%, 100% { transform: rotate(38deg); }
+  50% { transform: rotate(18deg); }
+}
+
+@keyframes rakePush {
+  0%, 100% { transform: rotate(-42deg) translateY(0); }
+  50% { transform: rotate(-52deg) translateY(8px); }
+}
+
+@keyframes wheelbarrowRoll {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  50% { transform: translateX(-9px) rotate(-1.8deg); }
+}
+
+@keyframes wheelSpin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,189 @@
+import { episode, episodeSampleDescription, youtubeDraftMetadata } from "./episode";
+import type { CartoonRouteSampleForVisual } from "./sample-episode-visual";
+import "./puppet-episode-2d.css";
+
+export interface PuppetEpisode2DOptions {
+  readonly sampleAt: (time: number) => CartoonRouteSampleForVisual;
+  readonly duration: number;
+  readonly fixedTime?: number;
+}
+
+export interface PuppetEpisode2DProof {
+  readonly contractId: string;
+  readonly episodeId: string;
+  readonly title: string;
+  readonly route: string;
+  readonly mode: "2d-puppet-animation-over-concept-art";
+  readonly sourceImage: string;
+  readonly notTrue3D: true;
+  readonly screenshotTarget: "#puppet-episode-2d";
+  readonly sample: CartoonRouteSampleForVisual;
+  readonly animatedParts: readonly string[];
+  readonly aura3dRole: readonly string[];
+  readonly limitations: readonly string[];
+}
+
+const sourceImage = "/aura-assets/moon-garden-feature-frame.png";
+const animatedParts = [
+  "blue robot head bob",
+  "blue robot eyes blink",
+  "blue robot broom sweep",
+  "blue robot shoulder and elbow arcs",
+  "yellow robot head nod",
+  "yellow robot eyes blink",
+  "yellow robot rake/push arm",
+  "wheelbarrow body roll",
+  "moon ring pulse",
+  "foreground flower glow",
+  "caption/timeline timing"
+] as const;
+
+export function installPuppetEpisode2D(options: PuppetEpisode2DOptions) {
+  document.body.dataset.cartoonView = "puppet-2d";
+  const root = document.createElement("section");
+  root.id = "puppet-episode-2d";
+  root.className = "puppet-episode";
+  root.setAttribute("aria-label", "Aura3D 2D puppet cartoon animation over moon garden concept art");
+  root.innerHTML = `
+    <div class="puppet-episode__frame">
+      <div class="puppet-episode__backdrop" aria-hidden="true"></div>
+      <div class="puppet-episode__moon-pulse" aria-hidden="true"></div>
+      <div class="puppet-episode__glow puppet-episode__glow--left" aria-hidden="true"></div>
+      <div class="puppet-episode__glow puppet-episode__glow--right" aria-hidden="true"></div>
+
+      <div class="puppet-robot puppet-robot--miko" aria-label="Miko sweeping animated puppet" role="img">
+        <span class="puppet-robot__shadow"></span>
+        <span class="puppet-robot__leg puppet-robot__leg--back"></span>
+        <span class="puppet-robot__leg puppet-robot__leg--front"></span>
+        <span class="puppet-robot__body"></span>
+        <span class="puppet-robot__head">
+          <span class="puppet-robot__eye puppet-robot__eye--left"></span>
+          <span class="puppet-robot__eye puppet-robot__eye--right"></span>
+          <span class="puppet-robot__smile"></span>
+          <span class="puppet-robot__antenna"></span>
+        </span>
+        <span class="puppet-robot__arm puppet-robot__arm--back"></span>
+        <span class="puppet-robot__arm puppet-robot__arm--front"></span>
+        <span class="puppet-tool puppet-tool--broom"></span>
+      </div>
+
+      <div class="puppet-wheelbarrow" aria-hidden="true">
+        <span class="puppet-wheelbarrow__bin"></span>
+        <span class="puppet-wheelbarrow__wheel"></span>
+        <span class="puppet-wheelbarrow__handles"></span>
+      </div>
+
+      <div class="puppet-robot puppet-robot--luma" aria-label="Luma pushing animated puppet" role="img">
+        <span class="puppet-robot__shadow"></span>
+        <span class="puppet-robot__leg puppet-robot__leg--back"></span>
+        <span class="puppet-robot__leg puppet-robot__leg--front"></span>
+        <span class="puppet-robot__body"></span>
+        <span class="puppet-robot__head">
+          <span class="puppet-robot__eye puppet-robot__eye--left"></span>
+          <span class="puppet-robot__eye puppet-robot__eye--right"></span>
+          <span class="puppet-robot__smile"></span>
+          <span class="puppet-robot__antenna"></span>
+        </span>
+        <span class="puppet-robot__arm puppet-robot__arm--back"></span>
+        <span class="puppet-robot__arm puppet-robot__arm--front"></span>
+        <span class="puppet-tool puppet-tool--rake"></span>
+      </div>
+
+      <div class="puppet-episode__foreground" aria-hidden="true"></div>
+      <div class="puppet-episode__hud">
+        <span>2D puppet animation</span>
+        <strong data-puppet-shot-label>Shot 1 / 3</strong>
+      </div>
+      <div class="puppet-episode__caption" data-puppet-caption></div>
+      <div class="puppet-episode__timeline" aria-hidden="true">
+        <span class="puppet-episode__timeline-fill" data-puppet-progress></span>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(root);
+
+  const hostSlot = document.querySelector<HTMLElement>("[data-aura-host-slot]");
+  const appHost = document.querySelector<HTMLElement>("#app");
+  if (hostSlot && appHost) {
+    hostSlot.replaceWith(appHost);
+  }
+
+  const caption = root.querySelector<HTMLElement>("[data-puppet-caption]");
+  const shotLabel = root.querySelector<HTMLElement>("[data-puppet-shot-label]");
+  const progress = root.querySelector<HTMLElement>("[data-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.puppetEpisode = "moon-garden-cleanup";
+
+    if (caption) {
+      caption.textContent = sample.captionText ?? "The robots sweep, blink, nod, and push the garden cart.";
+    }
+    if (shotLabel) {
+      shotLabel.textContent = `Shot ${shotIndex + 1} / ${episode.shotTimeline.shots.length}`;
+    }
+    if (progress) {
+      progress.style.setProperty("--progress", `${progressPercent}%`);
+    }
+
+    window.__AURA3D_CARTOON_2D_PUPPET_PROOF__ = {
+      contractId: episodeSampleDescription.contractId,
+      episodeId: episode.episodePlan.episodeId,
+      title: episode.episodePlan.title,
+      route: "/?view=puppet-2d",
+      mode: "2d-puppet-animation-over-concept-art",
+      sourceImage,
+      notTrue3D: true,
+      screenshotTarget: "#puppet-episode-2d",
+      sample,
+      animatedParts,
+      aura3dRole: [
+        "episode contract and shot timing",
+        "caption timing",
+        "animation state/proof metadata",
+        "render/record evidence",
+        "optional replacement with typed 3D foreground assets"
+      ],
+      limitations: [
+        "This is 2D puppet animation over concept art, not a generated 3D scene.",
+        "A production pass should replace CSS puppet shapes with separated art layers or rigged character assets.",
+        "The source frame supplies the art direction/backdrop; the moving robots are explicit overlay puppets."
+      ]
+    };
+  }
+
+  if (Number.isFinite(fixedTime)) {
+    render(Number(fixedTime));
+  } else {
+    render(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_2D_PUPPET_PROOF__?: PuppetEpisode2DProof;
+  }
+}
+
+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/render-plan.ts

@@ -48,7 +48,7 @@ export const audioStemManifest = createAudioStemManifest({
   stems: [
     ...episode.dialogueTrack.lines.map((line) => ({
       id: `audio:${line.lineId}`,
-      role: "dialogue",
+      role: "dialogue" as const,
       path: line.audioFile ?? `assets/audio/en/${line.lineId}.wav`,
       startTime: line.startTime,
       duration: line.endTime - line.startTime,