motion-ad

Files (9)

• SKILL.md
• template.html · assets/
• template-map.md · references/
• .gitignore · scripts/
• contact-sheet.py · scripts/
• fetch-images.cjs · scripts/
• package-lock.json · scripts/
• package.json · scripts/
• render.cjs · scripts/

SKILL.md (first lines)

# 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:

```bash
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):

```bash
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.

```bash
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:

From fabricioctelles/skills, Apache-2.0.

More from fabricioctelles/skills