Render Airdrop Carousel

render-airdrop-carousel

The free, deterministic renderer for the airdrop-notification-carousel video ad

format — the viral iOS "AirDrop" trend where a native share-sheet card

("Brand would like to share a *candle* · Decline / Accept") springs up on the

phone and its preview window flips through a carousel of real product photos,

landing on a range/lineup payoff with an Accept tap.

This is a DETERMINISTIC composite — no generative video, no AI-rendered product.

A real-DOM AirDrop card is rendered once to PNG (headless Chrome), chroma-keyed, and

its preview window is refilled per-product in PIL, then animated + audio-synthed with

FFmpeg. The whole point of the format is crisp system-UI text and real product

photography, both of which a video model would smear. This capability makes **no paid

calls**; the recipe gates the only optional paid step — generating a hero product shot

when the brand has NO usable photo at all (→ create-image-fal).

Default output ≈ 6–8s, 1080×1920, h264 + aac. Duration is DERIVED, not trimmed —

first_hold + (N-1)·per + final_hold. Add images or raise per to lengthen.

Scripts (free)

• scripts/build_card.py — brand params → chrome.html + chrome-pressed.html: the

AirDrop card on a green page (#00e000) with a magenta preview window

(#ff00ff) and a solid brand band (wordmark SVG or text + tagline). Real DOM text —

AirDrop, Decline, Accept, and the brand line are DOM/SVG, never AI-rendered.

• scripts/one_shot.py — glue: build_card → headless-Chrome (Playwright) fullPage

screenshot of both card states → compose_carousel. One --config, one MP4.

• scripts/compose_carousel.py — the render engine: green-key the card → detect the

magenta window → fill it per-product (cover-crop) → blurred per-product backdrop +

push-in → card spring-up (iOS ease-out-back) + carousel + Accept tap → synth audio

(whoosh on entry, chime on land, a tick per swap, a pop on the tap) → encode h264+aac.

• scripts/config.example.json — the shape of the brand config the recipe binds

(brand-neutral worked defaults; replace every /abs/path/... placeholder).

Chroma contract (load-bearing — build_card.py and compose_carousel.py MUST share it)

#00e000 green = page background, keyed to the card's alpha. #ff00ff magenta

= preview window, replaced per product. **Neither color may appear in the card art or

any product photo** — a product image containing near-pure green or magenta gets

keyed/misread. Swap the image or tighten the window_mask thresholds if it bleeds.

Craft rules (faithful to the source molecule)

• Real product photos only. The format's credibility is that these look like real

AirDropped items — no AI-generated products in the carousel.

• Never AI-render text — the card UI, wordmark, and band are DOM/SVG composited so

they stay pixel-crisp. Cover-crop the window; white-bg PDP shots reading as "product

in a white tile" is on-brand and fine.

• 6–16 images, ordered; end on the range — the payoff (final_image) should

read as "the whole line" (lineup / family / all-shades).

• Hard cuts on rhythm, a tick per swap — do NOT crossfade.
• Never invent proof — a 1M+ sold tagline must be the brand's OWN stated figure,

not filled from a brand-kit proof section.

• Duration is derived, not trimmed — add images or raise per; never cut the audio.

Requires

• Python 3 with numpy + Pillow, and ffmpeg/ffprobe on PATH.
• Playwright chromium for the screenshot step (`pip install playwright && playwright

install chromium). If Playwright is unavailable, run build_card.py`, screenshot

chrome.html / chrome-pressed.html (fullPage) → chrome-green.png /

chrome-green-pressed.png via the chrome-devtools MCP, then call compose_carousel.py

directly.

• watch (QC the final master). The recipe gates create-image-fal (optional hero shot

when the brand has NO usable product photo) — the only paid, proxy-routed step.