Generate a Product Launch Video in One Claude Code Session

Input: product URL and key actions → Process: Playwright screen capture + Remotion edit + code-generated audio + FFmpeg render → Output: 20–25s 1080p60 launch video

Who

Product creators with a live web app who need a social-media launch video

You get

A 20–25 second 1920×1080@60fps demo video with real footage, animated captions, music bed, and end card

You need

Claude Code · Playwright · FFmpeg

Steps

1. Generate Playwright screen-capture script

   Ask Claude Code to generate a Playwright script that opens your live site in headless Chromium and records via Chrome DevTools screencast at 60fps. Specify 3–5 core product actions with a visible cursor and human-speed movement. Record both 1080p and 4K versions for close-up cropping. Do not fake or redraw any UI.

   Execution prompt · Source text。Claude Code initial instruction to generate Playwright screen-capture script

   Copy prompt

   Make a 20 to 25 second launch video for [my web app, live at URL]. 1920x1080, 60fps, for X.
   
   1. Footage must be real. Write a Playwright script that opens the live site in headless Chromium and records it with the Chrome DevTools screencast at 60fps. Script the exact flow, with a visible cursor and human-speed moves: [the 3 to 5 actions that show the product working]. Record it once at 1080p and once at 4K so close-ups stay sharp. Don't fake or redraw any UI.

2. Remotion editing and motion graphics

   Use Remotion to edit the footage. Requirements: open on motion, no logo or black frame first; one short caption per beat in large type with each word rising from a mask; punch the camera into the footage region each caption references; use one curve family: expo out for arrivals, expo in for departures; end card with self-drawing logo, domain, and 2–3 short facts.

   Execution prompt · Source text。Claude Code instruction to generate Remotion editing configuration/component code

   Copy prompt

   2. Edit it in Remotion. Open on motion, no logo or black frame first. Put one short caption per beat in big type, each word rising out of a mask: [your 5 or 6 captions]. Punch the camera into the part of the footage each caption talks about. Use one family of curves: expo out for things arriving, expo in for things leaving. End on a card with the logo drawing itself in, the domain, and 2 or 3 short facts.

3. Code-generated audio and sound effects

   Request code that synthesizes a short music bed and soft sound effects (no stock audio), timed to hit the cuts. Normalize to approximately -16 LUFS with peaks under -1 dBTP.

   Execution prompt · Source text。Claude Code instruction to generate audio synthesis code (e.g. Web Audio API or Node.js audio library)

   Copy prompt

   3. Generate a short music bed and soft sound effects in code (no stock audio) that hit the cuts. Normalize to about -16 LUFS with peaks under -1 dBTP.

4. Render and frame-by-frame quality check

   Render with FFmpeg: H.264 at CRF 16, AAC audio, +faststart. After rendering, watch every frame for stray focus rings, cut-off text, and dragging timing; fix issues and re-render.

   Execution prompt · Source text。Claude Code instruction to generate FFmpeg render command and quality checklist

   Copy prompt

   4. Render H.264 at CRF 16 with AAC audio and +faststart. Then watch every frame for stray focus rings, cut-off text and timing that drags, fix them, and render again.

Make a 20 to 25 second launch video for [my web app, live at URL]. 1920x1080, 60fps, for X.

1. Footage must be real. Write a Playwright script that opens the live site in headless Chromium and records it with the Chrome DevTools screencast at 60fps. Script the exact flow, with a visible cursor and human-speed moves: [the 3 to 5 actions that show the product working]. Record it once at 1080p and once at 4K so close-ups stay sharp. Don't fake or redraw any UI.

2. Edit it in Remotion. Open on motion, no logo or black frame first. Put one short caption per beat in big type, each word rising out of a mask: [your 5 or 6 captions]. Punch the camera into the part of the footage each caption talks about. Use one family of curves: expo out for things arriving, expo in for things leaving. End on a card with the logo drawing itself in, the domain, and 2 or 3 short facts.

3. Generate a short music bed and soft sound effects in code (no stock audio) that hit the cuts. Normalize to about -16 LUFS with peaks under -1 dBTP.

4. Render H.264 at CRF 16 with AAC audio and +faststart. Then watch every frame for stray focus rings, cut-off text and timing that drags, fix them, and render again.