Polish cutaway viewport visuals

Co-authored-by: OpenAI Codex <codex@openai.com>

AGENTS.md

@@ -255,6 +255,12 @@ technical cutaway animation.
   `unavailable` photo-render state, and the target-like synthetic image returned
   a real Modal analysis for `reticle assembly` at `0.7` confidence with 4 parts;
   `/generate_scene` returned `render_mode: three` and `renderer: three`.
+- Implemented the optional visual-polish pass after private deployment
+  verification: component watermark populated from the analysis component name,
+  subtle static noise overlay, stronger viewport vignette, and refined scan-line
+  reveal. Local browser verification confirmed the scene still renders, orbit
+  drag still works, the canvas remains the pointer target, the source preview
+  remains contained, and the mobile layout has no horizontal overflow.
 
 ## Next Work
 
@@ -262,8 +268,6 @@ technical cutaway animation.
   tune token/context/timeout values down if valid JSON remains reliable with
   lower latency. The synthetic Modal check now succeeds with the current
   `4096` output token, `8192` context, `300s` timeout settings.
-- Optional polish only after private deployment verification: component
-  watermark, noise texture, vignette, then scan-line reveal refinements.
 - Keep the Hugging Face Space private until the user explicitly approves making
   it public for submission.
 - Keep the README opening hook intact: "You find a small metal cylinder at a

index.html

@@ -60,12 +60,45 @@
     }
 
     .shell {
+      position: relative;
+      isolation: isolate;
       display: grid;
       grid-template-columns: minmax(0, 63fr) minmax(340px, 37fr);
       width: 100vw;
       height: 100vh;
     }
 
+    .shell::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      pointer-events: none;
+      opacity: 0.11;
+      mix-blend-mode: screen;
+      background-image:
+        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px),
+        radial-gradient(circle at 75% 65%, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px);
+      background-size: 13px 17px, 19px 23px;
+    }
+
+    .component-watermark {
+      position: absolute;
+      left: clamp(-10px, 2vw, 28px);
+      bottom: clamp(-18px, -1.2vw, -8px);
+      z-index: 2;
+      max-width: 92vw;
+      color: var(--bg-lift);
+      opacity: 0.34;
+      font-size: clamp(3.6rem, 8vw, 9rem);
+      line-height: 0.76;
+      font-weight: 700;
+      text-transform: uppercase;
+      overflow-wrap: anywhere;
+      pointer-events: none;
+      user-select: none;
+    }
+
     .viewport-pane {
       position: relative;
       min-width: 0;
@@ -80,7 +113,9 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      background: radial-gradient(circle at center, transparent 58%, rgba(0, 0, 0, 0.36));
+      background:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 76%, rgba(0, 0, 0, 0.22)),
+        radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, 0.44));
       z-index: 7;
     }
 
@@ -122,15 +157,27 @@
       right: 0;
       top: -2px;
       z-index: 8;
-      height: 2px;
+      height: 3px;
       opacity: 0;
-      background: var(--cyan);
-      box-shadow: 0 0 18px rgba(95, 212, 208, 0.8);
+      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+      box-shadow:
+        0 0 18px rgba(95, 212, 208, 0.8),
+        0 18px 42px rgba(95, 212, 208, 0.16);
       pointer-events: none;
     }
 
+    .scan-line::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 3px;
+      height: 52px;
+      background: linear-gradient(180deg, rgba(95, 212, 208, 0.13), transparent);
+    }
+
     .scan-line.active {
-      animation: scan 700ms ease-out;
+      animation: scan 820ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .progress {
@@ -198,7 +245,7 @@
       position: absolute;
       left: 18px;
       bottom: 18px;
-      z-index: 10;
+      z-index: 11;
       max-width: min(320px, calc(100% - 36px));
       border-left: 1px solid var(--cyan-dim);
       padding: 6px 0 6px 10px;
@@ -214,6 +261,7 @@
     }
 
     .panel {
+      position: relative;
       min-width: 0;
       overflow: auto;
       border-left: 1px solid var(--amber-dim);
@@ -221,6 +269,8 @@
     }
 
     .panel-inner {
+      position: relative;
+      z-index: 1;
       min-height: 100%;
       padding: 24px;
       display: grid;
@@ -459,8 +509,8 @@
 
     @keyframes scan {
       0% { transform: translateY(0); opacity: 0; }
-      12%, 75% { opacity: 1; }
-      100% { transform: translateY(100vh); opacity: 0; }
+      8%, 72% { opacity: 1; }
+      100% { transform: translateY(calc(100vh + 60px)); opacity: 0; }
     }
 
     @media (max-width: 860px) {
@@ -469,12 +519,18 @@
       }
 
       .shell {
+        overflow: hidden;
         grid-template-columns: 1fr;
         grid-template-rows: minmax(420px, 62vh) auto;
         min-height: 100vh;
         height: auto;
       }
 
+      .component-watermark {
+        max-width: 120vw;
+        font-size: clamp(3rem, 14vw, 6rem);
+      }
+
       .panel {
         border-left: 0;
         border-top: 1px solid var(--amber-dim);
@@ -488,6 +544,7 @@
 </head>
 <body>
   <main class="shell">
+    <div id="componentWatermark" class="component-watermark" aria-hidden="true">Inside the Machine</div>
     <section class="viewport-pane" aria-label="Cutaway viewport">
       <div id="progress" class="progress"></div>
       <div class="toolbar">
@@ -555,6 +612,7 @@
     const retryButton = document.getElementById("retryButton");
     const sourceCard = document.getElementById("sourceCard");
     const sourceImage = document.getElementById("sourceImage");
+    const componentWatermark = document.getElementById("componentWatermark");
     const componentEl = document.getElementById("component");
     const confidenceEl = document.getElementById("confidence");
     const summaryEl = document.getElementById("summary");
@@ -662,7 +720,9 @@
 
     function populateAnalysis(analysis) {
       window.lastAnalysis = analysis;
-      componentEl.textContent = String(analysis.component || "Component").toUpperCase();
+      const componentName = String(analysis.component || "Component");
+      componentEl.textContent = componentName.toUpperCase();
+      componentWatermark.textContent = componentName;
       confidenceEl.textContent = typeof analysis.confidence === "number"
         ? Math.round(analysis.confidence * 100) + "%"
         : "--";