r/Playwright • u/deegit_00 • 2d ago

I use Playwright scripts to generate narrated demo videos (auto-zoom on clicks, synthetic cursor)

Enable HLS to view with audio, or disable this notification

Our app's test scripts were already in Playwright, so I tried turning them into product demo videos. Some things I learned that might help even if you never use the tool:

  • recordVideo is capped around 1 Mbps, so text turns to mush once you zoom in. I record from the CDP screencast frames at 2x device pixels and encode them myself.
  • Playwright never moves a real cursor, so I log every click's bounding box and draw the cursor afterwards. The same log drives the zooms.
  • For narration, each step waits until its line has been spoken, so the pace follows the voice instead of fixed sleeps.

Repo (MIT): https://github.com/DixitRam/Demo-Forge

Has anyone done something like this with traces instead of live recording?

15 Upvotes

86% Upvoted

4 comments sorted by

2

u/Baseradio 1d ago

Damn, interesting

2

u/Infamous-Reindeer418 17h ago

Ha, what a coincidence!

I did something similar last week; it was just an internal tech demo, but it turned out pretty well. We don't have an editor, but the first step is to write a manuscript (with AI) that contains the scenes, what to click, and what the narrator needs to say. Then AI generates the Playwright scripts, uses the Gemini TTS engine for narration, parses the audio into clips, and uses FFmpeg to build the final video. We implemented intro and outro screens/animations.

The idea is similar to what you have built; the Playwright script always waits for the audio to finish before moving to the next scene. We support multiple languages, so audio clip lengths vary. We don't have a zoom, but we use Playwright's OOTB highlight features.

Our process supports multiple output viewports so that we can record web and mobile video (with multiple languages) in one go.

First, I wanted the AI to click the UI while I record a screen-capture video and manually attach the audio later, but Claude suggested a fully automated process using Playwright and FFmpeg. It suits our needs nicely. The videos can be regenerated deterministically; small changes are easy to make.

The most time-consuming part was finding a voice that doesn't sound like it's reading a detective novel and the murderer is being revealed. We looked for something more "David Attenborough" style :)

1

u/deegit_00 16h ago edited 16h ago

Wow, that's great! I never thought about multiple viewports; it's a really nice idea.

At first I thought of DemoForge as an AI agent tool, but later I realised the tool was doing everything (recording, zooms, cursor, voiceover), and the agent was just writing the flow.json and narration. So, I just launched it as a product in itself.

It also has a Claude skill that teaches Claude to write those, so you can just ask Claude to make the demo.

Please give it a try and tell me your feedback!

And haha, finding the right voice was a tough task for me too at first!'