playwright-recast

Transform Playwright traces into stunning demo videos — automatically.

Your Playwright tests already capture everything — traces, screenshots, network activity, cursor positions. playwright-recast turns those artifacts into polished, narrated product videos with a single fluent pipeline.

https://github.com/user-attachments/assets/418d996d-2e18-4ae8-9ccc-3e5161dc7af8

Why?

Recording product demos is painful. Every UI change means re-recording. Manual voiceover and subtitling takes hours. Timing is always off.

playwright-recast flips this:** your Playwright tests become your video source.** Write tests once, regenerate polished videos on every deploy.

import { Recast, ElevenLabsProvider } from 'playwright-recast'

await Recast
  .from('./test-results/trace.zip')
  .parse()
  .speedUp({ duringIdle: 3.0, duringUserAction: 1.0 })
  .subtitlesFromSrt('./narration.srt')
  .voiceover(ElevenLabsProvider({ voice: 'daniel' }), { normalize: true })
  .render({ format: 'mp4', resolution: '1080p' })
  .toFile('demo.mp4')

That's it. Trace in, polished video out.

Features

Fluent pipeline API — Chainable, immutable, lazy-evaluated. Build complex pipelines that read like English.
Trace-based processing — Parses Playwright trace.zip (actions, screenshots, network, cursor positions). No manual recording needed.
Smart speed control — Automatically speeds up idle time, network waits, and navigation while keeping user actions at normal speed.
TTS voiceover — Generate narration with OpenAI TTS, ElevenLabs, or Amazon Polly. Properly timed with silence padding.
Subtitle generation — SRT, WebVTT, and ASS output. Import external SRT or generate from trace BDD step titles.
Styled subtitle burn-in — Configurable font, size, color, background box with opacity, padding, position. Smart punctuation-based chunking for single-line display.
playwright-bdd support — First-class integration with playwright-bdd Gherkin steps. Doc strings become voiceover narration.
Click highlighting — Animated ripple effect at click positions with optional click sound. Configurable color, opacity, radius, duration.
Cursor overlay — Animated cursor appears before each click, moves to the click position with ease-out animation, then disappears. Bundled arrow cursor or custom image.
Animated zoom with easing — Auto-zoom uses customizable easing functions (ease-in-out, ease-out, cubic-bezier, or custom JS functions) with smooth zoom-to-zoom panning.
Frame interpolation — Smooth out choppy browser recordings with ffmpeg minterpolate. Blend, duplicate, or motion-compensated modes with multi-pass support.
Step helpers — narrate(), highlight(), zoom(), pace() — importable helpers for Playwright step definitions. narrate/highlight/zoom write marker steps directly into the trace zip, so the pipeline picks them up automatically via subtitlesFromTrace() (no report.json or extra pipeline calls needed).
Voiceover-driven freezes — When a TTS narration is longer than its visual window, the renderer holds the current frame until the audio finishes; overlays freeze with it, click sounds shift to match.
Soft (embedded) subtitle track — render({ embedSubtitles: true }) muxes a toggleable subtitle track into the container (mov_text for mp4, webvtt for webm).
Background music — Add background music with auto-ducking during voiceover, looping, and fade-out. Covers intro/outro.
Intro/outro — Prepend/append branded video clips with smooth crossfade transitions. Audio preserved.
MCP server — AI-assisted video creation via Model Context Protocol. Record, analyze, and render through any MCP-compatible client (Claude Code, etc.).
recast-studio — Record browser sessions via Playwright Codegen, then generate videos with a Claude Code skill. No code required.
CLI included — npx playwright-recast -i trace.zip -o demo.mp4 — no code needed.
Zero lock-in — Every stage is optional. Use just the trace parser, just the subtitle generator, or the full pipeline.

Quick Start

Install

npm install playwright-recast
# or
bun add playwright-recast

System requirement: ffmpeg and ffprobe must be on your PATH.

# macOS
brew install ffmpeg

# Ubuntu
sudo apt install ffmpeg

Trace inputs. Two layouts work: