render-apple-notes-chat

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

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:

Block	Fields
note	title, lines[] (text, type_seconds, pre_pause_seconds), post_hold_seconds, status_bar (time, battery_pct), keyboard_state
end_card	head1, head2, underline (a word in head2), rows[] (label, value; max 4), products[] (src, h = height %, wide), logo (file) or wordmark, cta, fine_print, theme (bg, bg2, paper, ink, accent, label), fonts (heading, label — Google Fonts family names), seconds

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.