From 9feccc2093bdabeb68bcc7a86d104974c2410b1f Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Fri, 4 Sep 2026 18:18:13 +0000
Subject: [PATCH] Lead with the 2x2 Dog-In Podcast grid; keep single-shot clip
 as the component demo

---
 index.html | 55 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index fd4ec99..3cc79b7 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>PayToLaugh — Demo</title>
+<title>PayToLaugh — Dog-In Podcast</title>
 <meta name="description" content="Upload your pet, pick a topic, get a video of them weighing in. Technical demo and generation notes.">
 <style>
   :root{
@@ -26,13 +26,15 @@
   h2{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
     color:var(--muted);margin:0 0 26px;font-weight:600}
   h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
-  .quote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 22px;
-    color:var(--ink);font-size:17px}
-  .demo{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:40px;align-items:start}
+  .demo{display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:40px;align-items:start}
   @media(max-width:740px){.demo{grid-template-columns:1fr}}
   .player{width:100%;aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line);
     background:#000;display:block}
   .cap{font:12.5px/1.6 var(--mono);color:var(--muted);margin-top:12px}
+  .cast{list-style:none;padding:0;margin:0 0 22px}
+  .cast li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
+  .cast b{min-width:112px;color:var(--ink)}
+  .cast span{color:var(--muted)}
   .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
   .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
   .card .n{font:600 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:10px}
@@ -43,7 +45,7 @@
   .k{font-family:var(--mono);font-size:13.5px;color:var(--accent2)}
   ul{margin:0;padding-left:20px;color:var(--muted)}
   li{margin-bottom:9px}
-  li b{color:var(--ink);font-weight:600}
+  ul li b{color:var(--ink);font-weight:600}
   .note{background:#1a1410;border:1px solid #3d2f1c;border-radius:12px;padding:18px 20px;color:#d9c9ae;font-size:15px}
   footer{padding:38px 0 70px;color:var(--muted);font-size:13.5px}
   a{color:var(--accent)}
@@ -55,23 +57,45 @@
   <header>
     <span class="tag">Technical demo</span>
     <h1>Your pet has <span>opinions</span>.</h1>
-    <p class="lede">Upload a photo, pick something being argued about online, add your own director notes — and get a short video of your pet weighing in. This page documents one generated clip and exactly how it was made.</p>
+    <p class="lede">Upload a photo, pick something being argued about online, add your own director notes — and get a short video of your pet weighing in. This page documents how it is built.</p>
   </header>
 
   <section>
-    <h2>The clip</h2>
+    <h2>Dog-In Podcast — the full cut</h2>
+    <div class="demo">
+      <div>
+        <video class="player" controls playsinline preload="metadata"
+          src="https://api.corben.world/files/a398fd75-a079-4379-a3ff-fa5ace3e2720/public">
+          Your browser cannot play this video.
+        </video>
+        <p class="cap">720&times;1280 &middot; 40s &middot; h264 + AAC &middot; 7.2&nbsp;MB</p>
+      </div>
+      <div>
+        <h3>Four dogs, one argument</h3>
+        <p style="color:var(--muted);margin:0 0 20px">Everyone stays on screen the whole time, like a real call. The audio runs in sequence so only one speaks at a time, and the live tile carries a lit border. Each dog was generated alone, then composited — asking one model for four characters in a single shot produced the same dog four times.</p>
+        <ul class="cast">
+          <li><b>Butcher</b><span>overclaims the market</span></li>
+          <li><b>The Golden</b><span>reframes it as displacement</span></li>
+          <li><b>Marshall</b><span>the bleak second-order note</span></li>
+          <li><b>Moose</b><span>disputes the number</span></li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>One character, on its own</h2>
     <div class="demo">
       <div>
         <video class="player" controls playsinline preload="metadata"
           src="https://api.corben.world/files/414f2b88-6a88-41bc-8a9e-f41ee528139a/public">
           Your browser cannot play this video.
         </video>
-        <p class="cap">720&times;1280 &middot; 8s &middot; h264 + AAC &middot; 24fps &middot; 3.3&nbsp;MB</p>
+        <p class="cap">720&times;1280 &middot; 8s &middot; 3.3&nbsp;MB</p>
       </div>
       <div>
         <h3>Butcher, on humanoid robots</h3>
-        <p class="quote">&ldquo;That robot is going to be the best-selling product of all time. Every house gets one.&rdquo;</p>
-        <p style="color:var(--muted);margin:0 0 22px">A bulldog in a podcast booth, mid-argument on a video call. The audio, the mouth movement and the room were all produced in a single generation from a text prompt — no reference photo, and no separate lip-sync pass.</p>
+        <p style="color:var(--muted);margin:0 0 20px">The dog, the speech and the mouth movement all come out of a single text prompt — no reference photo and no separate lip-sync pass. This is the unit the grid is built from.</p>
         <table>
           <tr><th>Model</th><td><span class="k">google/veo-3.1-lite</span></td></tr>
           <tr><th>Route</th><td>OpenRouter video API</td></tr>
@@ -89,29 +113,30 @@
       <div class="card"><span class="n">01</span><h3>The photo</h3><p>Breed, coat colour and markings are described in words. Naming the breed explicitly carries the likeness further than image resolution does.</p></div>
       <div class="card"><span class="n">02</span><h3>The topic</h3><p>A real discussion — a thread, a podcast clip, an argument. The claim being made is preserved; only the stakes change.</p></div>
       <div class="card"><span class="n">03</span><h3>Director notes</h3><p>The owner supplies the attitude. Loud and self-important, or flat and unimpressed. This is what makes it sound like <em>their</em> pet.</p></div>
-      <div class="card"><span class="n">04</span><h3>The render</h3><p>Scene, performance and the exact spoken line go to the model as one prompt. Audio and mouth movement are generated together.</p></div>
+      <div class="card"><span class="n">04</span><h3>The render</h3><p>Each character is generated alone, then the four are composited into one grid with captions and branding.</p></div>
     </div>
   </section>
 
   <section>
     <h2>Notes from the build</h2>
     <ul>
-      <li><b>Native generation beats lip-sync retrofitting.</b> Post-hoc lip-sync tools are trained on human faces and track landmarks that a muzzle does not have. Generating the animal already talking sidesteps the problem entirely — it is the single most important finding so far.</li>
+      <li><b>Native generation beats lip-sync retrofitting.</b> Post-hoc lip-sync tools are trained on human faces and track landmarks a muzzle does not have. Generating the animal already talking sidesteps the problem — the single most important finding so far.</li>
+      <li><b>Composite, do not ask for a crowd.</b> Prompting one model for four characters on a call rendered the same dog in every panel. Four separate generations tiled in post gives four genuinely distinct dogs and exact control.</li>
       <li><b>Describing the breed matters more than image quality.</b> A full-resolution character plate was reconstructed faithfully from a 150&times;150 thumbnail once the coat and markings were named in words.</li>
       <li><b>Every line is verified, not assumed.</b> Generated audio is transcribed back with Whisper and checked against the script before a clip is accepted.</li>
       <li><b>Each shot gets a clean context.</b> Generating several clips in one conversation caused dialogue to bleed between characters — one had another&rsquo;s line appended to its own.</li>
-      <li><b>Video needs remuxing before it will play in a page.</b> Model output puts the <span class="k">moov</span> index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front and the clip plays immediately.</li>
+      <li><b>Video needs remuxing before it will play in a page.</b> Model output puts the <span class="k">moov</span> index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front.</li>
       <li><b>Captions are burned in afterwards, not generated.</b> Video models render text unreliably; an overlay pass gives identical typography across every clip and costs nothing to restyle.</li>
     </ul>
   </section>
 
   <section>
     <h2>Known rough edges</h2>
-    <p class="note">This clip is an honest first pass, not a finished result. The coat came back tan-heavy where the character is meant to be predominantly white, and the video-call grid rendered the same dog in every panel instead of four distinct characters. Both trace to the same cause: this route accepts only a first or last frame, not multiple character references. The fix is to generate each character separately and composite them into a 2&times;2 grid afterwards, which also frees the bottom frame for branding.</p>
+    <p class="note">Honest first pass, not a finished result. Moose&rsquo;s line picked up a fragment of Butcher&rsquo;s and needs regenerating in a clean context. The laptops still visible in each room are leftovers from an earlier approach and come out of the prompt next. Butcher&rsquo;s coat also drifted tan-heavy on the single-shot version where the character is meant to be predominantly white.</p>
   </section>
 
   <footer>
-    <p>PayToLaugh &middot; an experiment in short-form pet commentary. All video on this page is AI-generated.</p>
+    <p>PayToLaugh &middot; an experiment in short-form pet commentary. All video on this page is AI-generated. Parody.</p>
   </footer>
 
 </div>