Add video recording pipeline for release/feature videos

[benvinegar]

Adds a complete video production pipeline for creating sideshow release and feature videos. The pipeline records the real viewer in a 1920x1080 stage with window chrome, captions, and title cards while driving a live server with Playwright.

Changes

• scripts/launch-video/stage.html — A 1920x1080 HTML stage that frames the live viewer in a browser-window iframe, with a lower-third caption area and full-screen title card overlay. Includes a window.stage API for the driver to swap captions and show/hide cards. Supports optional custom fonts (Inter and JetBrains Mono) with system-font fallbacks.

• scripts/launch-video/record.mjs — The recording driver that:

  • Builds the viewer and boots a fresh server with seeded demo content
  • Resolves the stage HTML with token substitution (__INTER__, __MONO__, __APP_URL__, __APP_HOST__)
  • Launches Chromium with Playwright video recording
  • Strips CSP headers on the viewer document to allow framing (via route interception)
  • Drives a storyboard sequence: intro card → publish posts on camera → comment/revise loop → session switching → outro card
  • Calls the stage API between actions to manage captions and title cards
  • Outputs the raw webm path for ffmpeg encoding

• skills/launch-video/SKILL.md — Comprehensive guide covering:

  • Pipeline overview and architecture (stage + driver + ffmpeg)
  • Step-by-step recording and encoding workflow
  • Storyboard model: caption/card vocabulary, viewer interaction patterns, API usage, pacing guidelines
  • Environment gotchas (CSP stripping, pointer-events, iframe waits, mouse parking, Chromium/driver mismatch, ffmpeg requirements)
  • Content accuracy checklist (install commands, perf claims, demo data, agent names)
  • Verification and delivery steps

• .gitignore — Added .video-work/ to exclude the recording workspace directory

Implementation notes

• The pipeline records one real-time pass (no compositing) because sideshow's product IS live motion — cards streaming over SSE, iframes resizing, the comment loop.
• The storyboard (scene sequence, captions, title cards) is editorial content; the reference implementation is the 0.13.0 release video. Users rewrite the storyboard per video while keeping the reusable machinery intact.
• The stage uses pointer-events: none on the card overlay to ensure Playwright's hit-target checks reach the app iframe without timing out.
• CSP stripping is scoped precisely to the viewer document URL to avoid buffering the SSE /api/events stream.
• The driver seeds background sessions before recording and publishes foreground content on camera for the money shots.

https://claude.ai/code/session_01WHgzU15du8dEN3BJiWD3kx