create-imessage-mockup

Generate iMessage screenshots that look like real iOS captures — correct bubbles with tails, typing indicators, timestamps, "Delivered" captions, group avatars + sender names, keyboard chrome, and an optional iPhone 15 Pro bezel with Dynamic Island and status bar.

Purpose

Turn a structured thread JSON into a believable iMessage screenshot — first as standalone HTML (generate.js + templates/chat.css), then rasterized to PNG with headless Chromium (screenshot.js/render.js via Playwright). It is the atom you reach for when an ad, social post, or video scene needs a fake-but-convincing iOS message capture.

What it gets right, grounded in the renderer:

• Bubble runs and tails — blue sent bubbles (right) and gray received bubbles (left), with a curved tear-drop tail drawn only on the last bubble of each consecutive sender run (isLastOfRun in generate.js).
• Dark-themed iOS chrome — theme: "dark" flips the page to the iOS dark conversation look; the status bar, Dynamic Island, and keyboard match iPhone 15 Pro.
• Group affordances — group threads (mode: "group") add per-sender colored avatar circles, sender names above the first bubble of a run, and a 4-tile group-header badge.
• Beats for storyboards — timestamp pills, a static-but-mid-animation typing three-dot bubble, attachment cards, and "Delivered"/"Read" captions let you stage individual frames of a conversation.
• Three crops — --minimal (bubbles only), --with-keyboard (header + iOS keyboard), and --with-iphone-frame (full bezel + Dynamic Island + status bar over a gradient backdrop).

The atom embeds no LLM — it is deterministic. The orchestrating agent is responsible for composing the thread JSON; the renderer only draws exactly what the JSON says.

When to use