agentreel 0.1.7 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # agentreel
 
-Turn your Claude Code sessions into viral demo videos.
+Turn your web apps and CLIs into viral clips.
 
 https://github.com/user-attachments/assets/474fd85d-3b35-48f4-82b8-1b337840fb51
 
@@ -15,25 +15,23 @@ npx agentreel
 ## Usage
 
 ```bash
-# After Claude builds something, just run:
-agentreel
+# CLI demo:
+agentreel --cmd "npx my-cli-tool"
 
-# It reads your session, detects what was built, records a demo,
-# picks the highlights, and renders a video. One command.
+# Browser demo:
+agentreel --url http://localhost:3000
 
-# Manual mode:
-agentreel --cmd "npx my-cli-tool"          # CLI demo
-agentreel --url http://localhost:3000       # browser demo
+# With context for smarter demo planning:
+agentreel --cmd "npx my-tool" --prompt "A CLI that manages cron jobs"
 ```
 
 ## How it works
 
-1. Reads your Claude Code session log
-2. Detects what was built — CLI tool or web app
-3. Claude plans and executes a demo (terminal or browser)
-4. Claude picks the 3-4 best highlight moments
-5. Renders a polished video with music, transitions, and overlays
-6. Prompts you to share on Twitter
+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
 
 ## What you get
 
@@ -56,7 +54,7 @@ Ready for Twitter/X, LinkedIn, Reels.
 
 - Node.js 18+
 - Python 3.10+
-- Claude CLI (`claude`)
+- Claude CLI (`claude`) — used to plan demo sequences
 
 ## Credits
 

package/bin/agentreel.mjs

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 import { execFileSync } from "node:child_process";
-import { readFileSync, readdirSync, statSync, existsSync, mkdirSync, copyFileSync, createReadStream } from "node:fs";
-import { join, dirname, basename, resolve } from "node:path";
-import { homedir, tmpdir } from "node:os";
+import { readFileSync, statSync, existsSync, mkdirSync, copyFileSync } from "node:fs";
+import { join, dirname, resolve } from "node:path";
+import { tmpdir } from "node:os";
 import { fileURLToPath } from "node:url";
 import { createInterface } from "node:readline";
 
@@ -18,26 +18,28 @@ function parseArgs() {
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
     if (arg === "--help" || arg === "-h") { printUsage(); process.exit(0); }
-    if (arg === "--version" || arg === "-v") { console.log("0.1.0"); process.exit(0); }
+    if (arg === "--version" || arg === "-v") {
+      const pkg = JSON.parse(readFileSync(join(ROOT, "package.json"), "utf-8"));
+      console.log(pkg.version);
+      process.exit(0);
+    }
     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 === "--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];
-    else if (arg === "--session") flags.session = args[++i];
     else if (arg === "--no-share") flags.noShare = true;
   }
   return flags;
 }
 
 function printUsage() {
-  console.log(`agentreel — Turn Claude Code sessions into viral demo videos
+  console.log(`agentreel — Turn your web apps and CLIs into viral clips
 
 Usage:
-  agentreel                                          # auto-detect from session
-  agentreel --cmd "npx @islo-labs/overtime"           # manual CLI demo
-  agentreel --url http://localhost:3000               # manual browser demo
+  agentreel --cmd "npx my-cli-tool"              # CLI demo
+  agentreel --url http://localhost:3000           # browser demo
 
 Flags:
   -c, --cmd <command>     CLI command to demo
@@ -46,155 +48,11 @@ Flags:
   -t, --title <text>      video title
   -o, --output <file>     output file (default: agentreel.mp4)
       --music <file>      path to background music mp3
-      --session <file>    path to Claude Code session .jsonl
       --no-share          skip the share prompt
   -h, --help              show help
   -v, --version           show version`);
 }
 
-// ── Session parser ──────────────────────────────────────────
-
-function findLatestSession() {
-  const cwd = process.cwd();
-  const projectKey = cwd.replaceAll("/", "-");
-  const projectDir = join(homedir(), ".claude", "projects", projectKey);
-
-  if (!existsSync(projectDir)) return null;
-
-  let newest = null;
-  let newestTime = 0;
-  for (const entry of readdirSync(projectDir)) {
-    if (!entry.endsWith(".jsonl")) continue;
-    const full = join(projectDir, entry);
-    const mtime = statSync(full).mtimeMs;
-    if (mtime > newestTime) { newestTime = mtime; newest = full; }
-  }
-  return newest;
-}
-
-function parseSession(path) {
-  const lines = readFileSync(path, "utf-8").split("\n").filter(Boolean);
-  const session = { prompt: "", title: "", actions: [], startTime: null, endTime: null };
-
-  for (const line of lines) {
-    let obj;
-    try { obj = JSON.parse(line); } catch { continue; }
-
-    const ts = obj.timestamp ? new Date(obj.timestamp) : null;
-    if (ts && !isNaN(ts)) {
-      if (!session.startTime || ts < session.startTime) session.startTime = ts;
-      if (!session.endTime || ts > session.endTime) session.endTime = ts;
-    }
-
-    if (obj.type === "user" && !session.prompt) {
-      session.prompt = extractPrompt(obj);
-    }
-    if (obj.type === "custom-title" && obj.customTitle) {
-      session.title = obj.customTitle;
-    }
-    if (obj.type === "assistant") {
-      const content = obj.message?.content;
-      if (!Array.isArray(content)) continue;
-      for (const block of content) {
-        if (block.type !== "tool_use") continue;
-        const action = parseToolUse(block.name, block.input, ts);
-        if (action) session.actions.push(action);
-      }
-    }
-  }
-
-  session.actions.sort((a, b) => (a.time || 0) - (b.time || 0));
-  if (session.startTime && session.endTime) {
-    session.durationMs = session.endTime - session.startTime;
-  }
-  return session;
-}
-
-function extractPrompt(obj) {
-  const content = obj.message?.content;
-  if (typeof content === "string") return cleanPrompt(content);
-  if (Array.isArray(content)) {
-    for (const block of content) {
-      if (block.type === "text" && block.text) return cleanPrompt(block.text);
-    }
-  }
-  return "";
-}
-
-function cleanPrompt(s) {
-  for (const line of s.split("\n")) {
-    const trimmed = line.trim();
-    if (!trimmed || /^[│├└─┌┐]/.test(trimmed)) continue;
-    return trimmed.slice(0, 200);
-  }
-  return s.slice(0, 200);
-}
-
-function parseToolUse(name, input, ts) {
-  if (!input) return null;
-  switch (name) {
-    case "Read": return { type: "read", filePath: input.file_path, time: ts };
-    case "Write": return { type: "write", filePath: input.file_path, size: input.content?.length || 0, time: ts };
-    case "Edit": return { type: "edit", filePath: input.file_path, time: ts };
-    case "Bash": return { type: "bash", command: input.command, time: ts };
-    case "Grep": case "Glob": return { type: "search", time: ts };
-    case "Agent": return { type: "agent", time: ts };
-    default: return null;
-  }
-}
-
-// ── Detection ───────────────────────────────────────────────
-
-function detectResult(session) {
-  const containsAny = (s, ...subs) => subs.some(sub => s.includes(sub));
-
-  for (const a of session.actions) {
-    if (a.type === "bash") {
-      const cmd = (a.command || "").toLowerCase();
-      if (containsAny(cmd, "npm run dev", "npm start", "npx next", "npx vite", "yarn dev", "pnpm dev", "flask run", "uvicorn")) {
-        const url = extractURL(a.command) || "http://localhost:3000";
-        return { type: "browser", command: url };
-      }
-    }
-  }
-
-  for (const a of session.actions) {
-    if ((a.type === "write" || a.type === "edit") && a.filePath?.endsWith("package.json")) {
-      try {
-        const pkg = JSON.parse(readFileSync(a.filePath, "utf-8"));
-        if (pkg.bin && pkg.name) return { type: "cli", command: `npx ${pkg.name} --help` };
-      } catch { /* skip */ }
-    }
-  }
-
-  for (const a of session.actions) {
-    if (a.type === "bash" && a.command?.includes("go build")) {
-      const parts = a.command.split(/\s+/);
-      const oIdx = parts.indexOf("-o");
-      if (oIdx !== -1 && parts[oIdx + 1]) return { type: "cli", command: `${parts[oIdx + 1]} --help` };
-    }
-  }
-
-  for (let i = session.actions.length - 1; i >= 0; i--) {
-    const a = session.actions[i];
-    if (a.type !== "bash") continue;
-    const cmd = (a.command || "").trim();
-    if (containsAny(cmd, "go build", "go test", "npm install", "npm test", "git ", "mkdir", "ls ", "cat ")) continue;
-    if (containsAny(cmd, "npx ", "./bin/", "./dist/", "go run", "python ", "node ")) {
-      return { type: "cli", command: cmd };
-    }
-  }
-
-  return { type: "unknown" };
-}
-
-function extractURL(cmd) {
-  for (const part of (cmd || "").split(/\s+/)) {
-    if (part.includes("localhost:")) return part.startsWith("http") ? part : `http://${part}`;
-  }
-  return null;
-}
-
 // ── Recording + Highlights ──────────────────────────────────
 
 function findPython() {
@@ -371,30 +229,10 @@ async function main() {
   let demoURL = flags.url;
   let prompt = flags.prompt;
 
-  // Auto-detect from Claude session if no manual flags
   if (!demoCmd && !demoURL) {
-    const sessionPath = flags.session || findLatestSession();
-    if (!sessionPath) {
-      console.error("No session found and no --cmd or --url provided.\n");
-      printUsage();
-      process.exit(1);
-    }
-
-    console.error(`Reading session: ${basename(sessionPath)}`);
-    const session = parseSession(sessionPath);
-    if (!prompt) prompt = session.prompt;
-
-    const detected = detectResult(session);
-    if (detected.type === "cli") {
-      demoCmd = detected.command;
-      console.error(`Detected CLI: ${demoCmd}`);
-    } else if (detected.type === "browser") {
-      demoURL = detected.command;
-      console.error(`Detected browser: ${demoURL}`);
-    } else {
-      console.error("Couldn't detect what was built. Use --cmd or --url.");
-      process.exit(1);
-    }
+    console.error("Please provide --cmd or --url.\n");
+    printUsage();
+    process.exit(1);
   }
 
   let videoTitle = flags.title || demoCmd || demoURL;
@@ -438,6 +276,32 @@ async function main() {
     const highlights = JSON.parse(readFileSync(highlightsPath, "utf-8"));
     console.error(`  ${highlights.length} highlights extracted`);
 
+    // Merge click data into 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`);
+    }
+
+    for (const h of highlights) {
+      const startSec = h.videoStartSec || 0;
+      const endSec = h.videoEndSec || (startSec + 7);
+
+      h.clicks = allClicks
+        .filter(c => c.timeSec >= startSec && c.timeSec <= endSec)
+        .map(c => ({
+          x: Math.max(0, Math.min(1280, c.x)),
+          y: Math.max(0, Math.min(800, c.y)),
+          timeSec: c.timeSec - startSec,
+        }));
+
+      if (h.clicks.length > 0) {
+        h.focusX = h.clicks.reduce((s, c) => s + c.x, 0) / h.clicks.length / 1280;
+        h.focusY = h.clicks.reduce((s, c) => s + c.y, 0) / h.clicks.length / 800;
+      }
+    }
+
     console.error("Step 3/3: Rendering video...");
     await renderVideo({
       title: videoTitle,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "agentreel",
-  "version": "0.1.7",
-  "description": "Turn Claude Code sessions into viral demo videos",
+  "version": "0.2.0",
+  "description": "Turn your web apps and CLIs into viral clips",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"
   },
@@ -38,8 +38,8 @@
     "cli",
     "demo",
     "video",
-    "claude",
-    "agent",
-    "remotion"
+    "remotion",
+    "screencast",
+    "web-app"
   ]
 }

package/scripts/browser_demo.py

@@ -12,6 +12,7 @@ import os
 import subprocess
 import sys
 import tempfile
+import time
 
 
 def find_claude():
@@ -74,7 +75,7 @@ def extract_highlights(video_path, task):
         f"Suggest 3-4 highlight moments as a JSON array. Each highlight has: "
         f'"label" (1-2 words), "overlay" (short caption with **bold** for accent), '
         f'"videoStartSec" (start time in seconds), "videoEndSec" (end time). '
-        f"Each clip should be 3-5 seconds. Cover: page load, key interaction, result. "
+        f"Each clip should be 5-8 seconds to show the full interaction. Cover: page load, key interaction, result. "
         f"Return ONLY the JSON array."
     )
 
@@ -114,6 +115,7 @@ async def record_browser_demo(url, task, output_path):
     print(f"Script ready ({len(script_code)} chars)", file=sys.stderr)
 
     video_dir = tempfile.mkdtemp()
+    recording_start_ms = int(time.time() * 1000)
 
     async with async_playwright() as p:
         browser = await p.chromium.launch(headless=True)
@@ -122,6 +124,22 @@ async def record_browser_demo(url, task, output_path):
             record_video_dir=video_dir,
             record_video_size={"width": 1280, "height": 800},
         )
+
+        # Inject click tracker — persists across navigations
+        click_tracker_js = (
+            "if (!window.__agentreel_clicks) {"
+            "  window.__agentreel_clicks = [];"
+            "  document.addEventListener('click', function(e) {"
+            "    window.__agentreel_clicks.push({"
+            "      x: e.clientX,"
+            "      y: e.clientY,"
+            f"     timestamp: Date.now() - {recording_start_ms}"
+            "    });"
+            "  }, true);"
+            "}"
+        )
+        await context.add_init_script(click_tracker_js)
+
         page = await context.new_page()
 
         # Navigate first
@@ -134,11 +152,11 @@ async def record_browser_demo(url, task, output_path):
 
         await page.wait_for_timeout(1000)
 
-        # Execute the generated demo
+        # Run the generated demo
         try:
             local_ns = {}
-            full_code = f"import asyncio\n{script_code}"
-            compiled = compile(full_code, "<demo>", "exec")
+            full_code = "import asyncio\n" + script_code
+            compiled = compile(full_code, "<demo>", "exec")  # noqa: S102
             exec(compiled, local_ns)  # noqa: S102
 
             if "demo" in local_ns:
@@ -156,6 +174,21 @@ async def record_browser_demo(url, task, output_path):
             await page.evaluate("window.scrollTo({ top: 0, behavior: 'smooth' })")
             await page.wait_for_timeout(2000)
 
+        # Extract click data before closing
+        try:
+            clicks_raw = await page.evaluate("window.__agentreel_clicks || []")
+        except Exception:
+            clicks_raw = []
+
+        clicks = [
+            {"x": c["x"], "y": c["y"], "timeSec": round(c["timestamp"] / 1000.0, 3)}
+            for c in clicks_raw
+        ]
+        clicks_path = output_path.replace(".mp4", "-clicks.json")
+        with open(clicks_path, "w") as f:
+            json.dump(clicks, f, indent=2)
+        print(f"Captured {len(clicks)} clicks -> {clicks_path}", file=sys.stderr)
+
         # Get the video path before closing
         video = page.video
         await page.close()

package/src/CastVideo.tsx

@@ -11,7 +11,7 @@ import {
   Easing,
   OffthreadVideo,
 } from "remotion";
-import { CastProps, Highlight } from "./types";
+import { CastProps, Highlight, ClickEvent } from "./types";
 
 const ACCENT = "#50fa7b";
 const DIM = "#6272a4";
@@ -21,10 +21,20 @@ const TITLE_BAR = "#1e1f29";
 const CURSOR_COLOR = "#f8f8f2";
 
 const TITLE_DUR = 2.5;
-const HIGHLIGHT_DUR = 4.5;
+const TERMINAL_HIGHLIGHT_DUR = 4.5;
+const BROWSER_HIGHLIGHT_DUR = 7.0;
 const TRANSITION_DUR = 0.5;
 const END_DUR = 3.5;
 
+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;
+}
+
 const SANS =
   '-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif';
 const MONO =
@@ -83,9 +93,19 @@ export const CastVideo: React.FC<CastProps> = ({
   const g = gradient || ["#0f0f1a", "#1a0f2e"];
 
   const titleFrames = Math.round(TITLE_DUR * fps);
-  const highlightFrames = Math.round(HIGHLIGHT_DUR * fps);
   const endFrames = Math.round(END_DUR * fps);
 
+  // Compute per-highlight durations and cumulative offsets
+  const hlDurations = highlights.map((h) =>
+    Math.round(getHighlightDuration(h) * fps)
+  );
+  const hlOffsets: number[] = [];
+  let cumulative = 0;
+  for (const dur of hlDurations) {
+    hlOffsets.push(cumulative);
+    cumulative += dur;
+  }
+
   // Animated gradient — hue rotates slowly over time
   const gradAngle = interpolate(frame, [0, durationInFrames], [125, 200], {
     extrapolateRight: "clamp",
@@ -123,32 +143,37 @@ export const CastVideo: React.FC<CastProps> = ({
         <TitleCard title={title} subtitle={subtitle} />
       </Sequence>
 
-      {highlights.map((h, i) => (
-        <Sequence
-          key={i}
-          from={titleFrames + i * highlightFrames}
-          durationInFrames={highlightFrames}
-        >
-          {h.videoSrc ? (
-            <BrowserHighlightClip
-              highlight={h}
-              index={i}
-              total={highlights.length}
-              transition={TRANSITIONS[i % TRANSITIONS.length]}
-            />
-          ) : (
-            <HighlightClip
-              highlight={h}
-              index={i}
-              total={highlights.length}
-              transition={TRANSITIONS[i % TRANSITIONS.length]}
-            />
-          )}
-        </Sequence>
-      ))}
+      {highlights.map((h, i) => {
+        const dur = getHighlightDuration(h);
+        return (
+          <Sequence
+            key={i}
+            from={titleFrames + hlOffsets[i]}
+            durationInFrames={hlDurations[i]}
+          >
+            {h.videoSrc ? (
+              <BrowserHighlightClip
+                highlight={h}
+                index={i}
+                total={highlights.length}
+                transition={TRANSITIONS[i % TRANSITIONS.length]}
+                durationSec={dur}
+              />
+            ) : (
+              <HighlightClip
+                highlight={h}
+                index={i}
+                total={highlights.length}
+                transition={TRANSITIONS[i % TRANSITIONS.length]}
+                durationSec={dur}
+              />
+            )}
+          </Sequence>
+        );
+      })}
 
       <Sequence
-        from={titleFrames + highlights.length * highlightFrames}
+        from={titleFrames + cumulative}
         durationInFrames={endFrames}
       >
         <EndCard text={endText || title} url={endUrl} />
@@ -325,12 +350,15 @@ const Cursor: React.FC<{ visible: boolean; blink?: boolean }> = ({
 
 // ─── Text Overlay (colored accent words) ──────────────────
 
-const TextOverlay: React.FC<{ text: string }> = ({ text }) => {
+const TextOverlay: React.FC<{ text: string; durationSec: number }> = ({
+  text,
+  durationSec,
+}) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
   const showAt = fps * 1.8;
-  const hideAt = fps * (HIGHLIGHT_DUR - 0.8);
+  const hideAt = fps * (durationSec - 0.8);
 
   const enterProgress = spring({
     fps,
@@ -472,7 +500,8 @@ const HighlightClip: React.FC<{
   index: number;
   total: number;
   transition: TransitionStyle;
-}> = ({ highlight, index, total, transition }) => {
+  durationSec: number;
+}> = ({ highlight, index, total, transition, durationSec }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -491,7 +520,7 @@ const HighlightClip: React.FC<{
   });
   const fadeOut = interpolate(
     frame,
-    [fps * (HIGHLIGHT_DUR - TRANSITION_DUR), fps * HIGHLIGHT_DUR],
+    [fps * (durationSec - TRANSITION_DUR), fps * durationSec],
     [1, 0],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
@@ -510,7 +539,7 @@ const HighlightClip: React.FC<{
   );
   const zoomOut = interpolate(
     frame,
-    [fps * 2.5, fps * (HIGHLIGHT_DUR - 0.5)],
+    [fps * 2.5, fps * (durationSec - 0.5)],
     [1.12, 1.02],
     {
       extrapolateLeft: "clamp",
@@ -523,7 +552,7 @@ const HighlightClip: React.FC<{
   // Vertical pan
   const panY = interpolate(
     frame,
-    [fps * 0.8, fps * 2.0, fps * 3.5],
+    [fps * 0.8, fps * 2.0, fps * (durationSec - 1.0)],
     [0, -15, 5],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
@@ -737,7 +766,9 @@ const HighlightClip: React.FC<{
       <MousePointer />
 
       {/* Text overlay */}
-      {highlight.overlay && <TextOverlay text={highlight.overlay} />}
+      {highlight.overlay && (
+        <TextOverlay text={highlight.overlay} durationSec={durationSec} />
+      )}
     </AbsoluteFill>
   );
 };
@@ -749,7 +780,8 @@ const BrowserHighlightClip: React.FC<{
   index: number;
   total: number;
   transition: TransitionStyle;
-}> = ({ highlight, index, total, transition }) => {
+  durationSec: number;
+}> = ({ highlight, index, total, transition, durationSec }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -766,33 +798,37 @@ const BrowserHighlightClip: React.FC<{
   });
   const fadeOut = interpolate(
     frame,
-    [fps * (HIGHLIGHT_DUR - TRANSITION_DUR), fps * HIGHLIGHT_DUR],
+    [fps * (durationSec - TRANSITION_DUR), 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.08], {
+  // Focal zoom — applied to video content only, not browser chrome
+  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 zoomOut = interpolate(
+  const focalZoomOut = interpolate(
     frame,
-    [fps * 2.5, fps * (HIGHLIGHT_DUR - 0.5)],
-    [1.08, 1.01],
+    [fps * 3.5, fps * (durationSec - 0.5)],
+    [1.15, 1.02],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: Easing.inOut(Easing.cubic),
     }
   );
-  const zoom = frame < fps * 2.5 ? zoomIn : zoomOut;
+  const focalZoom = frame < fps * 3.5 ? focalZoomIn : focalZoomOut;
 
+  // Entry pan
   const panY = interpolate(
     frame,
-    [fps * 0.8, fps * 2.0, fps * 3.5],
+    [fps * 1.0, fps * 3.0, fps * (durationSec - 1.0)],
     [0, -10, 5],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
@@ -860,7 +896,7 @@ const BrowserHighlightClip: React.FC<{
       >
         <div
           style={{
-            transform: `scale(${entry.scale * zoom}) translate(${entry.x}px, ${entry.y + panY}px)`,
+            transform: `scale(${entry.scale}) translate(${entry.x}px, ${entry.y + panY}px)`,
             transformOrigin: "center center",
             width: 880,
             borderRadius: 14,
@@ -882,7 +918,6 @@ const BrowserHighlightClip: React.FC<{
             <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" }} />
-            {/* Address bar */}
             <div
               style={{
                 flex: 1,
@@ -899,33 +934,174 @@ const BrowserHighlightClip: React.FC<{
             </div>
           </div>
 
-          {/* Video content */}
+          {/* Video content — focal zoom applied here, chrome stays static */}
           <div
             style={{
               width: "100%",
               aspectRatio: "16/10",
               backgroundColor: "#fff",
               overflow: "hidden",
+              position: "relative",
             }}
           >
-            <OffthreadVideo
-              src={staticFile(videoSrc)}
-              startFrom={startFrom}
-              style={{ width: "100%", height: "100%", objectFit: "cover" }}
-            />
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                transform: `scale(${focalZoom})`,
+                transformOrigin: `${fx * 100}% ${fy * 100}%`,
+                position: "relative",
+              }}
+            >
+              <OffthreadVideo
+                src={staticFile(videoSrc)}
+                startFrom={startFrom}
+                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              />
+              {/* Click cursor — inside zoom container so it tracks with content */}
+              {highlight.clicks && highlight.clicks.length > 0 && (
+                <BrowserCursor
+                  clicks={highlight.clicks}
+                  durationSec={durationSec}
+                />
+              )}
+            </div>
           </div>
         </div>
       </AbsoluteFill>
 
-      {/* Mouse pointer */}
-      <MousePointer />
-
       {/* Text overlay */}
-      {highlight.overlay && <TextOverlay text={highlight.overlay} />}
+      {highlight.overlay && (
+        <TextOverlay text={highlight.overlay} durationSec={durationSec} />
+      )}
     </AbsoluteFill>
   );
 };
 
+// ─── Browser Cursor (click-tracking) ─────────────────────
+
+const BrowserCursor: React.FC<{
+  clicks: ClickEvent[];
+  durationSec: number;
+}> = ({ clicks, durationSec }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  if (!clicks || clicks.length === 0) return null;
+
+  const currentSec = frame / fps;
+  const scaleX = VIDEO_AREA_W / VIEWPORT_W;
+  const scaleY = VIDEO_AREA_H / VIEWPORT_H;
+
+  // Determine cursor position by interpolating between clicks
+  let targetX: number;
+  let targetY: number;
+
+  if (currentSec <= clicks[0].timeSec) {
+    // Before first click — hold at first position
+    targetX = clicks[0].x * scaleX;
+    targetY = clicks[0].y * scaleY;
+  } else if (currentSec >= clicks[clicks.length - 1].timeSec) {
+    // After last click — hold at last position
+    targetX = clicks[clicks.length - 1].x * scaleX;
+    targetY = clicks[clicks.length - 1].y * scaleY;
+  } else {
+    // Between clicks — interpolate with easing
+    let prevIdx = 0;
+    for (let i = 1; i < clicks.length; i++) {
+      if (clicks[i].timeSec > currentSec) break;
+      prevIdx = i;
+    }
+    const nextIdx = Math.min(prevIdx + 1, clicks.length - 1);
+    const prev = clicks[prevIdx];
+    const next = clicks[nextIdx];
+    const t = (currentSec - prev.timeSec) / (next.timeSec - prev.timeSec || 1);
+    const eased = Easing.inOut(Easing.cubic)(Math.min(1, t));
+    targetX = interpolate(eased, [0, 1], [prev.x * scaleX, next.x * scaleX]);
+    targetY = interpolate(eased, [0, 1], [prev.y * scaleY, next.y * scaleY]);
+  }
+
+  // Click detection — within 3 frames of a click event
+  const clickWindow = 3 / fps;
+  const isClicking = clicks.some(
+    (c) => Math.abs(currentSec - c.timeSec) < clickWindow
+  );
+
+  // Fade in over first 0.3s, fade out after last click
+  const lastClickTime = clicks[clicks.length - 1].timeSec;
+  const fadeIn = interpolate(currentSec, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const fadeOut = interpolate(
+    currentSec,
+    [lastClickTime + 0.3, lastClickTime + 0.8],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const opacity = Math.min(fadeIn, fadeOut);
+
+  if (opacity <= 0) return null;
+
+  return (
+    <>
+      {/* Click ripples */}
+      {clicks.map((click, i) => {
+        const rippleDuration = 0.4;
+        if (currentSec < click.timeSec || currentSec > click.timeSec + rippleDuration)
+          return null;
+
+        const progress = (currentSec - click.timeSec) / rippleDuration;
+        const rippleScale = interpolate(progress, [0, 1], [0.5, 2.5]);
+        const rippleOpacity = interpolate(progress, [0, 0.3, 1], [0.6, 0.4, 0]);
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: click.x * scaleX - 15,
+              top: click.y * scaleY - 15,
+              width: 30,
+              height: 30,
+              borderRadius: "50%",
+              border: `2px solid ${ACCENT}`,
+              transform: `scale(${rippleScale})`,
+              opacity: rippleOpacity,
+              pointerEvents: "none",
+              zIndex: 49,
+            }}
+          />
+        );
+      })}
+
+      {/* Cursor */}
+      <div
+        style={{
+          position: "absolute",
+          left: targetX,
+          top: targetY,
+          zIndex: 50,
+          opacity,
+          transform: `scale(${isClicking ? 0.85 : 1})`,
+          transformOrigin: "top left",
+          pointerEvents: "none",
+        }}
+      >
+        <svg width="24" height="28" viewBox="0 0 24 28" fill="none">
+          <path
+            d="M2 2L2 22L7.5 16.5L12.5 26L16 24.5L11 15H19L2 2Z"
+            fill="white"
+            stroke="black"
+            strokeWidth="1.5"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    </>
+  );
+};
+
 // ─── End Card (CTA) ───────────────────────────────────────
 
 const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {

package/src/Root.tsx

@@ -15,8 +15,11 @@ export const RemotionRoot: React.FC = () => {
       calculateMetadata={({ props }: { props: CastProps }) => {
         const fps = 30;
         const titleFrames = Math.round(2.5 * fps);
-        const highlightFrames = Math.round(4 * fps) * props.highlights.length;
-        const endFrames = Math.round(2.5 * fps);
+        const highlightFrames = props.highlights.reduce((sum, h) => {
+          const dur = h.videoSrc ? 7.0 : 4.5;
+          return sum + Math.round(dur * fps);
+        }, 0);
+        const endFrames = Math.round(3.5 * fps);
         return {
           durationInFrames: titleFrames + highlightFrames + endFrames,
         };

package/src/types.ts

@@ -1,3 +1,9 @@
+export interface ClickEvent {
+  x: number; // viewport X (0-1280)
+  y: number; // viewport Y (0-800)
+  timeSec: number; // seconds relative to highlight start
+}
+
 // A highlight is one "moment" in the demo.
 // Either terminal lines (CLI demo) or a video clip (browser demo).
 export interface Highlight {
@@ -12,6 +18,9 @@ export interface Highlight {
   videoSrc?: string; // path to video file (served via staticFile)
   videoStartSec?: number; // trim: start time in seconds
   videoEndSec?: number; // trim: end time in seconds
+  focusX?: number; // 0-1, focal point X for zoom (default 0.5)
+  focusY?: number; // 0-1, focal point Y for zoom (default 0.5)
+  clicks?: ClickEvent[]; // click positions for cursor animation
 }
 
 export interface TermLine {