Render Apple Notes Chat

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-apple-notes-chat

The free renderer for the apple-notes video ad format: someone types a short, honest list into Apple Notes ("my chai cheat sheet", "chai for every mood") and every line points to a real product. It ends on a checklist end card with the products and the CTA. Deterministic Playwright + ffmpeg; no generative video of the UI, so every typed character stays pixel-crisp.

Siblings: render-imessage-chat (a peer's reply is the punchline) and render-chatgpt-chat (an AI answer is the punchline). Reach for this one when the creative is a list someone keeps for themselves.

Choices

The recipe asks these before any paid step; this renderer only draws what the config says.

• list_angle — what the list is (a "which one should I get" cheat sheet, one pick per personality, one per mood or moment, a routine, a gift guide). Sets note.title, note.lines and end_card.head1/head2.
• voice — how the writer types (lowercase and casual, tidy, deadpan). Sets the wording and capitalisation of note.lines.
• clock — the time on the status bar (a 2 AM list reads differently from a 9 AM one). Sets note.status_bar.time.
• music — the bed passed to stitch.sh --music, or none (silent).

Brand facts (logo, colours, fonts, product photos, CTA, claims) come from the brand kit.

What it renders

1. The note (record-notes.js) — one PNG per visual state, each held for its own duration, concatenated into a 1080×1920 30fps MP4:
   • the note opens on its title with a blinking caret and the keyboard up;
   • each line types character by character at type_seconds, with a key pop on every letter, a darker space/return key, and a human rhythm (slower after spaces and punctuation);
   • between lines: return key, then pre_pause_seconds of blinking "thinking";
   • the note eases up so the caret never goes under the keyboard;
   • it ends on post_hold_seconds of the finished list.
2. The end card (render-end-card.js) — a paper card slides and tilts in over the brand colour; the heading has a hand-drawn underline; each row's check draws in turn. Real product cut-outs sit above the rows; the logo (or a wordmark) and CTA pill sit below.
3. The master (stitch.sh) — ~0.3 s crossfade into the end card, music faded in and out and normalised to −14 LUFS (peaks ≤ −1.5 dBFS). No music → silent master.

Run

bashCopy code
cd scripts && npm install            # once — installs Playwright
npx playwright install chromium      # once
node record-notes.js    --config config.json --out-dir <work> --still-only   # free review stills
node record-notes.js    --config config.json --out-dir <work>                # → notes.mp4
node render-end-card.js --config config.json --out-dir <work>                # → endcard.png + endcard.mp4
bash stitch.sh --notes <work>/notes.mp4 --end <work>/endcard.mp4 \
     --out <work>/master.mp4 [--music <work>/music-bed.mp3]

--still-only writes note-hook.png (the opening frame) and note-still.png (the finished list) for the review, without recording the video.

Config

See scripts/config.example.json. Two blocks:

Image paths are resolved relative to the config file. Pacing that reads well: ~1.6–2.8 s per line (about 18 characters a second), 1.0 s before the first line, 0.55 s between lines, 0.9 s before the last line.

Contract

• FREE: Playwright frame capture + ffmpeg. No model draws text: the note, the end-card copy and the logo are real HTML and real files.
• record-notes.js refuses a line with an em or en dash (people don't type them in Notes) or over 80 characters.
• render-end-card.js refuses an end card with no rows or no logo/wordmark, and fails if the chosen fonts don't load.
• The Apple Notes chat body is the bundled create-apple-notes-mockup generator (scripts/mockup/), so this runs standalone with no sibling fetch.
• Requires ffmpeg/ffprobe on PATH, Node 18+, and Playwright Chromium.

Gaps

• The phone UI uses the system font stack (-apple-system, SF Pro). It's exact on macOS; on Linux/Windows it falls back to the nearest sans.
• No typing sound effects: Notes is silent, and the chai test ads shipped with music only.
• Product photos must be clean cut-outs (transparent PNG). The recipe decides what to do when a product has none; this renderer only places what it's given.

Self-QC (always /watch the master)

• The caret never sits under the keyboard; the note scrolls smoothly, never jumps.
• Every line is fully typed before the next return; no text is cut off.
• The end card: every check draws, nothing overlaps the logo or CTA, fonts are the brand's (not a fallback), the pad under the card matches theme.bg.
• Audio (if any) fades in and out; no clipping.