115 lines
7.2 KiB
HTML
115 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PayToLaugh — Demo</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(260px,340px) 1fr;gap:38px;align-items:start}
|
|
@media(max-width:760px){.demo{grid-template-columns:1fr}}
|
|
video{width:100%;border-radius:14px;border:1px solid var(--line);background:#000;display:block}
|
|
.cap{font:12px/1.5 var(--mono);color:var(--muted);margin-top:12px}
|
|
.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:38%;font-size:14px}
|
|
td code,.k{font-family:var(--mono);font-size:13.5px;color:var(--accent2)}
|
|
.quote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 22px;
|
|
color:var(--ink);font-size:17px}
|
|
ul{margin:0;padding-left:20px;color:var(--muted)}
|
|
li{margin-bottom:9px}
|
|
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 one generated clip and exactly how it was made.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>The clip</h2>
|
|
<div class="demo">
|
|
<div>
|
|
<video controls preload="metadata" playsinline
|
|
src="https://api.corben.world/files/00eb3251-8257-4bfd-a164-fb9ea76aa8b3/public"></video>
|
|
<p class="cap">720×1280 · 8s · h264 + AAC · 24fps · 3.4 MB</p>
|
|
</div>
|
|
<div>
|
|
<h3>Butcher, on humanoid robots</h3>
|
|
<p class="quote">“That robot is going to be the best-selling product of all time. Every house gets one.”</p>
|
|
<p style="color:var(--muted);margin:0 0 18px">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, no separate lip-sync pass.</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>
|
|
<tr><th>Mode</th><td>Text-to-video, native audio</td></tr>
|
|
<tr><th>Generation time</th><td>62 seconds</td></tr>
|
|
<tr><th>List price</th><td>$0.05 / second at 720p</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</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>Scene, performance and the exact spoken line go to the model as one prompt. Audio and mouth movement are generated together.</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>Describing the breed matters more than image quality.</b> A full-resolution character plate was reconstructed faithfully from a 150×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’s line appended to its own.</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×2 grid afterwards, which also frees the bottom frame for branding.</p>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>PayToLaugh · an experiment in short-form pet commentary. All video on this page is AI-generated.</p>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|