marketing: v3.1 launch video — 30s Remotion render

Six-scene 30-second MP4 announcing v3.1 (competitors mode) for X. Lives at marketing/v3.1-launch/. Renders to out/last30days-v3.1-launch.mp4 (gitignored). 1920×1080 @ 30fps, H.264, ~3MB final. Six scenes: 1. Hook (0-3s): badge + "What if one search ran 3 at once?" 2. Old way (3-8s): single terminal /last30days OpenAI 3. Fan-out (8-14s): --competitors splits into 3 parallel panes 4. Comparison (14-21s): 3 panes collapse into Head-to-Head table 5. How (21-26s): "You pick the topic. Agent picks peers. Engine fans out." 6. CTA (26-30s): install command + repo URL Reusable components: TerminalWindow, TypedLine, BadgeBar, ComparisonTable. Scene timing in src/lib/timing.ts as single source of truth — one edit to retime everything. Marketing version 3.1 ≠ engine code version (still 3.0.14). 3.1 is the launch label that bundles 3.0.11-3.0.14 into one shippable narrative. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 21:48:02 -07:00
parent 949bcf8942
commit b31ec05c74
21 changed files with 1561 additions and 0 deletions
@@ -28,3 +28,9 @@ htmlcov/

 # Internal planning docs (ce:plan output) — keep local, don't publish
 docs/plans/
+
+# Marketing video build artifacts
+marketing/v3.1-launch/node_modules/
+marketing/v3.1-launch/out/
+marketing/*/node_modules/
+marketing/*/out/
@@ -0,0 +1,396 @@
+---
+title: "marketing: v3.1 launch video — 30s Remotion piece for X"
+type: feat
+status: active
+date: 2026-04-22
+---
+
+# marketing: v3.1 launch video — 30s Remotion piece for X
+
+## Overview
+
+Build a 30-second Remotion-rendered MP4 marketing video announcing **v3.1: Competitors mode** for `/last30days`. Posts to X. Frames the new vs-mode-with-auto-discovery as the headline — three full passes, three save files, one comparison — without burying it in CLI minutiae.
+
+Marketing release tag is **v3.1** (rebrands the 3.0.11-3.0.14 bundle into one shippable narrative for the launch tweet). Engine version stays 3.0.14 — `3.1` is the marketing version, not a code version bump.
+
+## Script (60 frames per second × 30 seconds = 900 frames; this version assumes 30fps × 30s = 900 frames at 30fps)
+
+Total runtime: 30.0 seconds @ 30fps = 900 frames. Six scenes, on-screen text only (silent autoplay-friendly).
+
+### Scene 1 — Hook (0:00 – 0:03 | frames 0-90)
+
+**Visual:** Black background. The `/last30days` badge animates in (the literal `🌐 last30days v3.1 · synced 2026-04-22` line) with the spring scale-in used in slick devtool intros.
+
+**Caption (overlay, large):**
+```
+What if one search
+ran 3 at once?
+```
+
+### Scene 2 — Set the world (0:03 – 0:08 | frames 90-240)
+
+**Visual:** Single mac terminal window center-stage. Type-on animation:
+```
+$ /last30days OpenAI
+```
+Below it, a simple result card stub appears (Reddit upvote count + X likes), then static.
+
+**Caption (small bottom-left):**
+```
+The old way: one topic.
+```
+
+### Scene 3 — The reveal (0:08 – 0:14 | frames 240-420)
+
+**Visual:** The terminal types one more flag:
+```
+$ /last30days OpenAI --competitors
+```
+Hard cut → the single terminal **splits into 3 panes** side by side. Each pane shows a different topic header animating in, in this order:
+- Left: `OpenAI`
+- Middle: `vs Anthropic`
+- Right: `vs xAI`
+
+Pane content scrolls fake "search progress" lines (Reddit, X, YouTube indicators) in parallel, like a live fan-out.
+
+**Caption (top center):**
+```
+Now it discovers competitors
+and runs all 3.
+```
+
+### Scene 4 — Result reveal (0:14 – 0:21 | frames 420-630)
+
+**Visual:** The 3 panes collapse into a single comparison surface — the `## Head-to-Head` table from the actual engine output, with rows fading in one by one (What it is, Streams, Best for, Trajectory). Each entity column lights up as its row populates.
+
+**Caption (bottom):**
+```
+3 full passes. 3 save files.
+1 comparison.
+```
+
+### Scene 5 — How it's special (0:21 – 0:26 | frames 630-780)
+
+**Visual:** Cut to a clean text card, large mono font:
+```
+You pick the topic.
+The agent picks the peers.
+The engine fans out.
+```
+Each line fades in 1.5s apart.
+
+### Scene 6 — CTA (0:26 – 0:30 | frames 780-900)
+
+**Visual:** Black background. Centered:
+- Top: `🌐 last30days v3.1`
+- Middle: `/last30days {topic} --competitors`
+- Bottom: `github.com/mvanhorn/last30days-skill`
+
+Subtle pulse on the install line.
+
+**End frame holds for ~0.5s.**
+
+## Problem Frame
+
+The 3.0.11-3.0.14 release bundle ships a transformative feature (per-entity vs-mode fanout + `--competitors` shortcut + per-entity save files), but the value lands flat in a tweet thread or screenshot. A 30s video does what static text cannot: shows the fan-out happening in real time and the 3 → 1 collapse into a comparison. Higher tweet engagement, easier to RT/QT.
+
+## Requirements Trace
+
+- R1. Final artifact: a single MP4 file, 1920×1080, 30fps, ~30 seconds (±0.5s), under 30MB, suitable for direct X upload.
+- R2. Six-scene script as defined above, with text/visuals/timing matching to within 5 frames.
+- R3. Branded look: matches the `🌐 last30days v3.1` badge style (terminal aesthetic, mono font, dark background).
+- R4. Silent — no voiceover, no music in v1. Captions baked in. Designed for autoplay-muted feeds.
+- R5. Reproducible: another contributor (or a future-me) can re-render with one command. Project lives in-repo so the source is versioned.
+
+## Scope Boundaries
+
+- No voiceover. Text-on-screen only. (Voice can be a v1.1 if engagement is high.)
+- No background music in the rendered MP4. (Music can be added in post via QuickTime/iMovie if desired before posting.)
+- No localization. English captions only.
+- No A/B test variants. One video.
+- No 9:16 vertical version. 16:9 only. (Vertical can be a separate render after launch validates the format.)
+
+### Deferred to Separate Tasks
+
+- Voiceover variant: defer to follow-up if v1 lands well.
+- 9:16 mobile cut: defer; same source compositions can re-render at 1080×1920 in a follow-up.
+- Animated GIF for embedding in README.md: defer; can be ffmpeg-extracted from the MP4.
+
+## Context & Research
+
+### Relevant Code and Patterns
+
+- `SKILL.md` — the comparison render scaffold (`## Head-to-Head` table) is the visual reference for Scene 4's table look.
+- `scripts/lib/render.py` `_render_comparison_scaffold` — emits the 9-axis table whose visual style we're recreating in a more polished form.
+- `CHANGELOG.md` 3.0.11-3.0.14 entries — the prose source for the script's beats.
+- `.claude-plugin/plugin.json` version 3.0.14 — current code version (marketing version is 3.1 for the launch).
+
+### External References
+
+- Remotion 4.x docs (https://www.remotion.dev/docs/) — current API for compositions, sequences, springs, and render CLI.
+- X video specs 2026: max 2 min 20 s, ≤512MB, MP4 with H.264 + AAC, recommended 1920×1080 for landscape autoplay.
+
+### Institutional Learnings
+
+- No prior `marketing/` dir or video plans in `docs/plans/`. This is a greenfield asset directory.
+
+## Key Technical Decisions
+
+- **Remotion, not ffmpeg-only.** Remotion's React-based compositions handle the typed-on terminal effect, spring-animated badges, and scene transitions far more cleanly than raw ffmpeg filtergraphs. Render output is still MP4 via Remotion's bundled ffmpeg.
+- **In-repo asset directory at `marketing/v3.1-launch/`.** Lives with the product so future versions can fork the project. Adds `marketing/` to `.gitignore` exceptions only for source files; rendered MP4 stays out of git (uploaded separately).
+- **16:9 1920×1080 @ 30fps.** Best fit for X landscape autoplay on desktop and mobile feed. 30fps is plenty for typed-text + UI animation; 60fps doubles render time without obvious quality gain.
+- **Silent + captions.** X autoplay defaults to muted. Sound-off is the realistic viewing condition. Captions baked into the visual.
+- **Six scenes, one composition.** Single Remotion composition with sequenced child compositions per scene. Easier to re-time than scene-files. Frame-numbered timing in the script enables precise edits.
+- **Mono font (JetBrains Mono or Geist Mono).** Matches the terminal aesthetic of the actual `/last30days` output. Available via Google Fonts or @remotion/google-fonts.
+- **Marketing version 3.1 ≠ engine version 3.0.14.** `3.1` is the launch label. Engine stays 3.0.14. Avoids confusion in CHANGELOG.
+
+## Open Questions
+
+### Resolved During Planning
+
+- **Aspect ratio?** 16:9 1080p. Best X autoplay format; vertical can be a follow-up.
+- **Voiceover or silent?** Silent + on-screen captions. Autoplay-muted is the realistic condition.
+- **In-repo or separate repo?** In-repo at `marketing/v3.1-launch/`. Rendered MP4 not committed; source compositions are.
+- **Length?** Exactly 30s (900 frames @ 30fps). No flex.
+- **Marketing version label?** `v3.1`. Engine code version stays 3.0.14.
+
+### Deferred to Implementation
+
+- Exact animation easing curves per scene — pick during build via Remotion preview iteration.
+- Whether the comparison-table mock in Scene 4 uses canned text or pulls from the actual saved `*-raw.md` files. Probably canned for visual control.
+- Whether Scene 3's "search progress" lines are typed individually or use a marquee scroll. Pick during preview.
+- Exact accent color palette beyond "terminal dark." Iterate against preview.
+
+## Output Structure
+
+    marketing/
+      v3.1-launch/
+        package.json                  # Remotion dependency manifest
+        tsconfig.json                 # TypeScript config
+        remotion.config.ts            # Remotion render config (codec, fps, resolution)
+        src/
+          index.ts                    # Remotion entry — registers compositions
+          Root.tsx                    # Root composition definition
+          LaunchVideo.tsx             # Main 30s composition that sequences scenes
+          scenes/
+            Scene1Hook.tsx
+            Scene2OldWay.tsx
+            Scene3FanOut.tsx
+            Scene4Comparison.tsx
+            Scene5HowItWorks.tsx
+            Scene6CTA.tsx
+          components/
+            TerminalWindow.tsx        # Reusable mac-style terminal frame
+            TypedLine.tsx             # Type-on animation primitive
+            ComparisonTable.tsx       # The Head-to-Head table mock
+            BadgeBar.tsx              # The 🌐 last30days v3.1 badge
+          lib/
+            timing.ts                 # Frame ranges per scene (single source of truth)
+            colors.ts                 # Brand palette
+        public/                       # Static assets (logo, fonts if local)
+        out/                          # Rendered MP4 lives here (gitignored)
+        README.md                     # How to preview/render
+
+## High-Level Technical Design
+
+> *Directional guidance for review — not implementation specification.*
+
+```
+LaunchVideo (durationInFrames = 900)
+├── <Sequence from={0} durationInFrames={90}>     <Scene1Hook />
+├── <Sequence from={90} durationInFrames={150}>   <Scene2OldWay />
+├── <Sequence from={240} durationInFrames={180}>  <Scene3FanOut />
+├── <Sequence from={420} durationInFrames={210}>  <Scene4Comparison />
+├── <Sequence from={630} durationInFrames={150}>  <Scene5HowItWorks />
+└── <Sequence from={780} durationInFrames={120}>  <Scene6CTA />
+```
+
+Per-scene components use `useCurrentFrame()` + `interpolate()` + `spring()` for timing. `TerminalWindow` is the dominant motif across scenes 2-4.
+
+## Implementation Units
+
+- [ ] **Unit 1: Remotion project scaffold**
+
+**Goal:** Spin up a working Remotion project at `marketing/v3.1-launch/` that previews a blank composition and renders to MP4.
+
+**Requirements:** R1, R5
+
+**Files:**
+- Create: `marketing/v3.1-launch/package.json`
+- Create: `marketing/v3.1-launch/tsconfig.json`
+- Create: `marketing/v3.1-launch/remotion.config.ts`
+- Create: `marketing/v3.1-launch/src/index.ts`
+- Create: `marketing/v3.1-launch/src/Root.tsx`
+- Create: `marketing/v3.1-launch/README.md`
+- Modify: `.gitignore` (add `marketing/v3.1-launch/out/`, `marketing/v3.1-launch/node_modules/`)
+
+**Approach:**
+- Use `npx create-video@latest --blank` (Remotion 4.x scaffolding) targeting `marketing/v3.1-launch/`. Strip the demo composition.
+- Configure: 1920×1080, 30fps, H.264, AAC (audio codec needed even for silent — empty track).
+- README documents `npm install`, `npm run preview` (Remotion Studio), `npm run render` (one-command MP4).
+
+**Test scenarios:**
+- Test expectation: none for scaffold, but verification = `npm run preview` opens Remotion Studio with a blank 30s composition; `npm run render` produces a black MP4 at the right resolution.
+
+**Verification:**
+- Studio loads at localhost:3000 with the empty `LaunchVideo` composition listed.
+- A render produces `out/launch-video.mp4` at 1920×1080, 30s, valid MP4.
+
+- [ ] **Unit 2: Reusable components (Terminal, TypedLine, BadgeBar)**
+
+**Goal:** Build the three primitive components scenes 2-6 will compose. Each is independently previewable.
+
+**Requirements:** R3, R5
+
+**Dependencies:** Unit 1
+
+**Files:**
+- Create: `marketing/v3.1-launch/src/components/TerminalWindow.tsx`
+- Create: `marketing/v3.1-launch/src/components/TypedLine.tsx`
+- Create: `marketing/v3.1-launch/src/components/BadgeBar.tsx`
+- Create: `marketing/v3.1-launch/src/lib/colors.ts`
+- Create: `marketing/v3.1-launch/src/lib/timing.ts`
+
+**Approach:**
+- `TerminalWindow`: mac-style traffic-light header, dark gradient background, mono content area. Accepts children.
+- `TypedLine`: takes a string and a `startFrame`, renders character-by-character at ~30 chars/sec. Reuses Remotion's `interpolate(useCurrentFrame() - startFrame, [0, lengthFrames], [0, text.length])` clamped.
+- `BadgeBar`: renders the literal `🌐 last30days v3.1 · synced 2026-04-22` line in mono with the same gradient color treatment as the engine's compact emit.
+- `colors.ts`: 5-7 brand colors (terminal-bg, terminal-fg, accent-cyan, accent-magenta, muted, success-green, warning-amber).
+- `timing.ts`: exports the scene frame ranges as named constants. Single source of truth for any retiming.
+
+**Test scenarios:**
+- Test expectation: none — visual components verified in Remotion Studio.
+
+**Verification:**
+- Each component renders standalone in Studio when wrapped in a temporary preview composition.
+- TypedLine animates character-by-character without flicker.
+
+- [ ] **Unit 3: Scenes 1-3 (Hook, Old way, Fan-out reveal)**
+
+**Goal:** Build the first half of the video (frames 0-420). The narrative arc up through the visual fan-out.
+
+**Requirements:** R2
+
+**Dependencies:** Unit 2
+
+**Files:**
+- Create: `marketing/v3.1-launch/src/scenes/Scene1Hook.tsx`
+- Create: `marketing/v3.1-launch/src/scenes/Scene2OldWay.tsx`
+- Create: `marketing/v3.1-launch/src/scenes/Scene3FanOut.tsx`
+- Modify: `marketing/v3.1-launch/src/Root.tsx` (register sequences)
+
+**Approach:**
+- Scene 1: spring-in BadgeBar, large overlay caption, 3-second hold.
+- Scene 2: TerminalWindow with TypedLine (`$ /last30days OpenAI`), then a single result-card mock fading in.
+- Scene 3: typing animation appends `--competitors`, hard cut, three TerminalWindow components arranged in a row with staggered fade-in. Each pane shows a different entity header + scrolling progress lines.
+
+**Test scenarios:**
+- Test expectation: none — verified visually in Studio.
+
+**Verification:**
+- Scrub the 0-14s range in Studio; visuals match the script timing within 5 frames.
+- The fan-out moment (frame 240) lands cleanly; no jank in the transition from 1 → 3 panes.
+
+- [ ] **Unit 4: Scenes 4-6 (Comparison reveal, How it works, CTA)**
+
+**Goal:** Build the back half of the video (frames 420-900). Resolution + payoff + call to action.
+
+**Requirements:** R2
+
+**Dependencies:** Unit 2
+
+**Files:**
+- Create: `marketing/v3.1-launch/src/scenes/Scene4Comparison.tsx`
+- Create: `marketing/v3.1-launch/src/scenes/Scene5HowItWorks.tsx`
+- Create: `marketing/v3.1-launch/src/scenes/Scene6CTA.tsx`
+- Create: `marketing/v3.1-launch/src/components/ComparisonTable.tsx`
+
+**Approach:**
+- Scene 4: ComparisonTable component renders 3-column markdown-style table; rows fade in one by one (stagger 15-20 frames). Uses canned data — OpenAI / Anthropic / xAI with believable cell content drawn from real 3.0.13 outputs.
+- Scene 5: three-line text card; lines fade in 45 frames apart.
+- Scene 6: three centered text blocks; install line gets a 1Hz subtle opacity pulse for emphasis.
+
+**Test scenarios:**
+- Test expectation: none — verified visually.
+
+**Verification:**
+- Scrub 14-30s; table reveal feels paced (not too slow, not strobed); CTA holds long enough to read (~3-4s).
+- ComparisonTable cells are legible at 1920×1080 (mono font ≥ 28px).
+
+- [ ] **Unit 5: Final composition wiring + render**
+
+**Goal:** Wire the six scenes into the master `LaunchVideo` composition, render to MP4, verify against X upload constraints.
+
+**Requirements:** R1, R2, R5
+
+**Dependencies:** Units 3, 4
+
+**Files:**
+- Modify: `marketing/v3.1-launch/src/LaunchVideo.tsx` (sequence all 6 scenes)
+- Modify: `marketing/v3.1-launch/README.md` (add render command + verification checklist)
+
+**Approach:**
+- `LaunchVideo` is a single Composition that imports `Scene1Hook` … `Scene6CTA` and wraps each in `<Sequence from=… durationInFrames=…>` matching `lib/timing.ts`.
+- Run `npx remotion render LaunchVideo out/last30days-v3.1-launch.mp4 --codec=h264 --crf=18`.
+- Verify output: 30.0s ±0.1s, 1920×1080, file size <30MB, opens in QuickTime, plays without dropped frames.
+
+**Test scenarios:**
+- Test expectation: none — verification is the rendered MP4 itself.
+
+**Verification:**
+- `ffprobe out/last30days-v3.1-launch.mp4` reports 1920×1080, 30fps, ~30.0s, h264, faststart-friendly.
+- Manual play-through end-to-end in QuickTime feels coherent and on-pace.
+- File <30MB so X upload is instant.
+
+- [ ] **Unit 6: Polish pass + ship**
+
+**Goal:** Watch the full render, fix obvious jank, do a second render, and stage for X posting.
+
+**Requirements:** R1, R2, R3
+
+**Dependencies:** Unit 5
+
+**Files:**
+- Possibly modify: any scene file based on watch-through findings.
+
+**Approach:**
+- Watch the rendered MP4 at full size. Note: timing felt off, transitions too fast, captions overflow, color clash, anything visibly broken.
+- Iterate: edit scene component → re-preview in Studio → re-render full MP4.
+- Cap at 2 polish passes; ship the better of the two renders.
+- Final MP4 sits at `marketing/v3.1-launch/out/last30days-v3.1-launch.mp4` ready for X upload.
+
+**Test scenarios:**
+- Test expectation: none — pure subjective polish.
+
+**Verification:**
+- User watches the final render and approves.
+- No glaring visual bugs (overflowing text, frozen frames, color clashes).
+
+## System-Wide Impact
+
+- **Interaction graph:** None — this is a standalone marketing artifact. Doesn't touch the Python engine, doesn't change any user-facing behavior.
+- **State lifecycle risks:** None.
+- **API surface parity:** N/A.
+- **Unchanged invariants:** The shipped 3.0.14 engine is untouched.
+
+## Risks & Dependencies
+
+| Risk | Mitigation |
+|------|------------|
+| Remotion install pulls 200MB+ of node_modules. | `marketing/v3.1-launch/node_modules/` in `.gitignore`; checked-in source stays small. |
+| Render time blows past patience (>5 min for 30s @ 1080p30). | Bun-based render or `--concurrency` flag. Default Remotion is fast enough on M-series Macs. If slow, lower preview to 720p, render final at 1080p. |
+| Captions overflow the 1920px width on certain fonts. | Use a known mono font with a measured per-character width; cap caption lines at 36 chars. |
+| The "fan-out" visual in Scene 3 looks confusing instead of magical. | Polish pass (Unit 6) is the safety net; if still bad, fall back to a simpler "1 → 3 panes wipe" instead of typed split. |
+| File size >30MB hits X upload friction. | Use `--crf=18` (high quality, reasonable size); fall back to `--crf=23` if over. 30s @ 1080p30 H.264 is normally 5-15MB. |
+
+## Documentation / Operational Notes
+
+- README at `marketing/v3.1-launch/README.md` documents preview / render commands.
+- After render, the MP4 is uploaded directly to X. Tweet copy is the user's call (this plan stops at the rendered file).
+
+## Sources & References
+
+- Related code: `scripts/lib/render.py` (`_render_comparison_scaffold` is the visual model for Scene 4); `SKILL.md` Competitor mode section (the narrative source).
+- Related PRs: #308, #311, #312 (the 3.0.11 → 3.0.14 release bundle this video markets as "v3.1").
+- External docs: https://www.remotion.dev/docs/ (Remotion 4.x API).
+- X video specs: https://help.x.com/en/using-x/twitter-videos.
@@ -0,0 +1,37 @@
+# /last30days v3.1 Launch Video
+
+30-second Remotion-rendered MP4 announcing **v3.1: Competitors mode** for posting on X.
+
+## Quick start
+
+```bash
+cd marketing/v3.1-launch
+npm install            # one-time, ~200MB of node_modules
+npm run preview        # opens Remotion Studio at localhost:3000 to scrub frames
+npm run render         # writes out/last30days-v3.1-launch.mp4 (high quality, CRF 18)
+npm run render:fast    # writes a CRF 23 preview for fast iteration
+```
+
+## Specs
+
+- 1920×1080, 30fps, 30 seconds (900 frames)
+- H.264 / MP4
+- Silent (autoplay-muted-friendly; captions baked in)
+- Marketing label `v3.1` (engine code version stays 3.0.14)
+
+## Scene timing (single source of truth: `src/lib/timing.ts`)
+
+| Scene | Frames | Time | What |
+|-------|--------|------|------|
+| 1. Hook | 0-89 | 0.0-3.0s | Badge animates in + "What if one search ran 3 at once?" |
+| 2. Old way | 90-239 | 3.0-8.0s | Single terminal: `/last30days OpenAI` |
+| 3. Fan-out | 240-419 | 8.0-14.0s | `--competitors` types in → splits into 3 panes |
+| 4. Comparison | 420-629 | 14.0-21.0s | 3 panes collapse into Head-to-Head table |
+| 5. How | 630-779 | 21.0-26.0s | 3-line text card |
+| 6. CTA | 780-899 | 26.0-30.0s | Install command + repo URL |
+
+Edit `src/lib/timing.ts` to retime scenes; the `LaunchVideo` composition reads from there.
+
+## Output
+
+Rendered MP4 lives at `out/last30days-v3.1-launch.mp4` (gitignored). Upload directly to X.
@@ -0,0 +1,23 @@
+{
+  "name": "last30days-v3-1-launch-video",
+  "version": "0.1.0",
+  "private": true,
+  "description": "30s Remotion launch video for /last30days v3.1 (competitors mode).",
+  "scripts": {
+    "preview": "remotion studio src/index.ts",
+    "render": "remotion render src/index.ts LaunchVideo out/last30days-v3.1-launch.mp4 --codec=h264 --crf=18",
+    "render:fast": "remotion render src/index.ts LaunchVideo out/last30days-v3.1-launch-preview.mp4 --codec=h264 --crf=23"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "remotion": "4.0.250",
+    "@remotion/cli": "4.0.250",
+    "@remotion/google-fonts": "4.0.250"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.0",
+    "@types/node": "22.10.0",
+    "typescript": "5.6.3"
+  }
+}
@@ -0,0 +1,6 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
+Config.setConcurrency(null);
+Config.setCodec("h264");
@@ -0,0 +1,35 @@
+import React from "react";
+import { AbsoluteFill, Sequence } from "remotion";
+import { SCENES } from "./lib/timing";
+import { Scene1Hook } from "./scenes/Scene1Hook";
+import { Scene2OldWay } from "./scenes/Scene2OldWay";
+import { Scene3FanOut } from "./scenes/Scene3FanOut";
+import { Scene4Comparison } from "./scenes/Scene4Comparison";
+import { Scene5HowItWorks } from "./scenes/Scene5HowItWorks";
+import { Scene6CTA } from "./scenes/Scene6CTA";
+import { COLORS } from "./lib/colors";
+
+export const LaunchVideo: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ background: COLORS.bgDeep }}>
+      <Sequence from={SCENES.hook.from} durationInFrames={SCENES.hook.durationInFrames}>
+        <Scene1Hook />
+      </Sequence>
+      <Sequence from={SCENES.oldWay.from} durationInFrames={SCENES.oldWay.durationInFrames}>
+        <Scene2OldWay />
+      </Sequence>
+      <Sequence from={SCENES.fanOut.from} durationInFrames={SCENES.fanOut.durationInFrames}>
+        <Scene3FanOut />
+      </Sequence>
+      <Sequence from={SCENES.comparison.from} durationInFrames={SCENES.comparison.durationInFrames}>
+        <Scene4Comparison />
+      </Sequence>
+      <Sequence from={SCENES.howItWorks.from} durationInFrames={SCENES.howItWorks.durationInFrames}>
+        <Scene5HowItWorks />
+      </Sequence>
+      <Sequence from={SCENES.cta.from} durationInFrames={SCENES.cta.durationInFrames}>
+        <Scene6CTA />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,19 @@
+import React from "react";
+import { Composition } from "remotion";
+import { LaunchVideo } from "./LaunchVideo";
+import { FPS, TOTAL_FRAMES } from "./lib/timing";
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="LaunchVideo"
+        component={LaunchVideo}
+        durationInFrames={TOTAL_FRAMES}
+        fps={FPS}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
+};
@@ -0,0 +1,68 @@
+import React from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { COLORS, FONT_MONO } from "../lib/colors";
+
+type Props = {
+  startFrame?: number;
+  size?: "small" | "large";
+};
+
+export const BadgeBar: React.FC<Props> = ({ startFrame = 0, size = "large" }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = Math.max(0, frame - startFrame);
+
+  const scale = spring({
+    frame: elapsed,
+    fps,
+    config: { damping: 12, stiffness: 90 },
+    from: 0.85,
+    to: 1,
+  });
+  const opacity = spring({
+    frame: elapsed,
+    fps,
+    config: { damping: 20 },
+    from: 0,
+    to: 1,
+  });
+
+  const fontSize = size === "large" ? 56 : 28;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transform: `scale(${scale})`,
+        opacity,
+        fontFamily: FONT_MONO,
+        fontSize,
+        color: COLORS.fgPrimary,
+        letterSpacing: 0.5,
+      }}
+    >
+      <span style={{ fontSize: fontSize * 1.1, marginRight: 16 }}>🌐</span>
+      <span>last30days</span>
+      <span
+        style={{
+          marginLeft: 14,
+          color: COLORS.accentCyan,
+          fontWeight: 600,
+        }}
+      >
+        v3.1
+      </span>
+      <span
+        style={{
+          marginLeft: 16,
+          color: COLORS.fgDim,
+          fontSize: fontSize * 0.55,
+        }}
+      >
+        · synced 2026-04-22
+      </span>
+    </div>
+  );
+};
@@ -0,0 +1,135 @@
+import React from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, FONT_MONO } from "../lib/colors";
+
+type Row = {
+  dimension: string;
+  cells: [string, string, string];
+};
+
+type Props = {
+  startFrame: number;
+  entities: [string, string, string];
+  rows: Row[];
+  rowStaggerFrames?: number;
+};
+
+export const ComparisonTable: React.FC<Props> = ({
+  startFrame,
+  entities,
+  rows,
+  rowStaggerFrames = 18,
+}) => {
+  const frame = useCurrentFrame();
+
+  const headerOpacity = interpolate(
+    frame - startFrame,
+    [0, 12],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  const colTemplate = "1.4fr 1fr 1fr 1fr";
+  const cellPad = "16px 22px";
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        background: COLORS.bgPanel,
+        borderRadius: 16,
+        border: `1px solid ${COLORS.border}`,
+        overflow: "hidden",
+        fontFamily: FONT_MONO,
+        boxShadow: "0 24px 60px rgba(0,0,0,0.6)",
+      }}
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: colTemplate,
+          background: COLORS.bgPanelSoft,
+          borderBottom: `1px solid ${COLORS.border}`,
+          opacity: headerOpacity,
+        }}
+      >
+        <div
+          style={{
+            padding: cellPad,
+            color: COLORS.fgMuted,
+            fontSize: 22,
+            fontWeight: 500,
+          }}
+        >
+          Dimension
+        </div>
+        {entities.map((entity, idx) => (
+          <div
+            key={entity}
+            style={{
+              padding: cellPad,
+              color: idx === 0 ? COLORS.accentCyan : COLORS.fgPrimary,
+              fontSize: 26,
+              fontWeight: 600,
+              borderLeft: `1px solid ${COLORS.border}`,
+            }}
+          >
+            {entity}
+          </div>
+        ))}
+      </div>
+      {rows.map((row, idx) => {
+        const rowStart = startFrame + 12 + idx * rowStaggerFrames;
+        const rowOpacity = interpolate(
+          frame - rowStart,
+          [0, 14],
+          [0, 1],
+          { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+        );
+        const rowSlide = interpolate(
+          frame - rowStart,
+          [0, 14],
+          [12, 0],
+          { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+        );
+        return (
+          <div
+            key={row.dimension}
+            style={{
+              display: "grid",
+              gridTemplateColumns: colTemplate,
+              borderBottom:
+                idx === rows.length - 1 ? "none" : `1px solid ${COLORS.border}`,
+              opacity: rowOpacity,
+              transform: `translateY(${rowSlide}px)`,
+            }}
+          >
+            <div
+              style={{
+                padding: cellPad,
+                color: COLORS.fgMuted,
+                fontSize: 22,
+              }}
+            >
+              {row.dimension}
+            </div>
+            {row.cells.map((cell, cellIdx) => (
+              <div
+                key={cellIdx}
+                style={{
+                  padding: cellPad,
+                  color: COLORS.fgPrimary,
+                  fontSize: 22,
+                  borderLeft: `1px solid ${COLORS.border}`,
+                  lineHeight: 1.35,
+                }}
+              >
+                {cell}
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
@@ -0,0 +1,95 @@
+import React from "react";
+import { COLORS, FONT_MONO } from "../lib/colors";
+
+type Props = {
+  title?: string;
+  width?: number | string;
+  height?: number | string;
+  children?: React.ReactNode;
+  glow?: boolean;
+};
+
+export const TerminalWindow: React.FC<Props> = ({
+  title = "/last30days",
+  width = "100%",
+  height = "100%",
+  children,
+  glow = false,
+}) => {
+  return (
+    <div
+      style={{
+        width,
+        height,
+        background: COLORS.bgPanel,
+        borderRadius: 16,
+        border: `1px solid ${COLORS.border}`,
+        boxShadow: glow
+          ? `0 0 60px ${COLORS.accentCyan}33, 0 24px 60px rgba(0,0,0,0.6)`
+          : "0 24px 60px rgba(0,0,0,0.6)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: FONT_MONO,
+      }}
+    >
+      <div
+        style={{
+          height: 36,
+          background: COLORS.bgPanelSoft,
+          borderBottom: `1px solid ${COLORS.border}`,
+          display: "flex",
+          alignItems: "center",
+          padding: "0 16px",
+          gap: 8,
+        }}
+      >
+        <span
+          style={{
+            width: 12,
+            height: 12,
+            borderRadius: 12,
+            background: COLORS.trafficRed,
+          }}
+        />
+        <span
+          style={{
+            width: 12,
+            height: 12,
+            borderRadius: 12,
+            background: COLORS.trafficYellow,
+          }}
+        />
+        <span
+          style={{
+            width: 12,
+            height: 12,
+            borderRadius: 12,
+            background: COLORS.trafficGreen,
+          }}
+        />
+        <span
+          style={{
+            marginLeft: 16,
+            color: COLORS.fgMuted,
+            fontSize: 14,
+            fontFamily: FONT_MONO,
+            letterSpacing: 0.5,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          padding: "20px 28px",
+          color: COLORS.fgPrimary,
+          overflow: "hidden",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,71 @@
+import React from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, FONT_MONO } from "../lib/colors";
+
+type Props = {
+  text: string;
+  startFrame: number;
+  charsPerSec?: number;
+  fontSize?: number;
+  color?: string;
+  prefix?: string;
+  prefixColor?: string;
+  showCursor?: boolean;
+  fps?: number;
+};
+
+export const TypedLine: React.FC<Props> = ({
+  text,
+  startFrame,
+  charsPerSec = 28,
+  fontSize = 32,
+  color = COLORS.fgPrimary,
+  prefix,
+  prefixColor = COLORS.accentGreen,
+  showCursor = true,
+  fps = 30,
+}) => {
+  const frame = useCurrentFrame();
+  const elapsed = Math.max(0, frame - startFrame);
+  const totalChars = text.length;
+  const lengthFrames = Math.ceil((totalChars / charsPerSec) * fps);
+  const visibleChars = Math.round(
+    interpolate(elapsed, [0, lengthFrames], [0, totalChars], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+  const visible = text.slice(0, visibleChars);
+  const done = visibleChars >= totalChars;
+  const cursorOn = showCursor && Math.floor(frame / 15) % 2 === 0;
+
+  return (
+    <div
+      style={{
+        fontFamily: FONT_MONO,
+        fontSize,
+        color,
+        whiteSpace: "pre",
+        lineHeight: 1.4,
+      }}
+    >
+      {prefix ? (
+        <span style={{ color: prefixColor, marginRight: 12 }}>{prefix}</span>
+      ) : null}
+      <span>{visible}</span>
+      {(!done || cursorOn) && (
+        <span
+          style={{
+            display: "inline-block",
+            width: fontSize * 0.55,
+            height: fontSize * 0.95,
+            background: color,
+            verticalAlign: "text-bottom",
+            marginLeft: 2,
+            opacity: cursorOn ? 0.85 : 0,
+          }}
+        />
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
@@ -0,0 +1,20 @@
+export const COLORS = {
+  bgDeep: "#0a0e14",
+  bgPanel: "#11161d",
+  bgPanelSoft: "#161c25",
+  fgPrimary: "#e6e6e6",
+  fgMuted: "#8a93a3",
+  fgDim: "#5b6573",
+  border: "#2a3340",
+  accentCyan: "#36d6f7",
+  accentMagenta: "#ff55a3",
+  accentGreen: "#5fff9f",
+  accentAmber: "#ffc857",
+  trafficRed: "#ff5f57",
+  trafficYellow: "#febc2e",
+  trafficGreen: "#28c840",
+} as const;
+
+export const FONT_MONO = '"JetBrains Mono", "SF Mono", "Menlo", monospace';
+export const FONT_SANS =
+  '"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
@@ -0,0 +1,13 @@
+// Single source of truth for scene frame ranges.
+// 30fps × 30s = 900 frames total.
+export const FPS = 30;
+export const TOTAL_FRAMES = 900;
+
+export const SCENES = {
+  hook: { from: 0, durationInFrames: 90 },
+  oldWay: { from: 90, durationInFrames: 150 },
+  fanOut: { from: 240, durationInFrames: 180 },
+  comparison: { from: 420, durationInFrames: 210 },
+  howItWorks: { from: 630, durationInFrames: 150 },
+  cta: { from: 780, durationInFrames: 120 },
+} as const;
@@ -0,0 +1,61 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { BadgeBar } from "../components/BadgeBar";
+import { COLORS, FONT_SANS } from "../lib/colors";
+
+export const Scene1Hook: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const captionOpacity = interpolate(frame, [20, 35, 75, 90], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const captionLift = spring({
+    frame: frame - 20,
+    fps,
+    config: { damping: 15, stiffness: 70 },
+    from: 16,
+    to: 0,
+  });
+
+  const badgeFadeOut = interpolate(frame, [70, 90], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(circle at 50% 40%, ${COLORS.bgPanelSoft} 0%, ${COLORS.bgDeep} 60%)`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 64,
+      }}
+    >
+      <div style={{ opacity: badgeFadeOut }}>
+        <BadgeBar />
+      </div>
+      <div
+        style={{
+          opacity: captionOpacity,
+          transform: `translateY(${captionLift}px)`,
+          fontFamily: FONT_SANS,
+          fontSize: 96,
+          fontWeight: 600,
+          color: COLORS.fgPrimary,
+          textAlign: "center",
+          letterSpacing: -1.5,
+          lineHeight: 1.1,
+          maxWidth: 1400,
+        }}
+      >
+        What if one search
+        <br />
+        ran <span style={{ color: COLORS.accentCyan }}>3 at once?</span>
+      </div>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,100 @@
+import React from "react";
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+import { TerminalWindow } from "../components/TerminalWindow";
+import { TypedLine } from "../components/TypedLine";
+import { COLORS, FONT_MONO, FONT_SANS } from "../lib/colors";
+
+export const Scene2OldWay: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const enter = interpolate(frame, [0, 20], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const slide = interpolate(frame, [0, 20], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Result card fades in after type completes (~70 frames)
+  const resultFade = interpolate(frame, [70, 95], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Caption appears late
+  const captionFade = interpolate(frame, [110, 130, 150], [0, 1, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: COLORS.bgDeep,
+        padding: 80,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          width: 1400,
+          height: 520,
+          opacity: enter,
+          transform: `translateY(${slide}px)`,
+        }}
+      >
+        <TerminalWindow title="bash">
+          <TypedLine
+            text="/last30days OpenAI"
+            startFrame={20}
+            prefix="$"
+            fontSize={42}
+          />
+          <div
+            style={{
+              opacity: resultFade,
+              marginTop: 36,
+              padding: "20px 24px",
+              background: COLORS.bgPanelSoft,
+              borderRadius: 12,
+              border: `1px solid ${COLORS.border}`,
+              fontFamily: FONT_MONO,
+              fontSize: 26,
+              color: COLORS.fgPrimary,
+              lineHeight: 1.6,
+            }}
+          >
+            <div style={{ color: COLORS.accentGreen }}>
+              ✅ All agents reported back!
+            </div>
+            <div style={{ color: COLORS.fgMuted, marginTop: 6 }}>
+              ├─ 🟠 Reddit: 14 threads
+            </div>
+            <div style={{ color: COLORS.fgMuted }}>
+              ├─ 🔵 X: 22 posts
+            </div>
+            <div style={{ color: COLORS.fgMuted }}>
+              └─ 🟡 HN: 1 story
+            </div>
+          </div>
+        </TerminalWindow>
+      </div>
+
+      <div
+        style={{
+          opacity: captionFade,
+          marginTop: 60,
+          fontFamily: FONT_SANS,
+          fontSize: 38,
+          color: COLORS.fgMuted,
+        }}
+      >
+        The old way: <span style={{ color: COLORS.fgPrimary }}>one topic.</span>
+      </div>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,221 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { TerminalWindow } from "../components/TerminalWindow";
+import { TypedLine } from "../components/TypedLine";
+import { COLORS, FONT_MONO, FONT_SANS } from "../lib/colors";
+
+const PROGRESS_LINES = [
+  { source: "Reddit", color: "#ff6a3d" },
+  { source: "X", color: "#36d6f7" },
+  { source: "YouTube", color: "#ff5757" },
+  { source: "TikTok", color: "#5fff9f" },
+  { source: "Instagram", color: "#ff55a3" },
+];
+
+const ENTITIES: { label: string; tag: string; accent: string }[] = [
+  { label: "OpenAI", tag: "$ /last30days OpenAI", accent: COLORS.accentCyan },
+  { label: "Anthropic", tag: "$ /last30days Anthropic", accent: COLORS.accentMagenta },
+  { label: "xAI", tag: "$ /last30days xAI", accent: COLORS.accentAmber },
+];
+
+const FanPane: React.FC<{
+  label: string;
+  tag: string;
+  accent: string;
+  panelStart: number;
+}> = ({ label, tag, accent, panelStart }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const localFrame = Math.max(0, frame - panelStart);
+
+  const enter = spring({
+    frame: localFrame,
+    fps,
+    config: { damping: 18, stiffness: 80 },
+    from: 0,
+    to: 1,
+  });
+  const slide = interpolate(localFrame, [0, 20], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        opacity: enter,
+        transform: `translateY(${slide}px)`,
+        height: 480,
+      }}
+    >
+      <TerminalWindow title={label} glow>
+        <div
+          style={{
+            color: accent,
+            fontSize: 18,
+            fontFamily: FONT_MONO,
+            marginBottom: 14,
+          }}
+        >
+          {tag}
+        </div>
+        <div
+          style={{
+            fontSize: 22,
+            color: COLORS.accentGreen,
+            fontFamily: FONT_MONO,
+            marginBottom: 12,
+          }}
+        >
+          [Competitors] running...
+        </div>
+        {PROGRESS_LINES.map((line, idx) => {
+          const lineStart = panelStart + 16 + idx * 6;
+          const lineFade = interpolate(
+            frame - lineStart,
+            [0, 8],
+            [0, 1],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+          );
+          // pulse the in-progress dot
+          const dotOn = Math.floor((frame - lineStart) / 6) % 2 === 0;
+          return (
+            <div
+              key={line.source}
+              style={{
+                opacity: lineFade,
+                fontFamily: FONT_MONO,
+                fontSize: 20,
+                color: COLORS.fgMuted,
+                display: "flex",
+                alignItems: "center",
+                marginBottom: 6,
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-block",
+                  width: 10,
+                  height: 10,
+                  borderRadius: 10,
+                  background: dotOn ? line.color : COLORS.bgPanelSoft,
+                  marginRight: 12,
+                  boxShadow: dotOn ? `0 0 10px ${line.color}` : "none",
+                }}
+              />
+              <span style={{ color: line.color, marginRight: 8 }}>
+                ►
+              </span>
+              <span>{line.source}</span>
+              <span style={{ marginLeft: "auto", color: COLORS.fgDim }}>
+                {dotOn ? "..." : "·"}
+              </span>
+            </div>
+          );
+        })}
+      </TerminalWindow>
+    </div>
+  );
+};
+
+export const Scene3FanOut: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // Phase 1 (0-30 frames): single terminal types --competitors flag
+  // Phase 2 (30+): split into 3 panes
+  const splitProgress = interpolate(frame, [30, 50], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const singleOpacity = interpolate(frame, [0, 8, 30, 45], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Caption fades in shortly after panes settle so it has time to read.
+  const captionFade = interpolate(frame, [60, 80], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: COLORS.bgDeep,
+        padding: 60,
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          opacity: captionFade,
+          textAlign: "center",
+          fontFamily: FONT_SANS,
+          fontSize: 42,
+          color: COLORS.fgPrimary,
+          marginBottom: 32,
+        }}
+      >
+        Now it discovers competitors
+        <br />
+        <span style={{ color: COLORS.accentCyan }}>and runs all 3.</span>
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          position: "relative",
+        }}
+      >
+        {/* Single terminal during phase 1, fades out as panes appear */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: singleOpacity,
+          }}
+        >
+          <div style={{ width: 1200, height: 380 }}>
+            <TerminalWindow title="bash">
+              <TypedLine
+                text="/last30days OpenAI --competitors"
+                startFrame={0}
+                prefix="$"
+                fontSize={42}
+              />
+            </TerminalWindow>
+          </div>
+        </div>
+
+        {/* Three panes fade in starting frame ~30 */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 24,
+            opacity: splitProgress,
+          }}
+        >
+          {ENTITIES.map((entity, idx) => (
+            <FanPane
+              key={entity.label}
+              label={entity.label}
+              tag={entity.tag}
+              accent={entity.accent}
+              panelStart={45 + idx * 8}
+            />
+          ))}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,105 @@
+import React from "react";
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+import { ComparisonTable } from "../components/ComparisonTable";
+import { COLORS, FONT_SANS } from "../lib/colors";
+
+const ROWS = [
+  {
+    dimension: "What it is",
+    cells: [
+      "GPT-5 leader, Plus + API",
+      "Claude 4, safety-first",
+      "Grok, X-native, fast",
+    ] as [string, string, string],
+  },
+  {
+    dimension: "30-day momentum",
+    cells: [
+      "GPT-5 launch wave",
+      "Claude 4.7 1M context",
+      "Grok 5 reveal",
+    ] as [string, string, string],
+  },
+  {
+    dimension: "Community vibe",
+    cells: [
+      "Defensive but deep",
+      "Quiet, devs-only",
+      "Loud, meme-rich",
+    ] as [string, string, string],
+  },
+  {
+    dimension: "Best for",
+    cells: [
+      "Mainstream + tools",
+      "Long-context coding",
+      "Live X intel",
+    ] as [string, string, string],
+  },
+];
+
+export const Scene4Comparison: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const captionFade = interpolate(frame, [0, 12, 180, 210], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const captionLift = interpolate(frame, [0, 14], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const tableFade = interpolate(frame, [16, 32], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: COLORS.bgDeep,
+        padding: "48px 80px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          opacity: captionFade,
+          transform: `translateY(${captionLift}px)`,
+          fontFamily: FONT_SANS,
+          fontSize: 38,
+          color: COLORS.fgMuted,
+          textAlign: "center",
+          marginBottom: 36,
+        }}
+      >
+        <span style={{ color: COLORS.accentCyan, fontWeight: 600 }}>
+          3 full passes.
+        </span>
+        <span style={{ marginLeft: 18, color: COLORS.accentMagenta, fontWeight: 600 }}>
+          3 save files.
+        </span>
+        <span style={{ marginLeft: 18, color: COLORS.fgPrimary, fontWeight: 600 }}>
+          1 comparison.
+        </span>
+      </div>
+      <div
+        style={{
+          width: "100%",
+          maxWidth: 1640,
+          opacity: tableFade,
+        }}
+      >
+        <ComparisonTable
+          startFrame={20}
+          entities={["OpenAI", "Anthropic", "xAI"]}
+          rows={ROWS}
+          rowStaggerFrames={22}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,54 @@
+import React from "react";
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+import { COLORS, FONT_SANS } from "../lib/colors";
+
+const LINES = [
+  { text: "You pick the topic.", color: COLORS.fgPrimary },
+  { text: "The agent picks the peers.", color: COLORS.accentCyan },
+  { text: "The engine fans out.", color: COLORS.accentMagenta },
+];
+
+export const Scene5HowItWorks: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(circle at 50% 60%, ${COLORS.bgPanelSoft} 0%, ${COLORS.bgDeep} 70%)`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 48,
+      }}
+    >
+      {LINES.map((line, idx) => {
+        const start = 10 + idx * 28;
+        const fade = interpolate(frame, [start, start + 14], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const slide = interpolate(frame, [start, start + 18], [24, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <div
+            key={line.text}
+            style={{
+              opacity: fade,
+              transform: `translateY(${slide}px)`,
+              fontFamily: FONT_SANS,
+              fontSize: 78,
+              fontWeight: 600,
+              color: line.color,
+              letterSpacing: -1,
+            }}
+          >
+            {line.text}
+          </div>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,73 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { BadgeBar } from "../components/BadgeBar";
+import { COLORS, FONT_MONO, FONT_SANS } from "../lib/colors";
+
+export const Scene6CTA: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const installFade = interpolate(frame, [20, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Stronger 1Hz pulse on the install line for end-of-video emphasis
+  const pulse = 0.8 + 0.2 * Math.sin((frame / fps) * 2 * Math.PI);
+  const glowPulse = 0.4 + 0.4 * Math.sin((frame / fps) * 2 * Math.PI);
+
+  const repoFade = interpolate(frame, [50, 70], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const enterScale = spring({
+    frame,
+    fps,
+    config: { damping: 18, stiffness: 90 },
+    from: 0.95,
+    to: 1,
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(circle at 50% 50%, ${COLORS.bgPanelSoft} 0%, ${COLORS.bgDeep} 70%)`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 56,
+        transform: `scale(${enterScale})`,
+      }}
+    >
+      <BadgeBar />
+      <div
+        style={{
+          opacity: installFade * pulse,
+          padding: "18px 36px",
+          background: COLORS.bgPanel,
+          border: `1px solid ${COLORS.accentCyan}`,
+          borderRadius: 14,
+          boxShadow: `0 0 ${40 + glowPulse * 60}px ${COLORS.accentCyan}${Math.round(40 + glowPulse * 80).toString(16)}`,
+          fontFamily: FONT_MONO,
+          fontSize: 44,
+          color: COLORS.fgPrimary,
+        }}
+      >
+        <span style={{ color: COLORS.accentGreen, marginRight: 18 }}>$</span>
+        /last30days <span style={{ color: COLORS.fgMuted }}>{"{topic}"}</span>{" "}
+        <span style={{ color: COLORS.accentCyan }}>--competitors</span>
+      </div>
+      <div
+        style={{
+          opacity: repoFade,
+          fontFamily: FONT_SANS,
+          fontSize: 28,
+          color: COLORS.fgMuted,
+        }}
+      >
+        github.com/mvanhorn/last30days-skill
+      </div>
+    </AbsoluteFill>
+  );
+};
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"]
+  },
+  "include": ["src/**/*"]
+}