Skip to content
cccskills
FreePublished on GitHub

render-chatgpt-chat

Turn a configured chat thread and timeline into a vertical ChatGPT-style video ad. It records the mobile chat as one continuous animation, streams the assistant’s answer word by word, then crossfades to a branded end card with optional sound effects and music.

OriginalShow the original 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.

gooseworks-ai/goose-skills1,272 stars(GitHub 1,272 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Create a ChatGPT chat-reveal video ad
  • Show a question answered by a product or service
  • Produce a vertical mobile chat video with an end card

Files included (16)

  • SKILL.md9.3 KB
  • assets/sfx/key-tap.wav3.1 KB
  • assets/sfx/response-done.wav13.9 KB
  • assets/sfx/send-tap.wav7.8 KB
  • assets/sfx/stream-tick.wav2.0 KB
  • scripts/config.example.json3.5 KB
  • scripts/end-card.template.html2.5 KB
  • scripts/mockup/generate.js16.3 KB
  • scripts/mockup/templates/chat.css16.6 KB
  • scripts/mockup/templates/icons.js11.5 KB
  • scripts/package.json320 B
  • scripts/record-chat.js14.5 KB
  • scripts/render-end-card.js6.2 KB
  • scripts/stitch.sh6.6 KB
  • skill.meta.json229 B
  • tests/smoke-test.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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 is inlined by the mockup (renderKeyboard) — no separate keyboard atom.

Timeline events (consumed by record-chat.js)

KindMeaning
composer-type{ text, dur_sec } — type into the composer. SFX = one key-tap per word.
composer-clearWipe the composer instantly (fire at send-tap).
keyboard-show / keyboard-hideSlide the iOS keyboard up / down.
send-tapPulse the send button. SFX = send-tap.
pop{ target: <msg-id> } — reveal a message row.
header-swap{ value: "alt" } — swap the header right-cluster.
loading-dot-show / loading-dot-hide{ target: <dot-id> } — the single gray dot.
send-state{ value: "streaming"|"active" } — composer send-button state.
stream-words{ target, dur_sec, wps } — reveal the assistant answer word-by-word. SFX = stream-tick every 12 words + response-done at the end.
scroll-to{ target, dur_ms } — smooth-scroll a row into view.

See scripts/config.example.json for the canonical thread + timeline (the "one beat" send-tap and the streamed list answer are both wired there).

Contract

  • FREE assembly: Playwright record + ffmpeg composite/mux + the bundled SFX. No AI-rendered text — the bubbles, the streamed answer, and the end-card copy are all real HTML/PIL, never invented by a model.
  • The recipe (DB) supplies the per-brand config: the thread (light-mode ChatGPT, assistant message set stream: true), the timeline, the end_card (prefer a real logo_svg wordmark), and an optional music bed.
  • SFX are subliminal by design (ChatGPT has no native chime): key-tap -28dB, send-tap -20dB, stream-tick -32dB, response-done -22dB, and never a cue on the loading dot. Set "sfx": false in the config to ship the chat silent.

Gaps / routing notes

  • Music bed is an input, not generated here — the recipe gates it to create-music-elevenlabs (paid, proxy-routed, charged to your GooseWorks credits) and passes the file into stitch.sh --music.
  • Bundled SFX are synthesized stand-ins. The original four wavs (key-tap/send-tap/stream-tick/response-done) were lost from Git LFS (the objects 404 on the server), so assets/sfx/*.wav are freshly synthesized subliminal clicks/ticks. They work as-is; swap in real wavs (same filenames) for tuned SFX.
  • Portability: everything runs from the fetched /tmp/gooseworks-scripts/render-chatgpt-chat/scripts/… — the chatgpt-mockup generator + templates are bundled under scripts/mockup/, and the generic end card is bundled under scripts/. No /Users/… or repo-relative paths, and no required sibling fetch.
  • Requires ffmpeg/ffprobe on PATH and Playwright Chromium (npx playwright install chromium).

Self-QC (per project rule — always /watch the master)

  • Keyboard is up the whole time the user types, and slides down only on the send-tap beat (never visible while the answer streams).
  • Send-tap is one beat: user bubble + keyboard-down + header-swap on the same frame.
  • Exactly one gray loading dot for ~500ms (not three), and no SFX on the dot.
  • The answer streams word-by-word, left-to-right / top-to-bottom, not all-at-once.
  • No OpenAI spiral logo above any assistant title (the spiral is empty-state only).
  • No micro-flicker / scene cuts; the end-card pad color matches end_card.bg.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

<slug>

FreeSummary

The supplied material contains only placeholder text for the skill’s purpose, inputs, steps, and completion criteria. It does not provide enough information to describe a task or result reliably.

  • No use case can be identified from the supplied material
  • Purpose is unspecified
  • Inputs and expected results are unspecified
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

ad-angle-miner

FreeSummary

Research supported advertising angles using buyer context, current product facts, customer language, and observed ads. Turn the evidence into static ad, video, or copy ideas, matching video concepts to available recipes. Scores rank ideas for testing; they do not predict results.

  • Finding evidence-backed angles for a product campaign
  • Developing static ad or video concepts from customer research
  • Writing headline and primary-text options for ads
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

Analyze campaign data from Google, Meta, and LinkedIn to find strong and wasteful spend. The skill checks funnel performance and test results, then recommends which campaigns to pause, scale, or test and how to shift budget across channels.

  • Finding campaigns and ads that waste budget
  • Comparing performance across Google, Meta, and LinkedIn
  • Planning specific budget shifts and follow-up tests
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

Compare ad spend and signups with downstream outcomes to calculate the cost of each qualified lead. The skill checks tracking coverage, accounts for how long leads need to mature, and groups creatives into actionable categories with confidence notes.

  • Compare true qualified-lead costs across creatives
  • Find low-CPA ads that bring poor-quality leads
  • Check whether signups can be linked to downstream outcomes
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

Prepare the intake for a Meta ad campaign by reviewing available brand information first, stating reasonable assumptions, and asking only questions whose answers could affect budget, claims, or legal exposure. It records stable brand facts, a campaign brief, and what was asked versus assumed.

  • Prepare a Meta ad campaign when brand facts are missing
  • Clarify budget and timing before campaign planning
  • Record approved claims and audience restrictions
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

ad-policy-check

FreeSummary

Review ad copy, image text, visuals, and people against platform and brand category rules. It suggests honest fixes and needed disclosures, then flags issues requiring human or legal review, with a separate result for each ad and platform.

  • Checking ad copy and visuals before launch
  • Reviewing creator ads for required disclosures
  • Fixing a platform disapproval and recording the issue
gooseworks-ai/goose-skills1.3KUpdated Oct 27, 2026

See all skills by gooseworks-ai

Report a problem with this skill