▶ Short-Form Video · E-commerce Lookbook

THE CAMEL TRENCH the shoppable reel

Cinematic fashion b-roll for the feel, a pixel-perfect timed-HTML product card for the facts. The $189 price isn't melted into a frame — it's vector-crisp, alongside a ★★★★★ rating, a size selector, an "only 4 left" inventory bar, and a BUY NOW button, animated over the whole reel. Hook → styling beats → detail → CTA, the same garment across every shot. Native 9:16, 35s.

format
9:16 vertical · 1080×1920
runtime
35s · VO + music
b-roll
Ken-Burns stills fallback
overlay
hyperframes-render
product
The Camel Trench
The hybrid where the price is actually legible. No text-to-video model can render a clean "$189" or a crisp size chip — and you must never trust one to render a price. So this playbook keeps all commerce data in the HTML. The AI generates the cinematic fashion b-roll; a single agent-authored HTML document — driven by CSS @keyframes — composites a real product card (brand, free-shipping badge, name + price, rating, size selector, inventory bar, BUY NOW) over the top. The pixels carry the styling; the HTML carries the data a shopper acts on.

Finished reel — the stitched lookbook

Cinematic fashion base (Ken-Burns slow-zoom on 9:16 keyframes of the same trench) + a crisp hyperframes-render product-card overlay · VO + ducked chic bed · 35s.

Two layers, one reel — why the hybrid works

Every frame is two things stacked: an AI-generated cinematic fashion plate, and a deterministic product-card overlay. Each does the job the other can't.

Layer 1 · AI b-roll

The feel

Cinematic fashion keyframes from generate_project — the same camel trench across street, café, and evening shots, held by character_anchor:"always" + a restated wardrobe in every prompt. Carries the styling and the mood, what AI fashion video does well. On this reel the motion came from the Ken-Burns stills fallback (ffmpeg zoompan), because fal's video tier was flaky that day. Honest, reliable, exactly 9:16.

Layer 2 · hyperframes-render

The commerce UI

One agent-authored HTML document composited over the whole base reel via hyperframes-render: the brand "Maison Atelier", a "Free shipping" badge, the product name + $189 price, a ★★★★★ 4.9 (320) rating, a size selector (XS S [M] L XL), an "Only 4 left in size M" inventory bar, and a BUY NOW button. Vector-crisp — the data that must be exact, never trusted to the model.

How it was made — the 6-step recipe

01 · SCRIPT
Hook → styling → detail → CTA
One script serves double duty: the brand VO AND the on-screen card copy. The desire hook, two styling beats, a make-selling detail close-up, the "tap to shop" call-to-action.
02 · B-ROLL
generate_project · 9:16 · anchored garment
One cinematic keyframe per beat, aspect_ratio:"9:16", character_anchor:"always", the wardrobe restated each prompt so the camel trench stays the same garment shot to shot.
03 · MOTION
ltx-q-i2v · or Ken-Burns fallback
Slow cinematic push / fabric drift via ltx-q-i2v — or, when fal's video tier is flaky, ffmpeg zoompan slow-zoom cover-cropped to 1080×1920. This reel used the Ken-Burns fallback.
04 · AUDIO
chatterbox-tts + music
A warm brand-voice VO from chatterbox-tts over a chic instrumental bed from music, mixed with the VO above a ducked bed.
05 · STITCH
ffmpeg-concat
Concat the clips into a base reel and mux the audio. This is the plate the product card sits on.
06 · OVERLAY
hyperframes-render · duration 35
One timed product-card HTML doc over the whole base reel. 35s exceeds create_media's 15s cap, so the cap is called directly with duration:35.

The overlay HTML — a product card on a CSS timeline

The whole hybrid layer is one HTML file. The card rises up and holds via a single keyframe; the price, rating, sizes, and inventory are static, crisp text. Pixel-perfect, every time — never baked into a generated image.

/* the product card rises up from the bottom and holds */
.card { position:absolute; bottom:90px; opacity:0; transform:translateY(40px);
        animation:rise 6s 2s forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.price { font-size:50px; font-weight:800; color:#c8a16b; }
.sz.on { border-color:#c8a16b; background:#c8a16b; color:#111; }
<div class="price">$189</div>
<div class="inv">Only 4 left in size M</div>
<div class="buy">BUY NOW</div>

Pipeline trace — the cap chain this reel ran

Wave 1 — beat keyframes (garment anchored) 5 × generate_project aspect=9:16, character_anchor:"always", wardrobe restated 5/5 done · trench consistent
Wave 2 — motion (Ken-Burns fallback — fal video tier flaky) 5 × ffmpeg zoompan slow-zoom, cover-crop 4:3 → 1080×1920 5 × ~7s clips
Wave 3 — audio + stitch chatterbox-tts brand VO music chic fashion bed ffmpeg-audio-mix (VO over ducked bed) ffmpeg-concat clips + muxed audio 35s base reel
Wave 4 — the product-card layer hyperframes-render timed product-card HTML, duration:35 (cap called directly — exceeds 15s create_media cap) final reel

Tested verdict — honest, not inflated

~93% Ken-Burns base · hyperframes-render product-card overlay crisp card · garment held · flaky video tier

The overlay is the win. The brand, the $189 price, the ★★★★★ rating, the size selector, the inventory bar, and the BUY NOW button land pixel-perfect on the CSS timeline — the data a shopper acts on is crisp in a way no text-to-video model can produce. The hybrid does exactly what it promises: styling from the pixels, commerce truth from the HTML.

Garment consistency held. The camel trench stayed the same coat across all shots via character_anchor:"always" + a restated wardrobe in every prompt — the recurring failure mode for fashion reels, avoided.

The base used the Ken-Burns stills fallback, not live i2v — fal's video tier was flaky that day. That's the honest mitigation, not a regression: ffmpeg zoompan cover-cropped to 1080×1920 is reliable and exactly 9:16. When the video tier is healthy, ltx-q-i2v (or kling / pixverse / cosmos-3-i2v) gives true fabric drift and camera motion. And the price lives in HTML by design — never trust the model to render a price.

Reproduce this — the playbook is open

Built from the ecommerce-lookbook playbook — point it at any product and it writes the hook → styling beats → detail → CTA, renders 9:16 cinematic fashion b-roll with the garment anchored across shots, and lays a pixel-perfect product card — brand, price, rating, sizes, inventory, BUY NOW — on top. Keep the price in the HTML, never in the image.