@mineo71/showtime 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@mineo71/showtime",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Product demos, directed by AI: Claude writes a JSON script, showTime records your web app and renders a polished MP4",
+  "keywords": [
+    "demo",
+    "product-demo",
+    "screencast",
+    "screen-recording",
+    "video",
+    "playwright",
+    "remotion",
+    "claude-code",
+    "ai",
+    "agent"
+  ],
+  "license": "MIT",
+  "author": "Oleh Rylskyj",
+  "homepage": "https://github.com/mineo71/showTime#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mineo71/showTime.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mineo71/showTime/issues"
+  },
+  "type": "module",
+  "bin": {
+    "showtime": "bin/showtime.mjs"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "skill/",
+    "docs/script.schema.json",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "showtime": "node bin/showtime.mjs",
+    "test": "vitest run test/unit",
+    "test:int": "vitest run test/integration",
+    "typecheck": "tsc --noEmit",
+    "fixture": "tsx test/helpers/serve.ts",
+    "example": "node scripts/serve.mjs examples 4800",
+    "media": "tsx scripts/media.ts",
+    "schema:write": "node bin/showtime.mjs schema > docs/script.schema.json",
+    "install-skill": "node bin/showtime.mjs setup --no-browsers"
+  },
+  "dependencies": {
+    "@remotion/bundler": "4.0.535",
+    "@remotion/renderer": "4.0.535",
+    "commander": "^14.0.3",
+    "playwright": "^1.64.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "remotion": "4.0.535",
+    "tsx": "^4.23.15",
+    "zod": "^4.6.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11"
+  }
+}

package/skill/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: showtime
+description: Use when the user wants a product demo video, walkthrough, screencast or feature recording of a web app (for a pitch, talk, README or social post). Write a showTime JSON script, rehearse it, record it and render a polished MP4 with auto-zoom, smooth cursor, captions and sped-up loading via the `showtime` CLI.
+---
+
+# showTime — scripted demo videos
+
+`showtime` turns a JSON script into a polished 1080p MP4. You are the director: you write the
+script; the CLI clicks through the app, records it and edits it (zoom, cursor, ripples,
+spotlights, captions, speed-ups, intro card).
+
+## Setup
+
+Run `showtime --help`. If the command is missing, install it (needs Node ≥ 20 and ffmpeg):
+
+```bash
+npm install -g @mineo71/showtime
+showtime setup    # downloads the browsers it records with
+```
+
+## Workflow
+
+1. **Story first.** Settle the audience, target length (30–120 s), the 2–4 moments that sell the
+   product, and the URL of a running app (a local dev server is best). Read the pitch, PRD or
+   routes if they exist. Plan one scene per moment.
+2. **Explore the app** with a browser tool if you have one (e.g. the Playwright MCP:
+   `browser_navigate`, `browser_snapshot`) to learn the flow and pick selectors from the
+   accessibility snapshot. Without one, read the routes and templates and let `showtime check`
+   show you the page (it prints an ARIA snapshot when a step fails). Prefer
+   `role=button[name='Save']`, `text=…`, `#id`, `[data-testid=…]` over long CSS chains.
+3. **Write the script** in the project, e.g. `demo/pitch.json`. Run `showtime schema` for the
+   complete format.
+4. **Rehearse:** `showtime check demo/pitch.json`. On failure read the error, the ARIA snapshot it
+   prints and `.showtime/<name>/check/failure.png`; fix the selector or add a `wait`, repeat until
+   green.
+5. **Record:** `showtime record demo/pitch.json` (runs in real time).
+6. **Render:** `showtime render demo/pitch.json` → `demo/pitch.mp4`.
+7. **QA:** `showtime frames demo/pitch.json`, then Read the PNGs it lists. Check that zoom lands on
+   the right control, captions are legible and do not hide the action, and pacing feels right.
+8. **Iterate:** edits to `show`, `style` or `meta` only need `render`. Edits to actions (`do`,
+   targets, text, `hold`, `app`) need `record` again — `render` refuses a stale take.
+
+`showtime make <script>` runs check → record → render in one go.
+
+## Long-running commands
+
+`record` runs in real time and then encodes; `render`, `frames` and `make` bundle and render with
+Remotion. They routinely take several minutes. In Claude Code run them with `timeout: 600000`, or
+with `run_in_background: true` and wait for the completion notification. In Codex and other
+agents, give the command a timeout of at least 10 minutes.
+Never let a `record` be killed halfway: it replaces the previous take.
+
+## Side effects
+
+`check` performs every action for real (it is a full run, just fast), and `record` repeats them.
+Flows that create data ("New project", sign-up, checkout) can collide on the second run
+("name already exists"). Use a resettable demo account or seed data, make names unique, or undo
+the change in `setup`; after a green `check`, reset the data before `record`.
+
+## Example
+
+```json
+{
+  "version": 1,
+  "meta": { "title": "Acme Analytics", "subtitle": "Reports in two clicks" },
+  "app": {
+    "url": "http://localhost:3000/",
+    "viewport": { "width": 1440, "height": 900 },
+    "mask": [".customer-email"]
+  },
+  "setup": [{ "do": "click", "target": "text=Accept cookies" }],
+  "style": { "accent": "#6366f1" },
+  "scenes": [
+    {
+      "id": "report",
+      "steps": [
+        { "do": "click", "target": "role=button[name='New report']", "show": { "caption": "A report in one click" } },
+        { "do": "type", "target": "#report-name", "text": "Q3 revenue" },
+        { "do": "select", "target": "#period", "value": "30d" },
+        { "do": "click", "target": "role=button[name='Create']" },
+        { "do": "wait", "for": "text=Report ready" },
+        { "do": "hover", "target": ".cashback", "show": { "spotlight": true, "caption": "Cashback at a glance", "hold": 1500 } }
+      ]
+    }
+  ]
+}
+```
+
+## Reference
+
+- **Actions (`do`):** `goto {url}` · `click {target}` · `type {target, text, pace?: human|fast|ms, clear?}` ·
+  `press {key}` · `hover {target}` · `select {target, value}` · `scroll {target} | {by}` ·
+  `wait {for} | {ms}` · `pause {ms}`
+- **`show` (per step):** `zoom` (number, or `false`), `caption`, `spotlight`, `hold` (ms, real time),
+  `speed`.
+- **`style`:** `background` (any CSS background), `chrome` (`browser` window frame | `none`), `address`
+  (address-bar text), `padding`, `radius`, `shadow`, `font`, `accent`, `autoZoom`, `autoSpeed`, `maxZoom`.
+- **`app`:** `url`, `viewport`, `deviceScaleFactor`, `storageState` (Playwright storage-state JSON,
+  path relative to the script), `colorScheme`, `locale`, `timezoneId`, `mask` (CSS selectors to blur —
+  plain CSS only, not `text=` / `role=`).
+- Output lands next to the script; working files in `.showtime/<script-name>/`.
+
+## Direction tips
+
+- One idea per caption, at most ~6 words. Caption the benefit ("Paid in two clicks"), not the
+  click ("Click Pay").
+- After a payoff screen add `hold` (800–2000 ms) so viewers can read it; put `spotlight` on the one
+  number that matters.
+- Never `pause` to wait for loading — use `wait {for}`; auto-speed compresses the loader.
+- Use `setup` for cookie banners and onboarding, `app.storageState` to start logged in, `app.mask`
+  to blur personal data.
+- Keep the default 1440×900 viewport at `deviceScaleFactor` 2 for crisp 16:9 zooms.

package/src/cli/format.ts

@@ -0,0 +1,19 @@
+import path from 'node:path';
+import type { CheckReport } from '../runner/check';
+
+const ARIA_LINES = 80;
+
+export function formatCheck(report: CheckReport): string {
+  if (report.ok) {
+    const dir = report.steps[0]?.screenshot ? path.dirname(report.steps[0].screenshot) : '';
+    return `✓ all ${report.steps.length} steps passed — screenshots in ${dir}`;
+  }
+  const f = report.failure!;
+  const aria = f.aria.split('\n').slice(0, ARIA_LINES);
+  return [
+    `✗ ${f.error}`,
+    `  screenshot: ${f.screenshot}`,
+    '  page (ARIA snapshot) — pick a selector from here:',
+    ...aria.map((line) => `    ${line}`),
+  ].join('\n');
+}

package/src/cli/main.ts

@@ -0,0 +1,115 @@
+import { createRequire } from 'node:module';
+import { Command } from 'commander';
+import { workPaths } from '../paths';
+import { loadScript } from '../script/load';
+import { scriptJsonSchema } from '../script/schema';
+import { formatCheck } from './format';
+
+const say = (line: string) => process.stdout.write(`${line}\n`);
+const progress = (p: number) => {
+  if (process.stdout.isTTY) process.stdout.write(`\rRendering ${Math.round(p * 100)}%`);
+};
+
+const { version } = createRequire(import.meta.url)('../../package.json') as { version: string };
+
+const program = new Command('showtime')
+  .description('AI-directed product demo videos: JSON script in, polished MP4 out')
+  .version(version);
+
+program
+  .command('setup')
+  .description('download the browsers showTime records with and link the skill into Claude Code and Codex')
+  .option('--agent <agent>', 'claude, codex or all', 'all')
+  .option('--no-browsers', 'only link the skill')
+  .action(async (o: { agent: string; browsers: boolean }) => {
+    const { AGENTS, installBrowsers, linkSkill } = await import('../setup');
+    const agents = o.agent === 'all' ? AGENTS : AGENTS.filter((a) => a === o.agent);
+    if (!agents.length) throw new Error(`--agent must be ${AGENTS.join(', ')} or all`);
+    if (o.browsers) {
+      say('Downloading Chromium and the Remotion renderer browser…');
+      await installBrowsers();
+    }
+    for (const dest of linkSkill(agents)) say(`✓ skill linked: ${dest}`);
+    say('Ready. Ask your agent for a demo, or run `showtime make <script>`.');
+  });
+
+program
+  .command('schema')
+  .description('print the JSON Schema of demo scripts')
+  .action(() => {
+    say(JSON.stringify(scriptJsonSchema(), null, 2));
+  });
+
+program
+  .command('check <script>')
+  .description('rehearse: run every step fast, screenshot each, report the first failure')
+  .option('--json', 'print the machine-readable report')
+  .option('--headed', 'show the browser')
+  .action(async (file: string, o: { json?: boolean; headed?: boolean }) => {
+    const loaded = await loadScript(file);
+    const { check } = await import('../runner/check');
+    const report = await check(loaded, { headed: o.headed, log: o.json ? undefined : say });
+    say(o.json ? JSON.stringify(report, null, 2) : formatCheck(report));
+    if (!report.ok) process.exitCode = 1;
+  });
+
+program
+  .command('record <script>')
+  .description('record a take (raw video + event log) into .showtime/<name>/take')
+  .option('--headed', 'show the browser')
+  .option('--keep-frames', 'keep the captured JPEG frames')
+  .action(async (file: string, o: { headed?: boolean; keepFrames?: boolean }) => {
+    const loaded = await loadScript(file);
+    const { record } = await import('../runner/record');
+    const ev = await record(loaded, { headed: o.headed, keepFrames: o.keepFrames, log: say });
+    say(`✓ take: ${(ev.video.durationMs / 1000).toFixed(1)} s, ${ev.steps.length} steps → ${workPaths(loaded).take}`);
+  });
+
+program
+  .command('render <script>')
+  .description('render the polished video from the last take (no re-recording)')
+  .option('-o, --out <file>', 'output MP4 (default: <script-name>.mp4 next to the script)')
+  .action(async (file: string, o: { out?: string }) => {
+    const loaded = await loadScript(file);
+    const { renderDemo } = await import('../pipeline');
+    const out = await renderDemo(loaded, { out: o.out, onProgress: progress });
+    say(`\n✓ ${out}`);
+  });
+
+program
+  .command('frames <script>')
+  .description('render QA stills (intro + one per step) for visual review')
+  .action(async (file: string) => {
+    const loaded = await loadScript(file);
+    const { renderQaFrames } = await import('../pipeline');
+    const files = await renderQaFrames(loaded);
+    say(files.join('\n'));
+  });
+
+program
+  .command('make <script>')
+  .description('check → record → render')
+  .option('-o, --out <file>', 'output MP4 (default: <script-name>.mp4 next to the script)')
+  .option('--headed', 'show the browser')
+  .action(async (file: string, o: { out?: string; headed?: boolean }) => {
+    const loaded = await loadScript(file);
+    const { check } = await import('../runner/check');
+    const report = await check(loaded, { headed: o.headed });
+    if (!report.ok) {
+      say(formatCheck(report));
+      process.exitCode = 1;
+      return;
+    }
+    say(`✓ check passed (${report.steps.length} steps)`);
+    const { record } = await import('../runner/record');
+    const ev = await record(loaded, { headed: o.headed, log: say });
+    say(`✓ take: ${(ev.video.durationMs / 1000).toFixed(1)} s`);
+    const { renderDemo } = await import('../pipeline');
+    const out = await renderDemo(loaded, { out: o.out, onProgress: progress });
+    say(`\n✓ ${out}`);
+  });
+
+program.parseAsync().catch((err: Error) => {
+  process.stderr.write(`✖ ${err.message}\n`);
+  process.exit(1);
+});

package/src/ffmpeg.ts

@@ -0,0 +1,72 @@
+import { spawn } from 'node:child_process';
+
+export function run(cmd: string, args: string[]): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'] });
+    let out = '';
+    let err = '';
+    child.stdout.on('data', (d) => (out += d));
+    child.stderr.on('data', (d) => (err += d));
+    child.on('error', reject);
+    child.on('close', (code) =>
+      code === 0 ? resolve(out) : reject(new Error(`${cmd} exited with ${code}: ${err.trim().slice(-2000)}`)),
+    );
+  });
+}
+
+/** Run a command and stream data into its stdin; `feed` awaits back-pressure through `write`. */
+export function runWithInput(
+  cmd: string,
+  args: string[],
+  feed: (write: (chunk: Buffer) => Promise<void>) => Promise<void>,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { stdio: ['pipe', 'ignore', 'pipe'] });
+    let err = '';
+    child.stderr.on('data', (d) => (err += d));
+    child.on('error', reject);
+    child.on('close', (code) =>
+      code === 0 ? resolve() : reject(new Error(`${cmd} exited with ${code}: ${err.trim().slice(-2000)}`)),
+    );
+    child.stdin.on('error', () => undefined); // surfaced through the exit code
+    const write = (chunk: Buffer) =>
+      new Promise<void>((done) => {
+        if (child.stdin.write(chunk)) done();
+        else child.stdin.once('drain', done);
+      });
+    feed(write).then(
+      () => child.stdin.end(),
+      (e) => {
+        child.kill();
+        reject(e);
+      },
+    );
+  });
+}
+
+export async function assertFfmpeg(): Promise<void> {
+  try {
+    await run('ffmpeg', ['-version']);
+    await run('ffprobe', ['-version']);
+  } catch {
+    throw new Error('ffmpeg/ffprobe not found on PATH. Install it: brew install ffmpeg (macOS) or apt install ffmpeg (Linux).');
+  }
+}
+
+export interface VideoProbe {
+  width: number;
+  height: number;
+  durationMs: number;
+}
+
+export async function probeVideo(file: string): Promise<VideoProbe> {
+  const out = await run('ffprobe', [
+    '-v', 'error',
+    '-select_streams', 'v:0',
+    '-show_entries', 'stream=width,height:format=duration',
+    '-of', 'json',
+    file,
+  ]);
+  const j = JSON.parse(out) as { streams: Array<{ width: number; height: number }>; format: { duration: string } };
+  return { width: j.streams[0].width, height: j.streams[0].height, durationMs: Math.round(Number(j.format.duration) * 1000) };
+}

package/src/paths.ts

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import type { LoadedScript } from './script/load';
+
+export interface WorkPaths {
+  root: string;
+  check: string;
+  take: string;
+  rawFrames: string;
+  raw: string;
+  events: string;
+  timeline: string;
+  stills: string;
+  video: string;
+}
+
+export function workPaths(loaded: LoadedScript): WorkPaths {
+  const root = path.join(loaded.dir, '.showtime', loaded.name);
+  const take = path.join(root, 'take');
+  return {
+    root,
+    check: path.join(root, 'check'),
+    take,
+    rawFrames: path.join(take, 'frames'),
+    raw: path.join(take, 'raw.mp4'),
+    events: path.join(take, 'events.json'),
+    timeline: path.join(root, 'timeline.json'),
+    stills: path.join(root, 'frames'),
+    video: path.join(loaded.dir, `${loaded.name}.mp4`),
+  };
+}

package/src/pipeline.ts

@@ -0,0 +1,38 @@
+import { mkdir, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { workPaths } from './paths';
+import { renderStills, renderVideo } from './render/render';
+import type { LoadedScript } from './script/load';
+import { loadTake } from './take';
+import { buildTimeline } from './timeline/build';
+import { qaShots } from './timeline/frames';
+import type { TakeEvents, Timeline } from './timeline/types';
+
+export async function timelineFor(loaded: LoadedScript): Promise<{ timeline: Timeline; events: TakeEvents }> {
+  const events = await loadTake(loaded);
+  const timeline = buildTimeline(loaded.script, events);
+  const paths = workPaths(loaded);
+  await mkdir(paths.root, { recursive: true });
+  await writeFile(paths.timeline, JSON.stringify(timeline, null, 2));
+  return { timeline, events };
+}
+
+export async function renderDemo(
+  loaded: LoadedScript,
+  opts: { out?: string; onProgress?: (progress: number) => void } = {},
+): Promise<string> {
+  const { timeline } = await timelineFor(loaded);
+  const paths = workPaths(loaded);
+  const out = path.resolve(opts.out ?? paths.video);
+  await mkdir(path.dirname(out), { recursive: true });
+  await renderVideo(timeline, paths.take, out, opts.onProgress);
+  return out;
+}
+
+export async function renderQaFrames(loaded: LoadedScript): Promise<string[]> {
+  const { timeline, events } = await timelineFor(loaded);
+  const paths = workPaths(loaded);
+  await rm(paths.stills, { recursive: true, force: true });
+  await mkdir(paths.stills, { recursive: true });
+  return renderStills(timeline, paths.take, paths.stills, qaShots(timeline, events.steps));
+}

package/src/render/remotion/BrowserBar.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react';
+
+type Props = { width: number; height: number; address: string; dark: boolean; font: string };
+
+const THEMES = {
+  light: { bar: 'linear-gradient(180deg, #f6f7f8, #eceef1)', edge: 'rgba(15, 23, 42, 0.09)', pill: '#ffffff', pillEdge: 'rgba(15, 23, 42, 0.07)', text: '#475569' },
+  dark: { bar: 'linear-gradient(180deg, #2b2c31, #232428)', edge: 'rgba(255, 255, 255, 0.06)', pill: '#18191c', pillEdge: 'rgba(255, 255, 255, 0.07)', text: '#c4c7cf' },
+};
+const LIGHTS = ['#ff5f57', '#febc2e', '#28c840'];
+
+/** macOS-style browser bar: traffic lights and a centred address pill. Sizes follow the bar height. */
+export const BrowserBar: FC<Props> = ({ width, height: h, address, dark, font }) => {
+  const c = dark ? THEMES.dark : THEMES.light;
+  const dot = h * 0.27;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width,
+        height: h,
+        background: c.bar,
+        borderBottom: `1px solid ${c.edge}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: font,
+      }}
+    >
+      <div style={{ position: 'absolute', left: h * 0.45, top: (h - dot) / 2, display: 'flex', gap: h * 0.19 }}>
+        {LIGHTS.map((color) => (
+          <div key={color} style={{ width: dot, height: dot, borderRadius: '50%', background: color, boxShadow: 'inset 0 0 0 0.5px rgba(0, 0, 0, 0.12)' }} />
+        ))}
+      </div>
+      <div
+        style={{
+          width: Math.min(width * 0.44, h * 14),
+          height: h * 0.62,
+          borderRadius: h * 0.18,
+          background: c.pill,
+          boxShadow: `0 0 0 1px ${c.pillEdge}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: h * 0.14,
+          color: c.text,
+          fontSize: h * 0.31,
+          fontWeight: 500,
+          letterSpacing: 0.1,
+        }}
+      >
+        <svg width={h * 0.27} height={h * 0.27} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round">
+          <rect x="5" y="11" width="14" height="10" rx="2" />
+          <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+        </svg>
+        <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{address}</span>
+      </div>
+    </div>
+  );
+};

package/src/render/remotion/Cursor.tsx

@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+import { cursorAt } from '../../timeline/cursor';
+import type { Timeline } from '../../timeline/types';
+
+const SIZE = 30;
+const ARROW = 'M5 2 L5 24 L10.6 18.9 L14.3 26.7 L18.1 25.1 L14.4 17.4 L21.7 17.4 Z';
+const IBEAM = 'M10 4.5 H13 Q14 4.5 14 5.5 Q14 4.5 15 4.5 H18 M14 5.5 V22.5 M10 23.5 H13 Q14 23.5 14 22.5 Q14 23.5 15 23.5 H18';
+const HOTSPOT = { arrow: { x: 5, y: 2 }, text: { x: 14, y: 14 } } as const;
+
+export const Cursor: FC<{ timeline: Timeline; srcMs: number }> = ({ timeline, srcMs }) => {
+  const c = cursorAt(timeline.moves, timeline.clicks, srcMs);
+  if (!c.visible) return null;
+  const shape = c.kind === 'text' ? 'text' : 'arrow';
+  const hs = HOTSPOT[shape];
+  const scale = (SIZE / 28) * c.press;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: c.x,
+        top: c.y,
+        opacity: c.opacity,
+        transformOrigin: '0 0',
+        transform: `scale(${scale}) translate(${-hs.x}px, ${-hs.y}px)`,
+        filter: 'drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35))',
+      }}
+    >
+      <svg width={28} height={28} viewBox="0 0 28 28">
+        {shape === 'arrow' ? (
+          <path d={ARROW} fill="#0b0b0f" stroke="#fff" strokeWidth={1.8} strokeLinejoin="round" />
+        ) : (
+          <g fill="none" strokeLinecap="round">
+            <path d={IBEAM} stroke="#fff" strokeWidth={4.5} />
+            <path d={IBEAM} stroke="#0b0b0f" strokeWidth={2} />
+          </g>
+        )}
+      </svg>
+    </div>
+  );
+};

package/src/render/remotion/Intro.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import { AbsoluteFill, Easing, interpolate } from 'remotion';
+import { introFrames } from '../../timeline/frames';
+import type { Timeline } from '../../timeline/types';
+
+export const Intro: FC<{ timeline: Timeline; frame: number }> = ({ timeline: t, frame }) => {
+  const total = introFrames(t);
+  const clampBoth = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+  const enter = interpolate(frame, [0, 18], [0, 1], { ...clampBoth, easing: Easing.out(Easing.cubic) });
+  const exit = interpolate(frame, [Math.max(1, total - 10), Math.max(2, total)], [1, 0], clampBoth);
+  return (
+    <AbsoluteFill
+      style={{
+        background: t.style.background,
+        fontFamily: t.style.font,
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#fff',
+        textAlign: 'center',
+      }}
+    >
+      <div style={{ opacity: Math.min(enter, exit), transform: `scale(${0.94 + 0.06 * enter})` }}>
+        <div style={{ fontSize: 88, fontWeight: 800, letterSpacing: -1.5 }}>{t.intro?.title}</div>
+        {t.intro?.subtitle ? <div style={{ marginTop: 18, fontSize: 36, opacity: 0.75 }}>{t.intro.subtitle}</div> : null}
+        <div style={{ margin: '28px auto 0', width: 72, height: 6, borderRadius: 3, background: t.style.accent }} />
+      </div>
+    </AbsoluteFill>
+  );
+};