/motion-ad

name: motion-ad
description: >
  Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as
  a rendered MP4. Researches the destination landing page so every on-screen claim
  matches it, pulls real product imagery off the live site, animates one paused GSAP
  timeline in a single HTML page, and renders it frame-accurately through Playwright
  and ffmpeg. Use this whenever the user wants a video ad, promo video, animated ad,
  "an ad for my product", Meta/TikTok/Reels creative in video form, a 9:16 or 1:1 cut
  of an existing spot, or a re-render of an earlier ad with a different hook, hero or
  CTA — including when they never say the words "motion graphics". Not for animating UI
  inside an app, not for static image ads, and not for long-form or voiceover-led video.
metadata:
  author: danny.md — https://www.danny.md/skills/motion-ad
  version: "1.0"
  date: 2026-09-27
  repository: https://github.com/fabricioctelles/skills
  license: CC-BY-NC-4.0
  category: code-scaffolding-and-templates
  original_project: https://www.danny.md/skills/motion-ad
  attribution: >
    Original skill by danny.md (https://www.danny.md), published under CC BY-NC 4.0 —
    free to use and remix, not to sell. This copy keeps the upstream workflow and adds
    repo-standard metadata, portable skill-path resolution, a preflight check, and
    references/template-map.md.
  requires: node>=18, google-chrome (or playwright chromium), ffmpeg, python3+pillow

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: