render-offer-ad

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. Render cost is ~$0; 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 source run's Spoiled Child strings are generalised into project/src/props.ts). Deterministic → iterate the cut for free.

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 source run.

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

# 1) install the bundled Remotion project's deps (one-time; render.py auto-runs
#    this if node_modules is absent).
cd project && npm install && cd ..

# 2) 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.py — the driver: gating checks → stage assets into project/public/ → bind config to Remotion input props → npx remotion render (9:16) → ffmpeg 1:1 center-crop.
• scripts/config.example.json — the shape of the config the recipe binds (brand-neutral worked defaults from the source run; replace every /abs/... placeholder).
• project/ — the bundled Remotion project. src/props.ts (the input-props schema + beat-layout math + safe defaults), src/lib/anim.ts (the `slamIn/dropIn/bob/flyIn/ popIn/wipe motion kit — kept intact), src/scenes/Scene01–04.tsx` (the four beats, all copy/palette/fonts from props), src/Main.tsx (the beat spine + audio bed), src/Root.tsx (the offer-ad composition; duration derived from beat_split_sec).

Config → props mapping (what binds to what)

| config key | Remotion prop (props.ts) | scene that reads it | |---|---|---| | product_hero_image | product_image (staged to public/) | Scene02 (drop), Scene03 (anchor) | | brand_palette{primary_ground,light_ground,ink,highlight_chip} (dict OR ≥4-hex list) | palette | all 4 (grounds/type/chip) | | fonts{display,body} | fonts (resolved in fonts.ts) | all 4 | | copy.headline_words[] / copy.subline | copy.headline_words / copy.subline | Scene01 | | copy.motif_chip | copy.motif_chip | Scene02 | | copy.claim_lines[]{big,small} | copy.claim_lines | Scene03 | | copy.cta_label / copy.cta_url / copy.wordmark | same | Scene04 | | mechanism_prop (spoon\|accent) | mechanism_prop | Scene03 (inline-SVG prop) | | bpm | bpm | beat grid | | beat_split_sec [4] | beat_split_sec | derives cut frames + total duration | | music.bed / music.fade_out_frames | music.src (staged) / music.fade_out_frames | Main audio bed | | show_competitor_strike | show_competitor_strike | Scene02 | | aspects | (driver) | 9:16 always; 1:1 = ffmpeg crop |

Craft rules (load-bearing — faithful to the source run)

• The composited bitmap is the REAL product photo — never an AI packshot. Clean / transparent bg; objectFit:contain, never stretched.
• Never AI-render text. Headline, claim, CTA, URL, wordmark — all typeset in the engine. AI never draws a letter in this format.
• Never Ken-Burns/zoompan over stills — the engine springs carry the motion; a static/zoompan cut was rejected as "too static" on the source run.
• Music-only, beat-locked — the cuts + big slams land on the 0.0/3.0/6.5/9.5s downbeats; the bed volume ramps to 0 over the last music.fade_out_frames inside the render. No VO, no captions.
• Never name/jab a competitor — any comparison shape on the product beat is a GENERIC silhouette (show_competitor_strike), not a named brand.
• The two gating checks are non-optional — a liquid product must not borrow powder grammar; the claim beat must have real prop motion, not a static text stack.

Requires

• Node.js (≥18) + Remotion (@remotion/cli ≥4.0, installed via the bundled project/package.json — render.py runs npm install in project/ on first use). This capability legitimately needs a node runtime — the renderer IS a Remotion project.
• ffmpeg on PATH (for the 1:1 center-crop).
• watch (QC the final master — confirm the headline slams WORD-BY-WORD on the beat, the real product photo drops in + idle-bobs and is NOT stretched, the mechanism prop enters from a frame edge on the claim beat, the claim lines drop in staggered, the CTA label + URL are readable at 1080×1920, the hard cuts land on the downbeats, and the music ramps out; re-confirm both gating checks visually). The recipe gates the only optional paid step (music bed → create-music-elevenlabs) — this capability itself makes NO paid calls.