Newsletter promo, built in code
A promo does one job: make someone want the full edition. Show the best bits, never the whole thing.
Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.
Step 1: Ask for four things, then wait
- The edition link or the full text. Read it before anything else.
- The hook. The one question or promise the edition answers. If none is given, propose three from the edition's own lines and wait for a pick.
- Three proof frames. Real images, charts or clips from the edition. Attached files only.
- The ending card, word for word: newsletter name, where to read it, and an optional subscriber count with its source.
Step 2: Structure (15 seconds)
| Time | Frame |
|---|---|
| 0-3s | The hook, big. A question works better than a statement. |
| 3-11s | Three proof frames, about 2.5s each, each with a 3-5 word label. |
| 11-15s | Newsletter name, "Read it free at [URL]", held still. |
Step 3: Build brief (paste into Claude Code)
Build one self-contained HTML file called index.html: a 15-second promo at [WIDTH] x [HEIGHT] for my newsletter edition, using only the files I attached.
Hook (0-3s): "[HOOK]" in bold condensed type, [TEXT] on [BG], key words in [ACCENT].
Proof (3-11s): my three attached images in this order, each held about 2.5 seconds with a slow push-in and this label: [LABEL 1], [LABEL 2], [LABEL 3].
End card (11-15s): "[NEWSLETTER NAME]" and "Read it free at [URL]". Hold still, readable on a phone.
Banned: typewriter text, glow, bouncing, gradients on text, any claim or number not in my brief.
Build rules: every frame from the time alone, window.seek(seconds), wait for seek when the URL has ?render. Capture one frame per shot and check every label is readable at phone size.
Step 4: Export and post
Export 1080 x 1350 for LinkedIn and 1080 x 1920 for Stories and Reels. Put the edition link in the first line of the caption, not only the comments.