paytolaugh/index.html

<!doctype html>
<html lang="en">
<head>
<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}
  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}
  .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}
  .card p{margin:0;color:var(--muted);font-size:15px}
  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}
  footer{padding:38px 0 70px;color:var(--muted);font-size:13.5px}
  a{color:var(--accent)}
</style>
</head>
<body>
<div class="wrap">

  <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>
  </header>

  <section>
    <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/68fdcece-135d-416d-97df-a53da2a3c929/public">
          Your browser cannot play this video.
        </video>
        <p class="cap">720&times;1280 &middot; 32s &middot; h264 + AAC &middot; 13&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. Each dog has two takes — a speaking one and an idle one — and only shows the speaking take during their own slot. The rest of the time they are listening, blinking, tilting their head, scratching an ear or yawning. The live tile carries a lit border.</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>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 &middot; $0.40</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; reusable forever</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. Idle clips are generated once per character and reused in every future episode, so they are capex rather than per-episode cost.</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. 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, twice — speaking and idle — 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 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 over who speaks when.</li>
      <li><b>Seed continuity from the last frame.</b> Growing the idle take out of the speaking take&rsquo;s final frame guarantees an exact match. A shared background reference cannot do that, because it does not lock the animal.</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. This caught a take where one character had absorbed another&rsquo;s line.</li>
      <li><b>Each shot gets a clean context.</b> Generating several clips in one conversation caused dialogue to bleed between characters.</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>What it costs</h2>
    <table style="max-width:520px">
      <tr><th>Model</th><td><span class="k">veo-3.1-lite</span>, 720p, native audio</td></tr>
      <tr><th>Speaking clip</th><td>$0.40 per 8s</td></tr>
      <tr><th>Idle B-roll</th><td>$0.40 per 8s — once per character, then reused</td></tr>
      <tr><th>A four-dog short</th><td>$1.60 recurring, after a one-off $1.60 idle library</td></tr>
      <tr><th>Generation time</th><td>41–62 seconds per clip</td></tr>
    </table>
  </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>