agentreel 0.3.5 → 0.4.0

package/README.md

@@ -1,10 +1,10 @@
 # agentreel
 
-Turn your web apps and CLIs into viral clips.
+Turn your web apps and CLIs into viral clips — or demo what a PR does.
 
 https://github.com/user-attachments/assets/474fd85d-3b35-48f4-82b8-1b337840fb51
 
-> 🔊 Turn on sound
+> Turn on sound
 
 ## Install
 
@@ -15,46 +15,72 @@ npx agentreel
 ## Usage
 
 ```bash
+# Demo a PR (reads context from GitHub):
+agentreel --pr 123
+agentreel --pr owner/repo#123
+agentreel --pr https://github.com/owner/repo/pull/123
+
+# PR demo with a dev server (for web UI changes):
+agentreel --pr 123 --start "npm run dev"
+
 # CLI demo:
 agentreel --cmd "npx my-cli-tool"
 
 # Browser demo:
 agentreel --url http://localhost:3000
-
-# With context for smarter demo planning:
-agentreel --cmd "npx my-tool" --prompt "A CLI that manages cron jobs"
 ```
 
-## How it works
+## Modes
+
+### PR demo (`--pr`)
+
+Point it at a pull request. It fetches the diff, description, and README from GitHub, then AI plans and records a demo showing what the PR actually does.
 
-1. You provide a CLI command or URL
-2. AI plans and executes a demo (terminal or browser)
-3. AI picks the 3-4 best highlight moments
-4. Renders a polished video with music, transitions, and overlays
-5. Prompts you to share on Twitter
+- **1920x1080 landscape** — chapter-based walkthrough
+- **4-6 chapters**, 12s each — full command + output flows
+- No music, no marketing overlays — just the real demo
+- Great for attaching to PRs so reviewers can see the change in action
 
-## What you get
+Requires [`gh` CLI](https://cli.github.com) to be installed and authenticated.
 
-A 15-20 second 1080x1080 video with:
-- **Title card** with your project name
-- **Highlight clips** — terminal or browser window on animated gradient
-- **Text overlays** — bold captions that work on mute
-- **Cursor + typing** — looks like someone's actually using it
-- **Background music** with fade in/out
-- **End CTA** — install command + URL
+### Marketing reel (`--cmd` / `--url`)
 
-Ready for Twitter/X, LinkedIn, Reels.
+The original mode — creates a short, polished clip for social media.
 
-## Supports
+- **1080x1080 square** — optimized for Twitter/X, LinkedIn, Reels
+- **3-4 highlight snippets**, 4.5s each — the best moments
+- Music, animated transitions, text overlays, cursor animations
+- Prompts you to share on Twitter
 
-- **CLI demos** — records your tool in a terminal, shows the highlights
-- **Browser demos** — records your web app via Playwright, shows the key moments
+## How it works
+
+1. **PR mode**: Fetches PR diff + README from GitHub, AI decides CLI or browser demo, plans steps that show the actual changes
+2. **Manual mode**: You provide a CLI command or URL, AI plans an impressive demo
+3. AI executes the demo (terminal PTY or Playwright browser)
+4. AI picks the best moments as highlights
+5. Renders video with Remotion
+
+## Flags
+
+```
+    --pr <ref>          PR number, owner/repo#N, or full GitHub URL
+    --start <cmd>       command to start a dev server (for browser PR demos)
+-c, --cmd <command>     CLI command to demo
+-u, --url <url>         URL to demo (browser mode)
+-t, --title <text>      video title
+-o, --output <file>     output file (default: agentreel.mp4)
+-a, --auth <file>       Playwright storage state (cookies/auth) for browser demos
+-g, --guidelines <text> guidelines for highlight generation
+    --music <file>      path to background music mp3
+    --no-share          skip the share prompt
+```
 
 ## Requirements
 
 - Node.js 18+
 - Python 3.10+
 - Claude CLI (`claude`) — used to plan demo sequences
+- `gh` CLI — required for `--pr` mode
 
 ## Credits
 

package/bin/agentreel.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { execFileSync } from "node:child_process";
+import { execFileSync, spawn } from "node:child_process";
 import { readFileSync, statSync, existsSync, mkdirSync, copyFileSync } from "node:fs";
 import { join, dirname, resolve } from "node:path";
 import { tmpdir } from "node:os";
@@ -25,7 +25,8 @@ function parseArgs() {
     }
     if (arg === "--cmd" || arg === "-c") flags.cmd = args[++i];
     else if (arg === "--url" || arg === "-u") flags.url = args[++i];
-    else if (arg === "--prompt" || arg === "-p") flags.prompt = args[++i];
+    else if (arg === "--pr") flags.pr = args[++i];
+    else if (arg === "--start") flags.start = args[++i];
     else if (arg === "--title" || arg === "-t") flags.title = args[++i];
     else if (arg === "--output" || arg === "-o") flags.output = args[++i];
     else if (arg === "--music") flags.music = args[++i];
@@ -40,13 +41,16 @@ function printUsage() {
   console.log(`agentreel — Turn your web apps and CLIs into viral clips
 
 Usage:
+  agentreel --pr 123                             # demo a PR (reads context from GitHub)
+  agentreel --pr owner/repo#123                  # demo a PR (explicit repo)
   agentreel --cmd "npx my-cli-tool"              # CLI demo
   agentreel --url http://localhost:3000           # browser demo
 
 Flags:
+      --pr <ref>          PR number, owner/repo#N, or full GitHub URL
+      --start <cmd>       command to start a dev server (for browser PR demos)
   -c, --cmd <command>     CLI command to demo
   -u, --url <url>         URL to demo (browser mode)
-  -p, --prompt <text>     description of what the tool does
   -t, --title <text>      video title
   -o, --output <file>     output file (default: agentreel.mp4)
   -a, --auth <file>       Playwright storage state (cookies/auth) for browser demos
@@ -399,6 +403,152 @@ function autoDescribe(cmd, url) {
   return cmd ? cmd.split(/\s+/).pop() : "Web app demo";
 }
 
+// ── PR Context ─────────────────────────────────────────────
+
+function fetchPRContext(prRef) {
+  try {
+    execFileSync("gh", ["--version"], { stdio: "ignore" });
+  } catch {
+    console.error("Error: `gh` CLI is required for --pr mode. Install it from https://cli.github.com");
+    process.exit(1);
+  }
+
+  const prJson = execFileSync("gh", [
+    "pr", "view", String(prRef),
+    "--json", "title,body,headRefName,baseRefName,url,number",
+  ], { encoding: "utf-8", timeout: 30000 });
+  const pr = JSON.parse(prJson);
+
+  let diff = "";
+  try {
+    diff = execFileSync("gh", ["pr", "diff", String(prRef)], {
+      encoding: "utf-8", timeout: 30000,
+    });
+  } catch (e) {
+    console.error(`  Warning: could not fetch PR diff: ${e.message}`);
+  }
+
+  // Read README from cwd (the agent already has the repo checked out)
+  let readme = "";
+  for (const name of ["README.md", "readme.md", "README", "README.rst"]) {
+    const p = join(process.cwd(), name);
+    if (existsSync(p)) {
+      readme = readFileSync(p, "utf-8");
+      break;
+    }
+  }
+
+  return { ...pr, diff, readme };
+}
+
+function planDemoFromPR(prContext, guidelines) {
+  const guidelinesBlock = guidelines
+    ? `\nAdditional guidelines: ${guidelines}`
+    : "";
+
+  const prompt = `You are planning a demo for a Pull Request. Your job is to decide whether this is a CLI or browser demo, and provide the details needed to record it.
+
+PR Title: ${prContext.title}
+PR Description: ${prContext.body || "(no description)"}
+
+Diff (truncated):
+${prContext.diff.slice(0, 8000)}
+
+README (truncated):
+${prContext.readme.slice(0, 3000)}${guidelinesBlock}
+
+Return a JSON object with these fields:
+{
+  "type": "cli" or "browser",
+  "command": "the command to run" (for CLI demos, e.g. "npx my-tool --help") or null,
+  "url": "http://localhost:3000/relevant-page" (for browser demos) or null,
+  "description": "one-sentence summary of what the PR does",
+  "title": "short video title (2-4 words)",
+  "guidelines": "specific instructions for the demo recorder about what steps to show and what to focus on"
+}
+
+Rules:
+- If the PR changes a CLI tool, script, or backend logic that can be demonstrated in a terminal, use "cli".
+- If the PR changes a web UI, frontend, or something best shown in a browser, use "browser".
+- The "guidelines" field should tell the demo recorder exactly what to demonstrate — the specific feature or fix from this PR.
+- The demo should show the actual changes working honestly, not market the product.
+- Return ONLY the JSON object, no markdown fences.`;
+
+  const result = execFileSync("claude", ["-p", prompt, "--output-format", "text"], {
+    encoding: "utf-8",
+    timeout: 60000,
+    stdio: ["ignore", "pipe", "ignore"],
+  }).trim();
+
+  // Strip markdown fences if present
+  let text = result;
+  if (text.includes("```")) {
+    const parts = text.split("```");
+    for (let part of parts) {
+      part = part.trim();
+      if (part.startsWith("json")) part = part.slice(4).trim();
+      if (part.startsWith("{")) { text = part; break; }
+    }
+  }
+
+  return JSON.parse(text);
+}
+
+// ── Dev Server ─────────────────────────────────────────────
+
+function startDevServer(command) {
+  console.error(`  Starting dev server: ${command}`);
+  const proc = spawn("sh", ["-c", command], {
+    stdio: ["ignore", "pipe", "pipe"],
+    detached: true,
+  });
+
+  // Wait for server to be ready (look for common ready signals in output)
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      console.error("  Dev server ready (timeout — assuming started)");
+      resolve(proc);
+    }, 30000);
+
+    const onData = (data) => {
+      const text = data.toString();
+      if (/localhost|ready|started|listening|compiled/i.test(text)) {
+        clearTimeout(timeout);
+        // Give it a moment to fully start
+        setTimeout(() => {
+          console.error("  Dev server ready");
+          resolve(proc);
+        }, 2000);
+      }
+    };
+
+    proc.stdout.on("data", onData);
+    proc.stderr.on("data", onData);
+
+    proc.on("error", (err) => {
+      clearTimeout(timeout);
+      reject(new Error(`Dev server failed to start: ${err.message}`));
+    });
+
+    proc.on("exit", (code) => {
+      clearTimeout(timeout);
+      if (code !== null && code !== 0) {
+        reject(new Error(`Dev server exited with code ${code}`));
+      }
+    });
+  });
+}
+
+function stopDevServer(proc) {
+  if (!proc || proc.killed) return;
+  try {
+    // Kill the process group (detached process + children)
+    process.kill(-proc.pid, "SIGTERM");
+  } catch {
+    try { proc.kill("SIGTERM"); } catch { /* already dead */ }
+  }
+}
+
 // ── Main ────────────────────────────────────────────────────
 
 async function main() {
@@ -406,83 +556,158 @@ async function main() {
   const output = flags.output || "agentreel.mp4";
   const noShare = flags.noShare;
 
-  let demoCmd = flags.cmd;
-  let demoURL = flags.url;
-  let prompt = flags.prompt;
-
-  // Auto-generate description if not provided
-  if (!prompt) {
-    console.error("Generating description...");
-    prompt = autoDescribe(demoCmd, demoURL);
-    console.error(`  "${prompt}"`);
-  }
-
-  if (!demoCmd && !demoURL) {
-    console.error("Please provide --cmd or --url.\n");
+  if (!flags.cmd && !flags.url && !flags.pr) {
+    console.error("Please provide --pr, --cmd, or --url.\n");
     printUsage();
     process.exit(1);
   }
 
-  let videoTitle = flags.title || demoCmd || demoURL;
+  // ── PR mode ──────────────────────────────────────────────
+  if (flags.pr) {
+    console.error("Fetching PR context...");
+    const prContext = fetchPRContext(flags.pr);
+    console.error(`  PR #${prContext.number}: ${prContext.title}`);
+
+    console.error("Planning demo...");
+    const plan = planDemoFromPR(prContext, flags.guidelines);
+    console.error(`  Type: ${plan.type}, "${plan.description}"`);
+
+    const videoTitle = flags.title || plan.title || prContext.title;
+    const description = plan.description;
+    // Prepend "demo" to guidelines so downstream scripts know to use chapter-based extraction
+    const demoGuidelines = `[demo] ${plan.guidelines || ""}`.trim();
+
+    if (plan.type === "browser") {
+      const url = plan.url || "http://localhost:3000";
+      let serverProc = null;
+
+      try {
+        if (flags.start) {
+          serverProc = await startDevServer(flags.start);
+        }
+
+        ensureBrowserDeps();
+        console.error("Step 1/3: Recording browser demo...");
+        const videoPath = recordBrowser(url, demoGuidelines, flags.auth, demoGuidelines);
+
+        const publicDir = join(ROOT, "public");
+        if (!existsSync(publicDir)) mkdirSync(publicDir, { recursive: true });
+        copyFileSync(videoPath, join(publicDir, "browser-demo.mp4"));
+
+        console.error("Step 2/3: Building highlights...");
+        const clicksPath = videoPath.replace(".mp4", "-clicks.json");
+        let allClicks = [];
+        if (existsSync(clicksPath)) {
+          allClicks = JSON.parse(readFileSync(clicksPath, "utf-8"));
+          console.error(`  ${allClicks.length} clicks captured`);
+        }
+        const highlights = buildBrowserHighlights(allClicks, videoPath, demoGuidelines, demoGuidelines);
+
+        console.error("Step 3/3: Rendering video...");
+        await renderVideo({
+          title: videoTitle,
+          subtitle: description,
+          highlights,
+          endText: prContext.title,
+          endUrl: prContext.url,
+          mode: "demo",
+        }, output, flags.music);
+      } finally {
+        stopDevServer(serverProc);
+      }
+    } else {
+      // CLI demo
+      if (!plan.command) {
+        console.error("Error: Claude could not determine a command to demo for this PR.");
+        process.exit(1);
+      }
+
+      console.error("Step 1/3: Recording CLI demo...");
+      const castPath = recordCLI(plan.command, process.cwd(), description, demoGuidelines);
+
+      console.error("Step 2/3: Extracting highlights...");
+      const highlightsPath = extractHighlightsFromCast(castPath, description, demoGuidelines);
+      const highlights = JSON.parse(readFileSync(highlightsPath, "utf-8"));
+      console.error(`  ${highlights.length} highlights extracted`);
+
+      console.error("Step 3/3: Rendering video...");
+      await renderVideo({
+        title: videoTitle,
+        subtitle: description,
+        highlights,
+        endText: plan.command,
+        endUrl: prContext.url,
+        mode: "demo",
+      }, output, flags.music);
+    }
 
-  if (demoCmd) {
+    if (!noShare) {
+      await shareFlow(resolve(output), videoTitle, description);
+    }
+    return;
+  }
+
+  // ── Manual modes (--cmd / --url) ─────────────────────────
+  console.error("Generating description...");
+  const description = autoDescribe(flags.cmd, flags.url);
+  console.error(`  "${description}"`);
+
+  let videoTitle = flags.title || flags.cmd || flags.url;
+
+  if (flags.cmd) {
     console.error("Step 1/3: Recording CLI demo...");
-    const castPath = recordCLI(demoCmd, process.cwd(), prompt, flags.guidelines);
+    const castPath = recordCLI(flags.cmd, process.cwd(), description, flags.guidelines);
 
     console.error("Step 2/3: Extracting highlights...");
-    const highlightsPath = extractHighlightsFromCast(castPath, prompt, flags.guidelines);
+    const highlightsPath = extractHighlightsFromCast(castPath, description, flags.guidelines);
     const highlights = JSON.parse(readFileSync(highlightsPath, "utf-8"));
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
     await renderVideo({
       title: videoTitle,
-      subtitle: prompt,
+      subtitle: description,
       highlights,
-      endText: demoCmd,
+      endText: flags.cmd,
     }, output, flags.music);
 
     if (!noShare) {
-      await shareFlow(resolve(output), videoTitle, prompt);
+      await shareFlow(resolve(output), videoTitle, description);
     }
     return;
   }
 
-  if (demoURL) {
-    const task = prompt || "Explore the main features of this app";
+  if (flags.url) {
+    const task = description || "Explore the main features of this app";
 
     ensureBrowserDeps();
     console.error("Step 1/3: Recording browser demo...");
-    const videoPath = recordBrowser(demoURL, task, flags.auth, flags.guidelines);
+    const videoPath = recordBrowser(flags.url, task, flags.auth, flags.guidelines);
 
-    // Copy video to Remotion public dir so it can be served
     const publicDir = join(ROOT, "public");
     if (!existsSync(publicDir)) mkdirSync(publicDir, { recursive: true });
     copyFileSync(videoPath, join(publicDir, "browser-demo.mp4"));
 
     console.error("Step 2/3: Building highlights...");
-
-    // Read click data — this is the primary signal for highlights
     const clicksPath = videoPath.replace(".mp4", "-clicks.json");
     let allClicks = [];
     if (existsSync(clicksPath)) {
       allClicks = JSON.parse(readFileSync(clicksPath, "utf-8"));
       console.error(`  ${allClicks.length} clicks captured`);
     }
-
     const highlights = buildBrowserHighlights(allClicks, videoPath, task, flags.guidelines);
 
     console.error("Step 3/3: Rendering video...");
     await renderVideo({
       title: videoTitle,
-      subtitle: prompt,
+      subtitle: description,
       highlights,
-      endText: demoURL,
-      endUrl: demoURL,
+      endText: flags.url,
+      endUrl: flags.url,
     }, output, flags.music);
 
     if (!noShare) {
-      await shareFlow(resolve(output), videoTitle, prompt);
+      await shareFlow(resolve(output), videoTitle, description);
     }
     return;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentreel",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Turn your web apps and CLIs into viral clips",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"

package/scripts/cli_demo.py

@@ -198,7 +198,7 @@ def record_demo(steps: list[dict], workdir: str, output_path: str):
 
 
 def extract_highlights(cast_path: str, context: str, guidelines: str = "") -> list[dict]:
-    """Ask Claude to pick 3-4 highlight moments from the recorded session."""
+    """Ask Claude to pick highlight moments from the recorded session."""
     # Read the asciicast and strip to just the text content
     lines_output = []
     with open(cast_path) as f:
@@ -218,7 +218,29 @@ def extract_highlights(cast_path: str, context: str, guidelines: str = "") -> li
 
     guidelines_block = f"\n\nAdditional guidelines: {guidelines}" if guidelines else ""
 
-    prompt = f"""You are creating a highlights reel for a CLI tool demo video. Here is the full terminal output:
+    # Demo mode: more chapters, more lines, show full flows
+    is_demo = "demo" in guidelines.lower() if guidelines else False
+
+    if is_demo:
+        prompt = f"""You are creating chapter-based highlights for a demo walkthrough video. Here is the full terminal output:
+
+---
+{clean[:6000]}
+---
+
+Context: {context}{guidelines_block}
+
+Create 4-6 chapters that walk through the full demo. Each chapter shows a complete command and its output. For each chapter, return:
+- "label": chapter name (1-3 words) like "Setup", "Run Command", "View Results", "Verify"
+- "lines": array of objects, each with "text" (string), and optionally "color" (hex), "bold" (bool), "dim" (bool), "isPrompt" (bool if it's a shell command)
+
+Each chapter should have 12-20 lines. Show the COMPLETE command and output for each step.
+Include the prompt line (isPrompt: true) followed by the actual output.
+Use these colors: green="#50fa7b", yellow="#f1fa8c", purple="#bd93f9", red="#ff5555", dim="#6272a4", white="#f8f8f2"
+
+Return ONLY a JSON array. No markdown fences."""
+    else:
+        prompt = f"""You are creating a highlights reel for a CLI tool demo video. Here is the full terminal output:
 
 ---
 {clean[:3000]}

package/src/CastVideo.tsx

@@ -20,19 +20,18 @@ const TERM_BG = "#282a36";
 const TITLE_BAR = "#1e1f29";
 const CURSOR_COLOR = "#f8f8f2";
 
-const TITLE_DUR = 2.5;
-const TERMINAL_HIGHLIGHT_DUR = 4.5;
-const BROWSER_HIGHLIGHT_DUR = 7.0;
-const TRANSITION_DUR = 0.5;
-const END_DUR = 3.5;
+// Mode-specific timing (synced with Root.tsx calculateMetadata)
+const REEL_TIMING = { title: 2.5, termHighlight: 4.5, browserHighlight: 7.0, transition: 0.5, end: 3.5 };
+const DEMO_TIMING = { title: 2.0, termHighlight: 12.0, browserHighlight: 10.0, transition: 0.4, end: 3.0 };
 
 const VIEWPORT_W = 1280;
 const VIEWPORT_H = 800;
 const VIDEO_AREA_W = 880;
 const VIDEO_AREA_H = 550; // 880 * 10/16
 
-function getHighlightDuration(h: Highlight): number {
-  return h.videoSrc ? BROWSER_HIGHLIGHT_DUR : TERMINAL_HIGHLIGHT_DUR;
+function getHighlightDuration(h: Highlight, mode: "reel" | "demo" = "reel"): number {
+  const t = mode === "demo" ? DEMO_TIMING : REEL_TIMING;
+  return h.videoSrc ? t.browserHighlight : t.termHighlight;
 }
 
 const SANS =
@@ -87,17 +86,21 @@ export const CastVideo: React.FC<CastProps> = ({
   endText,
   endUrl,
   gradient,
+  mode: rawMode,
 }) => {
   const frame = useCurrentFrame();
   const { fps, durationInFrames } = useVideoConfig();
+  const mode = rawMode || "reel";
+  const isDemo = mode === "demo";
+  const timing = isDemo ? DEMO_TIMING : REEL_TIMING;
   const g = gradient || ["#0f0f1a", "#1a0f2e"];
 
-  const titleFrames = Math.round(TITLE_DUR * fps);
-  const endFrames = Math.round(END_DUR * fps);
+  const titleFrames = Math.round(timing.title * fps);
+  const endFrames = Math.round(timing.end * fps);
 
   // Compute per-highlight durations and cumulative offsets
   const hlDurations = highlights.map((h) =>
-    Math.round(getHighlightDuration(h) * fps)
+    Math.round(getHighlightDuration(h, mode) * fps)
   );
   const hlOffsets: number[] = [];
   let cumulative = 0;
@@ -107,9 +110,11 @@ export const CastVideo: React.FC<CastProps> = ({
   }
 
   // Animated gradient — hue rotates slowly over time
-  const gradAngle = interpolate(frame, [0, durationInFrames], [125, 200], {
-    extrapolateRight: "clamp",
-  });
+  const gradAngle = isDemo
+    ? 145 // static angle for demo
+    : interpolate(frame, [0, durationInFrames], [125, 200], {
+        extrapolateRight: "clamp",
+      });
 
   return (
     <AbsoluteFill
@@ -118,17 +123,18 @@ export const CastVideo: React.FC<CastProps> = ({
         backgroundSize: "200% 200%",
       }}
     >
-      {/* Subtle animated glow blobs in background */}
-      <AnimatedBackground frame={frame} duration={durationInFrames} />
+      {/* Subtle animated glow blobs — reel only */}
+      {!isDemo && <AnimatedBackground frame={frame} duration={durationInFrames} />}
 
-      <MusicTrack />
+      {/* Music — reel only */}
+      {!isDemo && <MusicTrack />}
 
       <Sequence durationInFrames={titleFrames}>
-        <TitleCard title={title} subtitle={subtitle} />
+        <TitleCard title={title} subtitle={subtitle} isDemo={isDemo} />
       </Sequence>
 
       {highlights.map((h, i) => {
-        const dur = getHighlightDuration(h);
+        const dur = getHighlightDuration(h, mode);
         return (
           <Sequence
             key={i}
@@ -142,6 +148,7 @@ export const CastVideo: React.FC<CastProps> = ({
                 total={highlights.length}
                 transition={TRANSITIONS[i % TRANSITIONS.length]}
                 durationSec={dur}
+                isDemo={isDemo}
               />
             ) : (
               <HighlightClip
@@ -150,6 +157,7 @@ export const CastVideo: React.FC<CastProps> = ({
                 total={highlights.length}
                 transition={TRANSITIONS[i % TRANSITIONS.length]}
                 durationSec={dur}
+                isDemo={isDemo}
               />
             )}
           </Sequence>
@@ -160,7 +168,7 @@ export const CastVideo: React.FC<CastProps> = ({
         from={titleFrames + cumulative}
         durationInFrames={endFrames}
       >
-        <EndCard text={endText || title} url={endUrl} />
+        <EndCard text={endText || title} url={endUrl} isDemo={isDemo} />
       </Sequence>
     </AbsoluteFill>
   );
@@ -408,12 +416,14 @@ const TextOverlay: React.FC<{ text: string; durationSec: number }> = ({
 
 // ─── Title Card ───────────────────────────────────────────
 
-const TitleCard: React.FC<{ title: string; subtitle?: string }> = ({
+const TitleCard: React.FC<{ title: string; subtitle?: string; isDemo?: boolean }> = ({
   title,
   subtitle,
+  isDemo,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const timing = isDemo ? DEMO_TIMING : REEL_TIMING;
 
   const titleSpring = spring({ fps, frame, config: { damping: 14 } });
   const subSpring = spring({
@@ -423,11 +433,11 @@ const TitleCard: React.FC<{ title: string; subtitle?: string }> = ({
   });
   const fadeOut = interpolate(
     frame,
-    [fps * (TITLE_DUR - TRANSITION_DUR), fps * TITLE_DUR],
+    [fps * (timing.title - timing.transition), fps * timing.title],
     [1, 0],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
-  const titleZoom = interpolate(frame, [0, fps * TITLE_DUR], [1, 1.08], {
+  const titleZoom = isDemo ? 1 : interpolate(frame, [0, fps * timing.title], [1, 1.08], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
@@ -449,7 +459,7 @@ const TitleCard: React.FC<{ title: string; subtitle?: string }> = ({
         <div
           style={{
             fontFamily: SANS,
-            fontSize: 76,
+            fontSize: isDemo ? 56 : 76,
             fontWeight: 800,
             color: WHITE,
             letterSpacing: -3,
@@ -463,7 +473,7 @@ const TitleCard: React.FC<{ title: string; subtitle?: string }> = ({
               transform: `translateY(${interpolate(subSpring, [0, 1], [20, 0])}px)`,
               opacity: subSpring,
               fontFamily: SANS,
-              fontSize: 28,
+              fontSize: isDemo ? 24 : 28,
               color: DIM,
               marginTop: 16,
               letterSpacing: 1,
@@ -485,82 +495,79 @@ const HighlightClip: React.FC<{
   total: number;
   transition: TransitionStyle;
   durationSec: number;
-}> = ({ highlight, index, total, transition, durationSec }) => {
+  isDemo?: boolean;
+}> = ({ highlight, index, total, transition, durationSec, isDemo }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width } = useVideoConfig();
+  const timing = isDemo ? DEMO_TIMING : REEL_TIMING;
 
-  // Entry animation — varies per clip
+  // Entry animation — simpler in demo mode
   const enterSpring = spring({
     fps,
     frame,
-    config: { damping: 18, stiffness: 80 },
+    config: isDemo ? { damping: 22, stiffness: 120 } : { damping: 18, stiffness: 80 },
   });
-  const entry = getEntryTransform(transition, enterSpring);
+  const entry = isDemo
+    ? { scale: 1, x: 0, y: 0 } // no transform in demo
+    : getEntryTransform(transition, enterSpring);
 
   // Fade transitions
-  const fadeIn = interpolate(frame, [0, fps * TRANSITION_DUR], [0, 1], {
+  const fadeIn = interpolate(frame, [0, fps * timing.transition], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   const fadeOut = interpolate(
     frame,
-    [fps * (durationSec - TRANSITION_DUR), fps * durationSec],
+    [fps * (durationSec - timing.transition), fps * durationSec],
     [1, 0],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
   const opacity = Math.min(fadeIn, fadeOut);
 
-  // Zoom in/out cycle
-  const zoomIn = interpolate(
-    frame,
-    [fps * 0.8, fps * 2.0],
-    [1, 1.12],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-  const zoomOut = interpolate(
-    frame,
-    [fps * 2.5, fps * (durationSec - 0.5)],
-    [1.12, 1.02],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.inOut(Easing.cubic),
-    }
-  );
-  const zoom = frame < fps * 2.5 ? zoomIn : zoomOut;
+  // Zoom/pan — reel only
+  let zoom = 1;
+  let panY = 0;
+  if (!isDemo) {
+    const zoomIn = interpolate(frame, [fps * 0.8, fps * 2.0], [1, 1.12], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic),
+    });
+    const zoomOut = interpolate(frame, [fps * 2.5, fps * (durationSec - 0.5)], [1.12, 1.02], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.cubic),
+    });
+    zoom = frame < fps * 2.5 ? zoomIn : zoomOut;
+    panY = interpolate(frame, [fps * 0.8, fps * 2.0, fps * (durationSec - 1.0)], [0, -15, 5], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp",
+    });
+  }
 
-  // Vertical pan
-  const panY = interpolate(
-    frame,
-    [fps * 0.8, fps * 2.0, fps * (durationSec - 1.0)],
-    [0, -15, 5],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
+  // Line timing — faster reveal in demo (more lines to show)
+  const lineDelay = isDemo ? fps * 0.08 : fps * 0.15;
+  const firstLineFrame = isDemo ? fps * 0.25 : fps * 0.35;
 
-  // Line timing
-  const lineDelay = fps * 0.15;
-  const firstLineFrame = fps * 0.35;
+  const lines = highlight.lines || [];
 
   // Cursor tracking
-  const lastVisibleLineIdx = highlight.lines.findIndex((_, i) => {
+  const lastVisibleLineIdx = lines.findIndex((_, i) => {
     return frame < firstLineFrame + (i + 1) * lineDelay;
   });
   const cursorLineIdx =
     lastVisibleLineIdx === -1
-      ? highlight.lines.length - 1
+      ? lines.length - 1
       : Math.max(0, lastVisibleLineIdx - 1);
 
+  // Terminal sizing — wider in demo mode (landscape)
+  const termWidth = isDemo ? width - 160 : 820;
+  const termFontSize = isDemo ? 14 : 16;
+  const termMinHeight = isDemo ? 500 : 280;
+  const termPadding = isDemo ? "16px 20px" : "20px 24px";
+
   return (
     <AbsoluteFill style={{ opacity }}>
-      {/* Label + progress dots */}
+      {/* Chapter label */}
       <div
         style={{
           position: "absolute",
-          top: 45,
+          top: isDemo ? 24 : 45,
           left: 0,
           width: "100%",
           textAlign: "center",
@@ -570,36 +577,31 @@ const HighlightClip: React.FC<{
         <span
           style={{
             fontFamily: MONO,
-            fontSize: 13,
+            fontSize: isDemo ? 15 : 13,
             color: ACCENT,
-            letterSpacing: 4,
+            letterSpacing: isDemo ? 3 : 4,
             textTransform: "uppercase",
-            opacity: interpolate(enterSpring, [0, 1], [0, 0.6]),
+            opacity: interpolate(enterSpring, [0, 1], [0, isDemo ? 0.8 : 0.6]),
           }}
         >
           {highlight.label}
         </span>
-        <div
-          style={{
-            marginTop: 10,
-            display: "flex",
-            justifyContent: "center",
-            gap: 8,
-          }}
-        >
-          {Array.from({ length: total }).map((_, i) => (
-            <div
-              key={i}
-              style={{
-                width: i === index ? 24 : 8,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor:
-                  i === index ? ACCENT : "rgba(255,255,255,0.12)",
-              }}
-            />
-          ))}
-        </div>
+        {/* Progress dots — reel only */}
+        {!isDemo && (
+          <div style={{ marginTop: 10, display: "flex", justifyContent: "center", gap: 8 }}>
+            {Array.from({ length: total }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  width: i === index ? 24 : 8,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: i === index ? ACCENT : "rgba(255,255,255,0.12)",
+                }}
+              />
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Terminal window */}
@@ -607,20 +609,23 @@ const HighlightClip: React.FC<{
         style={{
           justifyContent: "center",
           alignItems: "center",
-          padding: 40,
-          paddingTop: 100,
-          paddingBottom: 100,
+          padding: isDemo ? 20 : 40,
+          paddingTop: isDemo ? 60 : 100,
+          paddingBottom: isDemo ? 40 : 100,
         }}
       >
         <div
           style={{
-            transform: `scale(${entry.scale * zoom}) translate(${entry.x}px, ${entry.y + panY}px)`,
+            transform: isDemo
+              ? `scale(${enterSpring})`
+              : `scale(${entry.scale * zoom}) translate(${entry.x}px, ${entry.y + panY}px)`,
             transformOrigin: "center center",
-            width: 820,
-            borderRadius: 14,
+            width: termWidth,
+            borderRadius: isDemo ? 10 : 14,
             overflow: "hidden",
-            boxShadow:
-              "0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)",
+            boxShadow: isDemo
+              ? "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)"
+              : "0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)",
           }}
         >
           {/* macOS title bar */}
@@ -633,30 +638,9 @@ const HighlightClip: React.FC<{
               gap: 8,
             }}
           >
-            <div
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: 6,
-                backgroundColor: "#ff5555",
-              }}
-            />
-            <div
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: 6,
-                backgroundColor: "#f1fa8c",
-              }}
-            />
-            <div
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: 6,
-                backgroundColor: "#50fa7b",
-              }}
-            />
+            <div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: "#ff5555" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: "#f1fa8c" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: "#50fa7b" }} />
             <div style={{ flex: 1 }} />
           </div>
 
@@ -664,11 +648,11 @@ const HighlightClip: React.FC<{
           <div
             style={{
               backgroundColor: TERM_BG,
-              padding: "20px 24px",
-              minHeight: 280,
+              padding: termPadding,
+              minHeight: termMinHeight,
             }}
           >
-            {highlight.lines.map((line, lineIdx) => {
+            {lines.map((line, lineIdx) => {
               const lineFrame = firstLineFrame + lineIdx * lineDelay;
               const lineSpring = spring({
                 fps,
@@ -676,19 +660,18 @@ const HighlightClip: React.FC<{
                 config: { damping: 20, stiffness: 120 },
               });
               const lineOpacity = interpolate(lineSpring, [0, 1], [0, 1]);
-              const lineX = interpolate(lineSpring, [0, 1], [12, 0]);
+              const lineX = isDemo ? 0 : interpolate(lineSpring, [0, 1], [12, 0]);
 
               // Strip leading "$ " from text — renderer adds its own $ prefix
               const cleanText = line.isPrompt ? line.text.replace(/^\$\s*/, "") : line.text;
               let displayText = cleanText;
               let isTyping = false;
               if (line.isPrompt) {
-                const typingEnd = lineFrame + fps * 0.6;
+                const typingDur = isDemo ? 0.8 : 0.6;
+                const typingEnd = lineFrame + fps * typingDur;
                 if (frame < typingEnd) {
                   const progress = interpolate(
-                    frame,
-                    [lineFrame, typingEnd],
-                    [0, 1],
+                    frame, [lineFrame, typingEnd], [0, 1],
                     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
                   );
                   const chars = Math.floor(progress * cleanText.length);
@@ -697,14 +680,11 @@ const HighlightClip: React.FC<{
                 }
               }
 
-              const isZoomed = highlight.zoomLine === lineIdx;
+              const isZoomed = !isDemo && highlight.zoomLine === lineIdx;
               const lineZoom = isZoomed
-                ? interpolate(
-                    frame,
-                    [lineFrame + fps * 0.5, lineFrame + fps * 1],
-                    [1, 1.05],
-                    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-                  )
+                ? interpolate(frame, [lineFrame + fps * 0.5, lineFrame + fps * 1], [1, 1.05], {
+                    extrapolateLeft: "clamp", extrapolateRight: "clamp",
+                  })
                 : 1;
 
               const showCursor = lineIdx === cursorLineIdx;
@@ -717,8 +697,8 @@ const HighlightClip: React.FC<{
                     transform: `translateX(${lineX}px) scale(${lineZoom})`,
                     transformOrigin: "left center",
                     fontFamily: MONO,
-                    fontSize: 16,
-                    lineHeight: 1.7,
+                    fontSize: termFontSize,
+                    lineHeight: isDemo ? 1.6 : 1.7,
                     color: line.dim ? DIM : line.color || WHITE,
                     fontWeight: line.bold ? 700 : 400,
                     whiteSpace: "pre",
@@ -738,11 +718,11 @@ const HighlightClip: React.FC<{
         </div>
       </AbsoluteFill>
 
-      {/* Mouse pointer — appears at start of each clip */}
-      <MousePointer />
+      {/* Mouse pointer — reel only */}
+      {!isDemo && <MousePointer />}
 
-      {/* Text overlay */}
-      {highlight.overlay && (
+      {/* Text overlay — reel only */}
+      {!isDemo && highlight.overlay && (
         <TextOverlay text={highlight.overlay} durationSec={durationSec} />
       )}
     </AbsoluteFill>
@@ -757,7 +737,8 @@ const BrowserHighlightClip: React.FC<{
   total: number;
   transition: TransitionStyle;
   durationSec: number;
-}> = ({ highlight, index, total, transition, durationSec }) => {
+  isDemo?: boolean;
+}> = ({ highlight, index, total, transition, durationSec, isDemo }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -768,57 +749,50 @@ const BrowserHighlightClip: React.FC<{
   });
   const entry = getEntryTransform(transition, enterSpring);
 
-  const fadeIn = interpolate(frame, [0, fps * TRANSITION_DUR], [0, 1], {
+  const timing = isDemo ? DEMO_TIMING : REEL_TIMING;
+
+  const fadeIn = interpolate(frame, [0, fps * timing.transition], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   const fadeOut = interpolate(
     frame,
-    [fps * (durationSec - TRANSITION_DUR), fps * durationSec],
+    [fps * (durationSec - timing.transition), fps * durationSec],
     [1, 0],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
   const opacity = Math.min(fadeIn, fadeOut);
 
-  // Focal zoom — applied to video content only, not browser chrome
+  // Focal zoom — reel only
   const fx = highlight.focusX ?? 0.5;
   const fy = highlight.focusY ?? 0.5;
 
-  const focalZoomIn = interpolate(frame, [fps * 1.0, fps * 3.0], [1, 1.15], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.out(Easing.cubic),
-  });
-  const focalZoomOut = interpolate(
-    frame,
-    [fps * 3.5, fps * (durationSec - 0.5)],
-    [1.15, 1.02],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.inOut(Easing.cubic),
-    }
-  );
-  const focalZoom = frame < fps * 3.5 ? focalZoomIn : focalZoomOut;
-
-  // Entry pan
-  const panY = interpolate(
-    frame,
-    [fps * 1.0, fps * 3.0, fps * (durationSec - 1.0)],
-    [0, -10, 5],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
+  let focalZoom = 1;
+  let panY = 0;
+  if (!isDemo) {
+    const focalZoomIn = interpolate(frame, [fps * 1.0, fps * 3.0], [1, 1.15], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic),
+    });
+    const focalZoomOut = interpolate(frame, [fps * 3.5, fps * (durationSec - 0.5)], [1.15, 1.02], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.cubic),
+    });
+    focalZoom = frame < fps * 3.5 ? focalZoomIn : focalZoomOut;
+    panY = interpolate(frame, [fps * 1.0, fps * 3.0, fps * (durationSec - 1.0)], [0, -10, 5], {
+      extrapolateLeft: "clamp", extrapolateRight: "clamp",
+    });
+  }
 
   const videoSrc = highlight.videoSrc!;
   const startFrom = Math.round((highlight.videoStartSec || 0) * fps);
+  const browserWidth = isDemo ? 1600 : 880;
 
   return (
     <AbsoluteFill style={{ opacity }}>
-      {/* Label + progress dots */}
+      {/* Chapter label */}
       <div
         style={{
           position: "absolute",
-          top: 45,
+          top: isDemo ? 24 : 45,
           left: 0,
           width: "100%",
           textAlign: "center",
@@ -828,36 +802,30 @@ const BrowserHighlightClip: React.FC<{
         <span
           style={{
             fontFamily: MONO,
-            fontSize: 13,
+            fontSize: isDemo ? 15 : 13,
             color: ACCENT,
-            letterSpacing: 4,
+            letterSpacing: isDemo ? 3 : 4,
             textTransform: "uppercase",
-            opacity: interpolate(enterSpring, [0, 1], [0, 0.6]),
+            opacity: interpolate(enterSpring, [0, 1], [0, isDemo ? 0.8 : 0.6]),
           }}
         >
           {highlight.label}
         </span>
-        <div
-          style={{
-            marginTop: 10,
-            display: "flex",
-            justifyContent: "center",
-            gap: 8,
-          }}
-        >
-          {Array.from({ length: total }).map((_, i) => (
-            <div
-              key={i}
-              style={{
-                width: i === index ? 24 : 8,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor:
-                  i === index ? ACCENT : "rgba(255,255,255,0.12)",
-              }}
-            />
-          ))}
-        </div>
+        {!isDemo && (
+          <div style={{ marginTop: 10, display: "flex", justifyContent: "center", gap: 8 }}>
+            {Array.from({ length: total }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  width: i === index ? 24 : 8,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: i === index ? ACCENT : "rgba(255,255,255,0.12)",
+                }}
+              />
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Browser window */}
@@ -865,20 +833,23 @@ const BrowserHighlightClip: React.FC<{
         style={{
           justifyContent: "center",
           alignItems: "center",
-          padding: 40,
-          paddingTop: 100,
-          paddingBottom: 100,
+          padding: isDemo ? 20 : 40,
+          paddingTop: isDemo ? 60 : 100,
+          paddingBottom: isDemo ? 40 : 100,
         }}
       >
         <div
           style={{
-            transform: `scale(${entry.scale}) translate(${entry.x}px, ${entry.y + panY}px)`,
+            transform: isDemo
+              ? `scale(${enterSpring})`
+              : `scale(${entry.scale}) translate(${entry.x}px, ${entry.y + panY}px)`,
             transformOrigin: "center center",
-            width: 880,
-            borderRadius: 14,
+            width: browserWidth,
+            borderRadius: isDemo ? 10 : 14,
             overflow: "hidden",
-            boxShadow:
-              "0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)",
+            boxShadow: isDemo
+              ? "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)"
+              : "0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)",
           }}
         >
           {/* Browser chrome */}
@@ -946,8 +917,8 @@ const BrowserHighlightClip: React.FC<{
         </div>
       </AbsoluteFill>
 
-      {/* Text overlay */}
-      {highlight.overlay && (
+      {/* Text overlay — reel only */}
+      {!isDemo && highlight.overlay && (
         <TextOverlay text={highlight.overlay} durationSec={durationSec} />
       )}
     </AbsoluteFill>
@@ -1080,9 +1051,10 @@ const BrowserCursor: React.FC<{
 
 // ─── End Card (CTA) ───────────────────────────────────────
 
-const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
+const EndCard: React.FC<{ text: string; url?: string; isDemo?: boolean }> = ({ text, url, isDemo }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const timing = isDemo ? DEMO_TIMING : REEL_TIMING;
 
   const cmdSpring = spring({ fps, frame, config: { damping: 14 } });
   const urlSpring = spring({
@@ -1095,7 +1067,7 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
     frame: Math.max(0, frame - 18),
     config: { damping: 14 },
   });
-  const endZoom = interpolate(frame, [0, fps * END_DUR], [1.05, 1], {
+  const endZoom = isDemo ? 1 : interpolate(frame, [0, fps * timing.end], [1.05, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
     easing: Easing.out(Easing.cubic),
@@ -1117,8 +1089,8 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
       >
         <div
           style={{
-            fontFamily: MONO,
-            fontSize: 30,
+            fontFamily: isDemo ? SANS : MONO,
+            fontSize: isDemo ? 28 : 30,
             color: WHITE,
             padding: "18px 36px",
             borderRadius: 14,
@@ -1127,9 +1099,9 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
             boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
           }}
         >
-          <span style={{ color: ACCENT }}>$ </span>
+          {!isDemo && <span style={{ color: ACCENT }}>$ </span>}
           {text}
-          <Cursor visible blink />
+          {!isDemo && <Cursor visible blink />}
         </div>
       </div>
 
@@ -1140,7 +1112,7 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
             opacity: urlSpring,
             transform: `translateY(${interpolate(urlSpring, [0, 1], [15, 0])}px)`,
             fontFamily: SANS,
-            fontSize: 20,
+            fontSize: isDemo ? 18 : 20,
             color: DIM,
             letterSpacing: 0.5,
           }}

package/src/Root.tsx

@@ -2,26 +2,37 @@ import { Composition } from "remotion";
 import { CastVideo } from "./CastVideo";
 import { defaultProps, CastProps } from "./types";
 
+// Duration constants per mode
+const REEL = { title: 2.5, termHighlight: 4.5, browserHighlight: 7.0, end: 3.5 };
+const DEMO = { title: 2.0, termHighlight: 12.0, browserHighlight: 10.0, end: 3.0 };
+
 export const RemotionRoot: React.FC = () => {
   return (
     <Composition
       id="CastVideo"
-      component={CastVideo}
+      component={CastVideo as unknown as React.FC<Record<string, unknown>>}
       durationInFrames={450}
       fps={30}
       width={1080}
       height={1080}
-      defaultProps={defaultProps}
-      calculateMetadata={({ props }: { props: CastProps }) => {
+      defaultProps={defaultProps as unknown as Record<string, unknown>}
+      calculateMetadata={({ props }) => {
+        const p = props as unknown as CastProps;
         const fps = 30;
-        const titleFrames = Math.round(2.5 * fps);
-        const highlightFrames = props.highlights.reduce((sum, h) => {
-          const dur = h.videoSrc ? 7.0 : 4.5;
+        const isDemo = p.mode === "demo";
+        const timing = isDemo ? DEMO : REEL;
+
+        const titleFrames = Math.round(timing.title * fps);
+        const highlightFrames = p.highlights.reduce((sum, h) => {
+          const dur = h.videoSrc ? timing.browserHighlight : timing.termHighlight;
           return sum + Math.round(dur * fps);
         }, 0);
-        const endFrames = Math.round(3.5 * fps);
+        const endFrames = Math.round(timing.end * fps);
+
         return {
           durationInFrames: titleFrames + highlightFrames + endFrames,
+          width: isDemo ? 1920 : 1080,
+          height: isDemo ? 1080 : 1080,
         };
       }}
     />

package/src/types.ts

@@ -38,6 +38,7 @@ export interface CastProps {
   endText?: string; // closing CTA command, e.g. "npx agentreel"
   endUrl?: string; // URL shown under CTA, e.g. "github.com/islo-labs/agentreel"
   gradient?: [string, string]; // background gradient colors
+  mode?: "reel" | "demo"; // "reel" = 1080x1080 marketing clip, "demo" = 1920x1080 chapter walkthrough
 }
 
 export const defaultProps: CastProps = {