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.

Preflight

Set S to the directory that contains this SKILL.md — the parent of assets/ and scripts/. In this repo it is ~/GIT/skills/skills/motion-ad; a default Claude Code install puts it at ~/.claude/skills/motion-ad. If you don't know, find it:

find ~ -maxdepth 7 -type d -name motion-ad -path '*skills*' 2>/dev/null | head

Then check the toolchain once per session, and install the two npm deps (no browser download — the scripts drive the Chrome you already have):

S=~/GIT/skills/skills/motion-ad
test -f $S/assets/template.html && test -f $S/scripts/render.cjs || echo "S is wrong"
node -v && ffmpeg -version | head -1 && python3 -c 'import PIL; print("pillow ok")'
(cd $S/scripts && npm install)
google-chrome --version || (cd $S/scripts && npx playwright install chromium && echo "use --channel chromium")

Done when: the toolchain line printed a version for node, ffmpeg and Pillow, and google-chrome --version (or the chromium fallback) printed a version. If ffmpeg is missing, stop and say so — nothing downstream works without it.

Non-negotiables

These four are the difference between an ad that ships and one that gets pulled. Each one exists because the failure is invisible in the output file — the MP4 renders fine either way.

• Every on-screen claim must exist on the page the ad links to. Prices, counts, speeds, guarantees and "free" claims get checked by the ad platform and by users. Read the destination page (WebFetch, or its source if it lives in the current repo) before writing a single headline. If the user asks for copy that contradicts the page, write it — but flag the mismatch once, clearly, rather than silently shipping it.
• Only real assets. Use the user's own images, or ones pulled from their live site with scripts/fetch-images.cjs. Never invent customers, reviews, ratings or results. When there is no real number for the proof row, set proof: null so the row disappears instead of showing a placeholder claim.
• Never fabricate a person. If a beat needs more shots of someone than exist, crop or mirror real ones, and tell the user you did.
• Match the brand, not the template defaults. Primary/accent/page colors, font, logo, and tone of voice all come from the product. Default to no hype, no exclamation marks, no emoji unless the brand itself uses them — an ad that oversells reads as scammy and drains conversion.

Workflow

- [ ] Step 1: Research the product and the destination page
- [ ] Step 2: Set up the workdir and gather assets
- [ ] Step 3: Write the storyboard and copy
- [ ] Step 4: Fill CONFIG and edit the timeline
- [ ] Step 5: Render stills, review, fix
- [ ] Step 6: Render the full MP4, spot-check, deliver

Step 1: Research

Establish the product, the destination URL, the audience and the format (4:5 feed by default, 9:16 for stories and reels, 1:1 for feed squares). Ask only for what you can't infer — the destination URL is the one thing you genuinely need, everything else usually falls out of the conversation or the site.

WebFetch the destination page and the homepage or pricing page for current facts: the headline promise, prices, rating and review counts, speed claims, and what is free versus paid. Pull the brand from the site's CSS or design system — primary and accent colors, font family, logo — or ask.

Done when: you have the URL, the format, and a written list of claims that are each traceable to a specific page.

Step 2: Workdir and assets

Work in a scratch directory, never inside the skill folder — you will edit index.html and drop dozens of images, and the skill must stay clean for the next run.

S=~/GIT/skills/skills/motion-ad           # wherever this skill is installed
W=<scratchpad>/video && mkdir -p $W/a && cd $W
cp $S/assets/template.html index.html
cp $S/scripts/node_modules/gsap/dist/gsap.min.js .
node $S/scripts/fetch-images.cjs --url <destination-url>   # -> a/web/NN.jpg + images.json
python3 $S/scripts/contact-sheet.py images a/web           # -> images.jpg

Read images.jpg to pick assets. Put the logo in a/ — a light-background version, plus a white one for the end card if it exists. Choose the hero before/after pair for the clearest transformation; for a SaaS product that is often "messy input → finished output" screenshots rather than photos. Portrait (≈4:5) images fill the hero and showcase cards best, and the wall wants at least 12 distinct ones so the grid doesn't visibly repeat. Ask the user whether they want specific images, and prefer theirs over scraped ones.

Done when: a/ holds the logo(s) and enough distinct images for the hero pair, the wall and three showcase cards, and you have named each file you'll reference in CONFIG.

Step 3: Storyboard and copy

Four to five beats in 15 seconds, one short headline each. The template's beat map and the CONFIG fields that drive it:

Headline budget: about 20 characters per line at 82px inside a 960px box. Lines wrap at spaces, but each extra line grows downward from a fixed top — so an over-budget headline collides with whatever sits below it instead of shrinking. Use \n to control where the breaks land. If a beat doesn't fit the product, change or cut it in the timeline rather than forcing it; a desktop-only tool should open on the hero card instead of a phone.

4:5 and 9:16 both fit the template honestly. 1:1 is the tight one — the phone is 520×1100 and won't fit a square frame, so expect to rescale it or replace the hook beat rather than just re-spacing (references/template-map.md → Re-lay out for 1:1). Say so when the user asks for square, and let them choose between a rescale and a different opening beat.

Done when: every beat has final copy and every claim traces to a page you read in Step 1.

Step 4: Fill CONFIG and edit the timeline

• Set brand, logo, logoOnDark, colors, and change both the Google Fonts <link> family and the --font variable to the brand font.
• In headlines, *word* or *several words* marks the accent color; \n forces a break.
• Image paths are relative to index.html (e.g. a/web/03.jpg). Crop or mirror with PIL when an image needs different framing.
• Set tap so the finger lands on the relevant spot of screen after it has scrolled by screenScroll — the tap point and the scroll offset are two halves of the same gesture.
• Keep window.seek, window.DURATION, window.ready and the ?render autoplay guard intact; render.cjs depends on all four.
• For 9:16 or 1:1, change html,body,#stage to the new size, re-space the vertical positions, and render with the matching --size. references/template-map.md lists every constant that has to move.

Done when: node $S/scripts/render.cjs --stills 0.3 produces a frame with real copy, real images and the brand's colors — no leftover Acme, no Benefit one.

Step 5: Stills review

node $S/scripts/render.cjs --stills 0.3,1.9,2.7,3.8,4.9,6.6,9.8,11.5,13.6
python3 $S/scripts/contact-sheet.py stills

Read stills.jpg. A wrong image path does not fail — it silently becomes a labelled placeholder — so look for: leftover placeholders, text overlapping the end-card orbs, empty gaps, labels that contradict the image beside them, the same image repeated side by side in the wall, and legibility at thumbnail size (that is the size the ad will actually be seen at, muted, on a phone).

Done when: every still shows the intended content, nothing overlaps, and each headline is readable in the contact sheet thumbnail.