Overview
Build the film as Hook → Hero → Proof well → Range → Offer → Lockup. Keep overlap uniform. Reuse the same product-bob and well-frame motifs so the spine reads as one material.
Build
- 01
Hook: wordmark or badge, one motion.
- 02
Hero: product push-in, price, bob.
- 03
Proof: framed video well and/or spec chips.
- 04
Range: grid, cycle, or montage of variants.
- 05
Offer: bundle slam.
- 06
Lockup: mark + URL + one ring or pill.
sequence overlap=0.4s Hook Hero Well Range Offer Lockup
Example source React / TSX
examples/social-ad-spine.tsx · Uses the catalog’s shared composition helpers.
Loading source…