/render-chatgpt-chat

name: render-chatgpt-chat
description: Assemble a ChatGPT chat-reveal video ad from a thread + timeline JSON — one continuous Playwright recording of a ChatGPT mobile chat (user types with the iOS keyboard up → taps send → keyboard slides down + header cluster swaps in one beat → one gray loading dot → the assistant answer streams in word-by-word) crossfaded into a designed end card, with subliminal ChatGPT SFX and an optional ducked music bed. FREE assembly (Playwright + ffmpeg); the recipe supplies the per-brand thread + timeline + end-card config and gates the paid music call to its own capability. The ChatGPT sibling of render-imessage-chat. Use for the chatgpt-chat format.
status: superseded
superseded_by: phone-chat@1.2.0

> **Superseded:** the video kit now does this with the phone-chat part, version 1.2.0, in the parts folder of this repository. Every phone-chat style is a style file that draws the same screen frame by frame from the plan's scenes, with the original sounds, in the kit's browser. This atom stays, unchanged in behaviour, for skills outside the kit until they move; its scripts still run.

render-chatgpt-chat

The free renderer for the **chatgpt-chat** video ad format — the "I just asked ChatGPT…" creative, where someone asks ChatGPT a question and the *streamed assistant answer is the punchline* (the brand surfacing as the natural response). Deterministic Playwright + ffmpeg assembly; no generative video of the UI, so the bubble text and streamed answer stay pixel-crisp.

This is the **ChatGPT sibling of `render-imessage-chat`**. Reach for this one when ChatGPT is the more credible host for the answer; reach for iMessage when the punchline is a peer's reaction in a DM. The template recipe (DB) supplies the per-brand `thread` + `timeline` + `end_card` config and gates the paid music call (music bed → `create-music-elevenlabs`) to its own capability.

Choices

The recipe asks these before any paid step; this renderer only draws what the config says. The demo's value is an example, never a default:

• **`question_angle`** — the kind of question (symptom "why is this happening", how-to,

recommendation, comparison). Sets the `user-text` message, the matching `composer-type` text in the timeline, and the `assistant` answer. Demo: a "why is my stomach so bloated at 47?" symptom question.

• **`asker`** — whose voice the question is in (the core customer, a busy parent, a

first-timer, a skeptic). Sets the `user-text` wording + `keyboard.suggestions`. Demo: a woman in perimenopause.

• **`product_in_thread`** — whether a real product photo appears in the chat after the answer.

Demo: no (text only; the product lands on the end card). The mockup has a `user-image` message type but no assistant-side image yet — a product image after the answer is a gap.

• **`music`** — the bed passed to `stitch.sh --music` (or none → SFX only). Demo: an

instrumental bed.

What it renders

One continuous take — never scene-by-scene (every reload flickers):

1. **User types** in the composer with the iOS keyboard up (`composer-type`). 2. **Send-tap is ONE beat** — the user bubble pops, the keyboard slides down, and the header right-cluster swaps (`personPlus/dottedCircle` → `edit/more`) all on the same `t`. Never sequence them across frames. 3. **One gray loading dot** holds ~500ms (never three — three reads as iMessage typing, wrong app), silently (no SFX on the dot). 4. **The assistant answer streams in word-by-word** (`stream-words`, ~7 wps) with a soft opacity ramp; the conversation auto-scrolls to keep it in view. 5. **Crossfade to a designed end card** (wordmark + ⭐ proof row + trust trio + CTA pill) and **mux a ducked music bed** → master MP4.

The chat records at the ChatGPT-native **~9:19.5 (default 750×1624)** to match a real iPhone screen recording. **Never stretch the chat to a different aspect ratio** — the end card is scaled-to-fit + padded to the chat's dimensions in stitch, so the chat is never touched.

Run

cd scripts && npm install            # once — installs Playwright
npx playwright install chromium      # once
node record-chat.js     --config config.json --out-dir <work>   # → master-chat.mp4 + .sfx.json
node render-end-card.js --config config.json --out-dir <work>   # → scene-end-endcard.mp4
bash stitch.sh --chat <work>/master-chat.mp4 --end <work>/scene-end-endcard.mp4 \
     --sfx <work>/master-chat.sfx.json --out <work>/master-final.mp4 \
     --pad-color "#ffffff" [--music <work>/music-bed.mp3] [--also-1x1]

1. **`record-chat.js`** — reads `config.json` (`thread` + `timeline` + geometry), renders the bundled `create-chatgpt-mockup` HTML once with every message pending, walks the timeline on `requestAnimationFrame` inside the page, records it as one continuous MP4, and emits the deterministic SFX cue list. 2. **`render-end-card.js`** — fills `end-card.template.html` from `config.end_card` (wordmark/`logo_svg`, stars, proof, trust trio, CTA, colors) → still MP4. This is the SAME generic end card as `render-imessage-chat` (copied verbatim). 3. **`stitch.sh`** — normalizes the end card to the chat's dimensions, crossfades chat → end card, layers the subliminal ChatGPT SFX, optionally ducks a music bed under it, and optionally derives a 1:1 crop. All FREE ffmpeg. Pass `--pad-color` = `end_card.bg` (default `#ffffff`, ChatGPT light mode) so the pad under the end card is seamless.

The chat body: bundled create-chatgpt-mockup

The ChatGPT chat HTML comes from **`create-chatgpt-mockup`** (its `generate.js` + `templates/` produce the light-mode ChatGPT iOS HTML — status bar, header, message rows, streaming word-spans, composer, and the inline iOS keyboard). Those files are **bundled into `scripts/mockup/`** so this capability renders the chat body **standalone** — no sibling fetch of `create-chatgpt-mockup` is required. `record-chat.js` does `require('./mockup/generate.js')`.

The keyboard