retake-demos 0.2.2 → 0.4.0

package/site/index.html

@@ -1,158 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Retake — rerun the demo, don't re-record it</title>
-<meta name="description" content="Retake turns a plain-English walkthrough into a repeatable video of your real app. Your agent writes the flow; Retake checks it, records it, and keeps it rerunnable." />
-<style>
-  :root { --paper:#edefe8; --card:#f8f9f5; --ink:#191d19; --muted:#767e74; --rule:#dbdfd3; --rule2:#c9cec0; --accent:#1a1c1e; --amber:#e8b04b; }
-  * { box-sizing:border-box; }
-  body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.7 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
-  .top { display:flex; align-items:center; gap:10px; padding:18px 26px; max-width:880px; margin:0 auto; }
-  .mark { width:26px; height:26px; border-radius:8px; background:var(--accent); position:relative; flex:none; }
-  .mark i { position:absolute; left:6.5px; height:3px; border-radius:2px; background:#eceee9; }
-  .mark i:nth-child(1){top:5px;width:5px;opacity:.55} .mark i:nth-child(2){top:10px;width:8px;opacity:.8} .mark i:nth-child(3){top:15px;width:13px;background:var(--amber)} .mark i:nth-child(4){top:20px;width:8px;opacity:.8}
-  .top b { font-size:17px; letter-spacing:-.01em; }
-  .top .sp { flex:1; }
-  .top a { color:var(--muted); text-decoration:none; font-size:14px; margin-left:18px; }
-  .top a:hover { color:var(--ink); }
-  main { max-width:880px; margin:0 auto; padding:30px 26px 90px; }
-  .hero { padding:40px 0 30px; }
-  .kicker { font:12px ui-monospace, Menlo, monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
-  h1 { font-size:clamp(34px, 6vw, 54px); line-height:1.08; letter-spacing:-.025em; margin:0 0 18px; }
-  h1 em { font-style:normal; color:var(--muted); }
-  .lede { font-size:19px; color:var(--muted); max-width:620px; margin:0 0 28px; }
-  .actions { display:flex; gap:10px; flex-wrap:wrap; }
-  .btn { display:inline-block; text-decoration:none; border-radius:12px; padding:12px 22px; font-size:15px; }
-  .btn.dark { background:var(--accent); color:#eceee9; }
-  .btn.dark:hover { opacity:.9; }
-  .btn.light { border:1px solid var(--rule2); color:var(--ink); background:#fff; }
-  .btn.light:hover { border-color:var(--ink); }
-  .say { background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:16px 20px; margin:46px 0 10px; font-size:17px; }
-  .say .who { font:11px ui-monospace, Menlo, monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px; }
-  .say i { font-style:normal; }
-  .arrow { text-align:center; color:var(--muted); margin:8px 0; }
-  .videos { display:grid; gap:26px; margin:14px 0 0; }
-  .shot { border:1px solid var(--rule2); border-radius:14px; overflow:hidden; background:#111; box-shadow:0 14px 40px rgba(24,28,24,.12); }
-  .shot video { width:100%; height:auto; display:block; }
-  .shot figcaption { background:var(--card); padding:12px 18px 14px; font-size:14px; color:var(--muted); }
-  .shot figcaption b { color:var(--ink); font-weight:600; }
-  section { margin-top:72px; }
-  h2 { font-size:24px; letter-spacing:-.015em; margin:0 0 8px; }
-  .sub { color:var(--muted); margin:0 0 26px; max-width:560px; }
-  .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
-  .cell { background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:18px 20px; }
-  .cell b { display:block; margin-bottom:6px; font-size:15px; }
-  .cell p { margin:0; font-size:14px; color:var(--muted); line-height:1.6; }
-  .how { counter-reset:step; }
-  .step { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
-  .step:last-child { border-bottom:0; }
-  .step::before { counter-increment:step; content:counter(step); flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#eceee9; display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:2px; }
-  .step b { display:block; }
-  .step p { margin:2px 0 0; color:var(--muted); font-size:14.5px; }
-  pre { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:16px 20px; overflow-x:auto; font:14px/1.8 ui-monospace, Menlo, monospace; }
-  pre .c { color:var(--muted); }
-  .foot { margin-top:80px; padding-top:22px; border-top:1px solid var(--rule); color:var(--muted); font-size:13.5px; display:flex; gap:18px; flex-wrap:wrap; }
-  .foot a { color:inherit; }
-</style>
-</head>
-<body>
-<div class="top">
-  <div class="mark"><i></i><i></i><i></i><i></i></div>
-  <b>Retake</b>
-  <span class="sp"></span>
-  <a href="https://github.com/glebbogachev00/retake">GitHub</a>
-</div>
-<main>
-  <div class="hero">
-    <p class="kicker">Product demos, as code</p>
-    <h1>Rerun the demo.<br><em>Don't re-record it.</em></h1>
-    <p class="lede">Retake turns a plain-English walkthrough into a repeatable video of your real app. Your coding agent writes the flow. Retake checks it, drives the browser, records in 1080p, and lets you rerun the same demo when the UI changes.</p>
-    <div class="actions">
-      <a class="btn dark" href="#start">Paste the prompt</a>
-      <a class="btn light" href="#proof">Watch a demo</a>
-    </div>
-  </div>
-
-  <div class="say"><span class="who">You, to the agent you already use</span><i>“Record a demo of my app at localhost:3000 showing the sign-up flow.”</i></div>
-  <p class="arrow">↓</p>
-  <div class="videos" id="proof" style="scroll-margin-top:20px"></div>
-
-  <section id="start">
-    <h2>Paste this to your agent</h2>
-    <p class="sub">Ask from the coding agent you already use. It installs Retake, registers the tools, and produces the first take. Or do the two commands yourself and just ask for the demo.</p>
-    <div class="say" style="margin-top:0"><span class="who">In Claude Code, Codex, Hermes, or another coding agent</span><i>“Install retake-demos from npm (npm i -g retake-demos, then retake install in a new folder), then record a demo of my app at localhost:3000 showing the checkout flow.”</i></div>
-    <p class="sub" style="margin:14px 0 0">After setup, each demo starts as a sentence and ends as files you can inspect, rerender, or rerun.</p>
-  </section>
-
-  <section id="how">
-    <h2>How it works</h2>
-    <p class="sub">You provide intent. The agent writes the flow. Retake verifies, records, and renders it.</p>
-    <div class="how">
-      <div class="step"><div><b>You ask</b><p>"Record a demo of checkout." That sentence is the brief for the agent you already use.</p></div></div>
-      <div class="step"><div><b>Your agent builds and checks the flow</b><p>It reads your app, writes a small YAML demo, and dry-runs every selector and wait. Nothing records until the walkthrough works.</p></div></div>
-      <div class="step"><div><b>Retake records the real interaction</b><p>Real typing, real clicks, real waits. The result is demo.mp4, a still for each scene, and a proof log of what happened.</p></div></div>
-      <div class="step"><div><b>You revise without starting over</b><p>Change captions, zoom, layout, or format in seconds. When the UI changes, rerun the same flow instead of recording by hand.</p></div></div>
-    </div>
-  </section>
-
-  <section>
-    <h2>What people record</h2>
-    <p class="sub">One engine, different audiences. Because the demo is a file, each version is a rerun, not a fresh recording session.</p>
-    <div class="grid">
-      <div class="cell"><b>Client walkthroughs</b><p>Show the flow they asked about without booking a call. When the question changes, adjust the file and send a fresh take.</p></div>
-      <div class="cell"><b>Launches and social</b><p>Render the same interaction as landscape, square, or vertical. Ship the feature, then post the 20 seconds that show it.</p></div>
-      <div class="cell"><b>Docs and onboarding</b><p>README GIFs, first-run walkthroughs, and help-page clips can be regenerated when the UI changes.</p></div>
-      <div class="cell"><b>Regression proof</b><p>The dry run walks every step in seconds. A demo that fails when your app breaks is both a visible repro and a useful check.</p></div>
-    </div>
-  </section>
-
-  <section>
-    <h2>What's in the box</h2>
-    <p class="sub">Everything required to produce the same clean take again.</p>
-    <div class="grid">
-      <div class="cell"><b>Scenes with captions</b><p>Captions are timed from the actual run and placed outside the product frame.</p></div>
-      <div class="cell"><b>Render-time camera</b><p>Zoom and framing applied after recording. Change your mind in seconds, no browser involved.</p></div>
-      <div class="cell"><b>Presets that post well</b><p>1080p landscape, square, vertical, docs GIF. Pick the publishing format, not the browser window.</p></div>
-      <div class="cell"><b>A still for every scene</b><p>Each scene yields a crisp PNG. A video usually ships with a picture next to it.</p></div>
-      <div class="cell"><b>Secrets stay secret</b><p>Credentials live in .env, redacted from logs, warned about if they'd appear on camera.</p></div>
-      <div class="cell"><b>Stubs and seeds</b><p>Stub the backend and reset state so demos stay repeatable.</p></div>
-    </div>
-  </section>
-
-
-
-  <div class="foot">
-    <span>MIT licensed.</span>
-    <a href="https://github.com/glebbogachev00/retake">Source</a>
-    <span>Built on Playwright, testreel, and ffmpeg.</span>
-    <a href="https://github.com/glebbogachev00/retake/issues/new?template=gremlin.md">Report a bug</a>
-  </div>
-</main>
-<script>
-// The proof section fills itself from whatever clean renders exist in
-// site/media/. Committed pages carry no product footage; media is local.
-const CANDIDATES = [
-  { file: 'todo-basics',    cap: '<b>Written by an agent, performed by a browser.</b> Real typing, real clicks, captions timed from the actual run — 22 seconds, every step passed.' },
-  { file: 'store-checkout', cap: '<b>The login is handled properly.</b> Credentials from .env, marked secret, signed in before the camera rolls — then a checkout, end to end.' },
-  { file: 'distill-messy',  cap: '<b>A conversation, recorded end to end.</b> Drafted, dry-run, and performed by an agent against a live model — 33 seconds.' },
-];
-(async () => {
-  const host = document.getElementById('proof');
-  for (const c of CANDIDATES) {
-    const url = (location.pathname.startsWith('/landing') ? '/landing/media/' : 'media/') + c.file + '.mp4';
-    try {
-      const r = await fetch(url, { method: 'HEAD' });
-      if (!r.ok) continue;
-    } catch { continue; }
-    const f = document.createElement('figure');
-    f.className = 'shot'; f.style.margin = 0;
-    f.innerHTML = '<video src="' + url + '" poster="' + url.replace('.mp4', '.jpg') + '" controls muted playsinline preload="metadata"></video><figcaption>' + c.cap + '</figcaption>';
-    host.appendChild(f);
-  }
-  if (!host.children.length) host.innerHTML = '<div class="say" style="margin-top:0"><span class="who">Proof pending</span>Record a demo and drop its render into <code>site/media/</code> — this section fills itself.</div>';
-})();
-</script>
-</body>
-</html>