/render-offer-ad

name: render-offer-ad
description: Render a punchy ~12s vertical (9:16) music-only direct-response OFFER ad as a 4-beat kinetic-typography film — HEADLINE slam → real PRODUCT drop → CLAIM/proof → CTA pill — from one config of copy slots, a real product photo, a brand palette, fonts, bpm, and beat split. DETERMINISTIC + FREE (a bundled Remotion project; springs + interpolate, no AI-gen for visuals). Backgrounds are engine gradient divs off the palette, props are inline SVG, the ONLY composited bitmap is the REAL product photo (objectFit:contain, never stretched), and ALL headline/claim/CTA/URL/wordmark text is typeset in the engine — never AI-rendered (the format's credibility guard). A driver binds the config to Remotion input props, renders the 9:16 master, and derives a 1:1 center-crop with ffmpeg. Two gating checks run before render (claim verbs must match the product's physical format; the claim beat needs an edge-entry mechanism prop). Use for the motion-graphics-offer-ad format.
status: active

render-offer-ad

The free, deterministic renderer for the **motion-graphics-offer-ad** format — the punchy ~12s vertical, music-only, direct-response offer ad built as a **4-beat kinetic -typography film**: a HEADLINE slams in word-by-word → the real PRODUCT drops in → the CLAIM/proof lands → a CTA pill resolves. No character, no VO, no captions — the on-screen **typeset** text IS the message.

This is a bundled **Remotion project** (`project/`) driven by a thin Python driver. The shipping master is **100% engine-rendered** (springs + `interpolate`): backgrounds are gradient divs off the `brand_palette`, props are inline SVG, and the ONLY composited bitmap is the REAL product photo (`objectFit:contain`, **never stretched**). ALL headline/claim/CTA/URL/wordmark text is typeset in the engine — **never AI-rendered**; that is the format's credibility guard. Rendering is **free** (no paid calls); the only paid step is an optional music bed, gated upstream in the recipe to `create-music-elevenlabs`.

The whole ad is **data**: copy strings, product photo, palette, fonts, bpm, and beat split all arrive as `config.json` and are bound to Remotion **input props** — nothing is hardcoded in the scenes (the first build's brand strings are generalised into `project/src/props.ts`). Deterministic → **iterate the cut for free**.

Choices

The creative calls are the user's, asked by the format recipe before any paid step; this renderer typesets whatever the config holds.

• **headline_angle** — category-killer ("[old way] IS DEAD. the new way ↓"), a straight offer, a

bold benefit, a pain-point question, or a before → after → `copy.headline_words`, `copy.subline`, `copy.motif_chip`. *The demo used the category-killer angle.*

• **music** — the bed's mood (lo-fi pop, electronic, hip-hop, indie pop, minimal percussion) →

`music.prompt` for `create-music-elevenlabs`; the rendered `music.bed` file is what this renderer mixes. *The demo used punchy lo-fi pop at 115 BPM.*

The 4-beat structure, palette roles, fonts and gates are the format; palette, product photo, claims and CTA are brand facts.

The 4 beats (the spine)

1. **HEADLINE** — primary-color radial ground; `headline_words` slam in WORD-BY-WORD (`slamIn`, ~7-frame stagger, scale-overshoot + motion-blur smear, settling on the downbeat); `subline` + an animated bobbing down-arrow drop in. 2. **PRODUCT** — light radial ground; the REAL product photo drops in (`dropIn`) and idle-bobs (`bob`), `objectFit:contain` (never stretch); the `motif_chip` pops in (`popIn`); optional GENERIC competitor shape + strike-through (`wipe`) — never a named competitor. 3. **CLAIM** — light radial ground; the `mechanism_prop` slides in from a frame edge (`flyIn` overshoot, ~20% from the bottom) to add motion AND show the mechanism; the 3-line claim drops in staggered; product held bottom-right. 4. **CTA** — primary-color radial ground; the `wordmark` slams (`slamIn`); the CTA pill pops in as the motif-chip handoff resolving (`popIn`) with an arrow nudge; the `cta_url` fades up.

Scene boundaries are **derived** from `beat_split_sec` (default `[3.0, 3.5, 3.0, 2.5]`s → cuts at frames 0/90/195/285/360 @30fps) so the hard cuts land on the beat downbeats. The motion kit — `slamIn / dropIn / bob / flyIn / popIn / wipe` — lives in `project/src/lib/anim.ts` and is kept intact from the first build.

Two gating checks (run before any render — from the recipe)

• **(a) CLAIM-MATCHES-FORMAT** — the claim/proof verbs MUST match the product's physical

format: liquid → `spoon / sip / drink / 0 mess`; powder → `scoop / mix / no clumps`; capsule → `1 a day`; gummy → `chew`. `render.py` rejects foreign-format vocabulary (e.g. a liquid product must not borrow powder grammar like `scoop / no clumps`). Set `product_format` in the config to arm this gate.

• **(b) CLAIM-BEAT MECHANISM PROP** — the claim beat must include an edge-entry

`mechanism_prop` (`spoon` for drinkable liquids, or `accent` for a neutral edge-entry accent bar) that supplies motion AND shows the mechanism. A text-only claim beat is too static — `render.py` rejects an unsupported/missing prop.

Run

# Bind config → Remotion input props, render the 9:16 master, derive the 1:1 crop.
python3 scripts/render.py \
  --config path/to/config.json \
  --work-dir <work> \
  --out <work>/master
# → <work>/master-9x16.mp4  (1080x1920)  and  <work>/master-1x1.mp4  (1080x1080 crop)

`render.py` copies the config's `product_hero_image` (+ optional `music.bed`) into `project/public/`, maps every config key onto the `OfferAdProps` shape `props.ts` reads, writes the input props to `<work>/props.json`, runs `npx remotion render offer-ad --props <work>/props.json`, then center-crops the 9:16 master to 1:1 with ffmpeg (no 2nd composition). NO hardcoded `/Users` or `clients` paths — every asset arrives via the config and a runtime `--work-dir`.

Scripts

• `scripts/render.