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}
  .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}
  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 — full cut</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. 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 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 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 the idle take out of the speaking take&rsquo;s final frame guarantees an exact match. A shared background reference cannot, because it does not lock the animal.</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:540px">
      <tr><th>Model</th><td><span class="k">veo-3.1-lite</span>, 720p, native audio</td></tr>
      <tr><th>Any 8s clip</th><td>$0.40</td></tr>
      <tr><th>Generation time</th><td>41–62 seconds</td></tr>
      <tr><th>This 48s short, from nothing</th><td>$4.00 &mdash; ten clips</td></tr>
      <tr><th>Each additional episode</th><td>$1.60 &mdash; four new lines; intro, cast and idles are reused</td></tr>
    </table>
  </section>

  <section>
    <h2>Still rough</h2>
    <p class="note">Honest state of play. Coined words give the model trouble — &ldquo;okayest&rdquo; lands somewhere between okayest and okay-us. Dense lists of proper nouns need splitting across takes rather than crammed into eight seconds. And every clip is a fresh roll of the dice: coat colour drifted tan-heavy on one early take and had to be regenerated.</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>