Turn your product page into a 16-second ad video with Claude Code

---
name: product-ad
description: Turn a product page URL into a 15-20 second product ad video, built in code with HyperFrames (HTML + GSAP). Real screenshots, motion, captions and an original music bed, two hooks, 9:16 and 1:1. Use when the user types /product-ad <url> or asks for an ad, promo or social video from a product page.
---

# /product-ad <url>

Make a short product ad from a real product page. No video model, no stock footage, no paid APIs. Everything on screen comes from the page itself.

## The one rule

Every word in the ad must be backed by the page. Only use claims the page makes, in words close to the page's own. No made-up numbers, user counts, ratings, testimonials, "best", "#1", "guaranteed", or results the page does not promise. If the page states a price or a count, show it with the date you read it ("as of Oct 2026"). If you are not sure a claim is on the page, leave it out.

## Steps

1. **Read the page.** Fetch the URL and save the visible text to `brief/page.txt`. Write `brief/claims.md`: a table of every selling point the page makes, each with the exact quote. Pick the 3 strongest for an ad and say why in one line each.

2. **Screenshots.** Use Playwright (Chromium) to capture the real page into `assets/`:
   - desktop viewport 1440x900 at device scale 2: the top of the page plus each section that shows one of the 3 points,
   - mobile viewport 390x844 at device scale 3: the top of the page.
   Dismiss cookie banners before capturing. Open the images and check them: no half-loaded fonts, no popups.

3. **Script two versions.** Same 3 points, two different hooks (the first 2 seconds), for example one that names the viewer's problem and one that shows the product straight away. Write `brief/script.md` with a timed table per version:
   - 0-2.5 s hook (one line, big),
   - three beats of about 3.5 s, one per selling point, each a real screenshot with one short caption (max 7 words),
   - 3 s end card: logo or name, the URL, one call to action from the page.
   Total 15-20 s. Every caption must map to a row in `claims.md`.

4. **Build in HyperFrames.** Make one project per size:
   ```bash
   npx -y hyperframes@0.8.224 init ad-9x16 --resolution portrait --non-interactive
   npx -y hyperframes@0.8.224 init ad-1x1 --resolution square --non-interactive
   ```
   Put version A and version B in each (two compositions or two projects, whichever renders cleanly). Put the screenshots in a phone frame (9:16) or a browser frame (1:1) and move the camera: slow push-ins, a scroll through the page, and a highlight on the line that matches the caption. Captions large and high contrast. In 9:16 keep text and key UI in the middle of the frame: Reels and Stories cover the top and bottom with buttons and the caption.

5. **Music bed.** Write a small script that synthesizes an original music bed (a few chords and a soft beat) to `assets/music.wav`, the exact length of the ad, with a fade in and a fade out. No downloaded music, no samples. Keep it in the background (around -20 LUFS) and put it on the timeline.

6. **Check, look, render.** In each project folder (`cd ad-9x16`, then `cd ../ad-1x1`), run `npx -y hyperframes@0.8.224 check`, fix what it reports, take snapshots at each beat and look at them yourself. Fix anything unreadable, cropped or empty. Then render both versions at 30 fps: `npx -y hyperframes@0.8.224 render --fps 30 --variables '{"version":"A"}' -o renders/<name>-A.mp4`, and the same with `"B"`.

7. **Report.** List the four files with their length, the hook of each version, and the claims table showing which page quote backs each caption.

## Ad rules to check before you hand it over

- Each caption traces to a quote in `claims.md`.
- No fake UI, fake reviews or invented customers. Screenshots are of the page itself.
- Prices and counts carry an "as of" date.