motion-ad
Motion Ad
Builds a sound-off-friendly ad as one HTML page driven by a paused GSAP timeline, then renders it frame by frame into an H.264 MP4. Every frame is produced by seeking the timeline, not by recording playback, so the output is deterministic and re-renders identically.
assets/template.html is a finished 15s 4:5 ad, not a blank scaffold: hook + phone →
before/after scan reveal → 3D wall of outputs → showcase carousel + social proof →
brand-color CTA end card. All brand and product content lives in one CONFIG object
at the top of its script. Start from that CONFIG and rewrite the beats — building a
timeline from zero is slower and produces a worse spot.
Read references/template-map.md before your first edit of index.html. It maps
every DOM id, geometry constant and CONFIG field, and carries the recipes for cutting
a beat, adding one, and re-laying out to 9:16 or 1:1. Editing the template without it is
where this workflow usually breaks.