Showcase Kit

A reusable toolkit to generate polished product demo assets across projects:

• terminal recording video
• UI interaction recording video (Playwright)
• merged promo video (terminal + UI)
• optimized GIF export

Why this exists

Most project teams struggle with repeatable demo creation. This toolkit standardizes the workflow and makes it scenario-driven, so you can reuse the same tooling for many repositories.

Stack

• Playwright (UI automation + video capture)
• VHS (terminal video capture)
• ffmpeg (video composition + GIF export)
• zod (scenario validation)

Prerequisites

• Node.js 20+
• pnpm 10+
• ffmpeg
• vhs (for terminal video; optional if terminal recording is disabled)

Install

pnpm install
pnpm exec playwright install chromium

Quick Start

pnpm demo:run -- --scenario scenarios/glidekit.todo.json

Output assets are generated in the scenario outputDir, e.g.:

artifacts/glidekit-todo/
  terminal.mp4
  ui.webm
  demo.mp4
  demo.gif

Script Commands

• pnpm demo:run -- --scenario <path>: full pipeline
• pnpm demo:terminal -- --scenario <path>: terminal only
• pnpm demo:ui -- --scenario <path>: UI only
• pnpm demo:compose -- --scenario <path>: merge videos
• pnpm demo:gif -- --scenario <path>: export GIF
• pnpm validate:scenarios: validate all scenario JSON files
• pnpm smoke: run smoke pipeline against a local test page
• pnpm check: verify local tool availability

Scenario Format

See scenarios/glidekit.todo.json as a complete example.

Important sections:

• terminal: commands and terminal capture setup
• ui.startup: optional app startup process before recording
• ui.actions: browser action sequence
• compose: final layout (side-by-side or stacked)
• gif: GIF output options

Startup command model

ui.startup uses executable + args (no shell interpolation):

"startup": {
  "enabled": true,
  "command": "/opt/homebrew/bin/pnpm",
  "args": ["--filter", "@glidekit/desktop", "dev", "--host", "127.0.0.1", "--port", "1420"],
  "readyUrl": "http://localhost:1420",
  "timeoutMs": 90000
}

If your environment blocks child process startup, set startup.enabled=false and start your app manually before demo:ui.

CI

GitHub Actions workflow .github/workflows/ci.yml includes:

• scenario validation (pnpm validate:scenarios)
• script smoke pipeline (pnpm smoke)

Notes

• For CI use, you can disable terminal recording (terminal.enabled=false) if vhs is not available.
• Playwright runs headless by default for deterministic recording.