paytolaugh/index.html

<!doctype html>
<html lang="en">
<head>
<script>
/* This file is served for any extensionless path the host does not recognise,
   so a share link at /v/<code> arrives here. Hand it on before anything is
   painted. Wrapped so that a failure can never take the home page with it. */
try {
  var __m = location.pathname.match(/^\/v\/([0-9a-fA-F]{6,12})\/?$/);
  if (__m) location.replace("/v/index.html?c=" + __m[1] + location.hash);
} catch (e) {}
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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{
    --bg:#0e0f13; --panel:#16181f; --line:#262a35;
    --ink:#e9ecf2; --muted:#9aa3b2; --accent:#4B8BF5; --accent2:#f5c04b;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
  .wrap{max-width:940px;margin:0 auto;padding:0 22px}
  header{padding:64px 0 40px;border-bottom:1px solid var(--line)}
  .tag{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent2);border:1px solid #3a3212;
    background:#1d1a0d;padding:7px 11px;border-radius:999px;margin-bottom:20px}
  h1{font-size:clamp(34px,6vw,56px);line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
  h1 span{color:var(--accent)}
  .lede{font-size:19px;color:var(--muted);max-width:60ch;margin:0}
  section{padding:52px 0;border-bottom:1px solid var(--line)}
  h2{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin:0 0 26px;font-weight:600}
  h2 em{font-style:normal;color:var(--accent)}
  h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
  .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}
  .run{list-style:none;padding:0;margin:0 0 22px}
  .run li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
  .run b{min-width:64px;color:var(--accent2);font-family:var(--mono);font-size:13px}
  .run span{color:var(--muted)}
  .run i{color:var(--ink);font-style:normal;font-weight:600}
  .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}
  .card p{margin:0;color:var(--muted);font-size:15px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  @media(max-width:620px){.two{grid-template-columns:1fr}}
  .shot{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
  table{width:100%;border-collapse:collapse;font-size:15px}
  th,td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
  th{color:var(--muted);font-weight:600;width:44%;font-size:14px}
  .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}
  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}
  .new{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
    color:#0e0f13;background:var(--accent2);padding:5px 8px;border-radius:5px;margin-left:10px;vertical-align:2px}
  footer{padding:38px 0 70px;color:var(--muted);font-size:13.5px}
  a{color:var(--accent)}
</style>
</head>
<body>
<div class="wrap">

  <div style="border-bottom:1px solid var(--line);padding:18px 0;display:flex;gap:22px;align-items:center;flex-wrap:wrap">
    <a href="/" style="font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em">Pay<span style="color:var(--accent)">To</span>Laugh</a>
    <a href="/pets.html" style="color:var(--muted);text-decoration:none;font-size:14.5px">My pets</a>
    <a href="/create.html" style="color:var(--muted);text-decoration:none;font-size:14.5px">New video</a>
    <a href="/videos.html" style="color:var(--muted);text-decoration:none;font-size:14.5px">My videos</a>
    <a href="/register.html" style="margin-left:auto;color:var(--muted);text-decoration:none;font-size:14.5px">Sign in</a>
  </div>

  <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 how it is built.</p>
    <p style="margin:26px 0 0">
      <a href="/create.html" style="display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border-radius:9px;padding:12px 22px;font-weight:600">Make a video</a>
      <a href="/register.html" style="display:inline-block;margin-left:10px;border:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:9px;padding:12px 22px;font-weight:600">Sign in</a>
    </p>
  </header>

  <section>
    <h2>Latest cut <em>&mdash; sequential, one shared set</em><span class="new">new</span></h2>
    <div class="demo">
      <div>
        <video class="player" controls playsinline preload="metadata"
          src="https://api.corben.world/files/35db6ae0-004b-4b91-9936-45abb066a150/public">
          Your browser cannot play this video.
        </video>
        <p class="cap">720&times;1280 &middot; 40s &middot; five clips &middot; $2.00</p>
      </div>
      <div>
        <h3>One dog per shot, straight cuts</h3>
        <ul class="run">
          <li><b>0–8s</b><span><i>The claim.</i> A humanoid robot will be the best-selling product of all time.</span></li>
          <li><b>8–16s</b><span><i>The reframe.</i> Every house already has one. You are describing us.</span></li>
          <li><b>16–24s</b><span><i>Second-order.</i> It does not eat. The floor economy goes to zero.</span></li>
          <li><b>24–32s</b><span><i>The counter-number.</i> The actual best-seller is the tennis ball.</span></li>
          <li><b>32–40s</b><span><i>Territory.</i> Losing on substance, escalating to the couch.</span></li>
        </ul>
        <p style="color:var(--muted);margin:0">Every line answers the same claim, each in its owner&rsquo;s analytical style. The whole thing was generated and assembled through three API endpoints with no local video tooling — and every spoken line was transcribed back afterwards and matched against the script word for word.</p>
      </div>
    </div>
  </section>

  <section>
    <h2>Preparing the plate</h2>
    <div class="two">
      <div>
        <img class="shot" alt="Original photo: a bulldog asleep on a leather recliner in a living room"
          src="https://api.corben.world/files/5b739f19-f017-446a-9f17-c60c88c752eb/public">
        <p class="cap">what an owner actually uploads</p>
      </div>
      <div>
        <img class="shot" alt="The same bulldog rendered on the podcast set"
          src="https://api.corben.world/files/ae631972-b7c1-45e2-b0ea-cd8ba67a53f8/public">
        <p class="cap">the same dog, on the house set</p>
      </div>
    </div>
    <p style="color:var(--muted);max-width:66ch;margin:26px 0 0">A reference photo carries its own background, and that background fights the scene description — one clip inherits the sofa, the next invents a different room. So the animal and the set are separated: one studio image is generated once, and every pet is composited onto <em>that same set</em> before it is ever used for video. Coat, blaze, eyebrow points and paws survive; the recliner and the bookshelf do not.</p>
  </section>

  <section>
    <h2>Earlier cut &mdash; the 2&times;2 grid</h2>
    <div class="demo">
      <div>
        <video class="player" controls playsinline preload="metadata"
          src="https://api.corben.world/files/732f9f06-f7f9-47c7-86ec-3b15ccc70059/public">
          Your browser cannot play this video.
        </video>
        <p class="cap">720&times;1280 &middot; 48s &middot; h264 + AAC &middot; 19&nbsp;MB</p>
      </div>
      <div>
        <h3>Three segments, ten generated clips</h3>
        <ul class="run">
          <li><b>0–8s</b><span><i>Cold open.</i> Butcher alone, full frame.</span></li>
          <li><b>8–16s</b><span><i>Roll call.</i> The grid assembles; three listen while one talks.</span></li>
          <li><b>16–48s</b><span><i>The topic.</i> Each dog takes a turn on the same argument.</span></li>
        </ul>
        <p style="color:var(--muted);margin:0">The first two segments are fixed furniture — they carry over to every episode untouched. Only the third is written fresh, so a new short costs four generations rather than ten.</p>
      </div>
    </div>
  </section>

  <section>
    <h2>The two takes behind one tile</h2>
    <div class="demo">
      <div>
        <video class="player" controls playsinline preload="metadata"
          src="https://api.corben.world/files/be1d916a-9fbf-4460-abf9-5497b470d63e/public"></video>
        <p class="cap">speaking &middot; 8s</p>
      </div>
      <div>
        <video class="player" controls playsinline preload="metadata" style="max-width:330px"
          src="https://api.corben.world/files/3f7a93c8-d20e-4aec-a8f9-a3b35b538bf9/public"></video>
        <p class="cap">idle B-roll &middot; 8s &middot; reused every episode</p>
      </div>
    </div>
    <p style="color:var(--muted);max-width:66ch;margin:26px 0 0">The idle take is seeded from the <em>last frame</em> of the speaking take, which locks the same dog, room, lighting and framing — not merely a similar-looking room. Without it the listeners stare blankly; with it they blink, tilt, scratch and yawn, and the grid reads as a real call.</p>
  </section>

  <section>
    <h2>How it is made</h2>
    <div class="grid">
      <div class="card"><span class="n">01</span><h3>The photo</h3><p>Breed, coat colour and markings are described in words, then the pet is composited onto the house set. 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>Each character is generated alone, then the clips are stitched with captions and branding burned in — all through the API, no local video tools.</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 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 distinct dogs and exact control over who speaks when.</li>
      <li><b>Names belong in captions, not dialogue.</b> The model refuses to speak real people&rsquo;s names outright. Drawing them into the caption layer is reliable, unrestricted, and free to change — and puts more of the joke on screen than the spoken version managed.</li>
      <li><b>Seed continuity from the last frame.</b> Growing one take out of the previous take&rsquo;s final frame is the only mechanism that reliably carries a character across a cut. Measured: the seed frame, the seeded clip&rsquo;s first frame and the same clip seven seconds later share one wrinkle pattern, one eye patch, one microphone. A shared background reference cannot do this, because it does not lock the animal.</li>
      <li><b>The cheap model refuses reference images outright.</b> Passing a plate as a reference returns <span class="k">referenceImages isn&rsquo;t supported by this model</span> on the lite tier. It is accepted two tiers up, where it does reproduce the set faithfully — at double and eight times the price. A start frame, by contrast, works on every tier. Two mechanisms that look interchangeable and are not.</li>
      <li><b>Separate the pet from the set.</b> A reference image imports its background along with its subject. Compositing every character onto one generated set first is what stops the room changing between shots.</li>
      <li><b>Every line is transcribed back and checked.</b> This caught a take where one character had absorbed another&rsquo;s line, and two takes where a list of names came out as mush.</li>
      <li><b>Do not write stage directions the model can read aloud.</b> Dashes added to force pauses were spoken as filler words. Punctuation is not direction.</li>
      <li><b>Remux before publishing.</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>
    </ul>
  </section>

  <section>
    <h2>What it costs</h2>
    <table style="max-width:620px">
      <tr><th>Model tier</th><td>8s clip &middot; reference images?</td></tr>
      <tr><th><span class="k">veo-3.1-lite</span></th><td>$0.40 &middot; rejected &mdash; start frame only</td></tr>
      <tr><th><span class="k">veo-3.1-fast</span></th><td>$0.80 &middot; accepted, binds the set to the plate</td></tr>
      <tr><th><span class="k">veo-3.1</span></th><td>$3.20 &middot; accepted</td></tr>
      <tr><th>Generation time</th><td>41–62 seconds, whatever the tier</td></tr>
      <tr><th>This 40s short</th><td>$2.00 &mdash; five clips on the lite tier</td></tr>
      <tr><th>Recommended mix</th><td>$2.40 &mdash; open on the fast tier to lock the set, seed the rest on lite</td></tr>
    </table>
  </section>

  <section>
    <h2>Still rough</h2>
    <p class="note">Honest state of play. Coat colour drifts during animation even when the plate is correct — a chocolate bulldog plates properly and then renders closer to standard fawn. On the lite tier the set is carried by prompt text alone, so it stays consistent between clips but drifts away from the plate it was supposed to match. Coined words give the model trouble, and dense lists of proper nouns need splitting across takes rather than crammed into eight seconds. Cuts are hard cuts; there are no crossfades yet.</p>
  </section>

  <footer>
    <p>PayToLaugh &middot; an experiment in short-form pet commentary. All video on this page is AI-generated. Parody.</p>
  </footer>

</div>
</body>
</html>