Render Imessage Chat

render-imessage-chat

The free renderer for the imessage-chat video ad format — a texting-thread reveal where a friend-to-friend conversation animates in on a phone (typing indicators, composer typing, bubble pops, smooth auto-scroll) and lands on a designed brand end card. Deterministic Playwright + ffmpeg assembly; no generative video of the UI, so bubble text and the wordmark stay pixel-crisp.

This capability is the generic assembler — the template recipe (DB) supplies the per-brand thread, product image, and end_card config, and gates the paid calls (product image → create-image-fal, music bed → create-music-elevenlabs) to their own capabilities. It bundles the iMessage-mockup HTML generator + the send/receive SFX so a chat render is self-contained and $0.

The three defects it fixes (QA GOOSE-2481)

1. Rich-link attachment — a product/link renders as a REAL iMessage URL preview: the image (top-rounded corners) flush against a gray meta card with a bold title + domain subtitle + chevron. NOT a bare image with a distorted caption floating centered below it (the mockup's default .attachment-meta). The fix is baked into record-chat.js's injected style, theme-aware.
2. No text bleed — every bubble fits. This is an AUTHORING rule the recipe enforces: split any long line into multiple short bubbles (see the two spec lines in config.example.json). The renderer honors the thread it's given.
3. A designed end card — wordmark + ⭐ proof row + trust trio + CTA pill (render-end-card.js + end-card.template.html), not a bare logo.

Run

bashCopy code
cd scripts && npm install            # once — installs Playwright for the recorders
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 \
     [--music <work>/music-bed.mp3] [--also-1x1]

1. record-chat.js — reads config.json (thread + theme + geometry + optional background_image), derives a believable per-message timeline (received bubbles pop after an optional …; sent bubbles are typed out in the composer then popped + Delivered; attachments dwell so a rich link lands), records it as one continuous MP4, and emits a deterministic SFX cue list.
2. render-end-card.js — fills end-card.template.html from config.end_card (wordmark/logo_svg, stars, proof text, trust trio, CTA, colors) → still MP4.
3. stitch.sh — crossfades chat → end card, layers the send/receive SFX (from the cue list; the mp3s ship in assets/sfx), optionally ducks a music bed under it, and optionally derives a 1:1 variant. All FREE ffmpeg.

Contract

• FREE assembly: Playwright record + ffmpeg composite/mux + the bundled SFX. No AI-rendered text — the bubbles, rich-link title/domain, and end-card copy are all real HTML/PIL, never invented by a model.
• The recipe (DB) supplies the per-brand config: the thread (kept short — split long lines), the product image bound into the attachment, the end_card (prefer a real logo_svg wordmark), theme (dark default), and an optional background_image (a flat-lay behind the phone) + optional music bed.
• Craft rules preserved from the reference build (Wonderbly Concept E):
  • Rich-link attachment card (image top-rounded, flush on the gray meta card).
  • Keep messages SHORT — split long thoughts into multiple bubbles (no bleed).
  • You never see your own typing dots — sent messages type in the composer.
  • Attachment dwell (~3.6s) so the product/link registers.
  • Designed end card (wordmark + proof + trust trio + CTA), not a bare logo.

Gaps / routing notes

• Product image (the attachment) and the optional music bed are inputs, not generated here — the recipe gates them to create-image-fal / create-music-elevenlabs (paid, proxy-routed, billed to the Ads agent). Pass the resulting files into the config / stitch.sh --music.
• Background flat-lay is optional; omit it for a clean neutral gradient behind the phone, or generate one via create-image-fal and point background_image at it.
• Requires ffmpeg/ffprobe on PATH and Playwright Chromium (npx playwright install chromium) — gooseworks doctor checks both.