Slop TVNewsLatest
Explainers

How to render a 15-second video ad with an agent skill

A free skill bundle from danny.md drives a coding assistant through a storyboard, a GSAP timeline and a frame-by-frame render to an MP4 on your own machine.

Illustration: How to render a 15-second video ad with an agent skill

Key takeaways

  • The motion-ad skill on danny.md renders a 15-second 4:5 motion-graphics ad as an H.264 MP4 by stepping a paused GSAP timeline frame by frame in headless Chrome.
  • Its page lists a six-file bundle that installs with one curl command, and names Claude Code, Codex, Gemini CLI, Grok, Cursor and OpenCode as compatible agents.
  • All ad copy and brand content lives in one CONFIG object, and the bundled template ships five beats: a hook with a scrolling phone, a before/after reveal, a tilted wall of outputs, a showcase carousel with a proof row, and a call-to-action end card.
  • The skill's own rules forbid inventing customers, reviews, ratings or people, and require every price and "free" claim to appear on the page the ad links to.

A free skill bundle called motion-ad walks a coding assistant through building a short motion-graphics ad and rendering it to an MP4 on your own machine. It went up on danny.md on September 26, according to Pivot News, and it ships with rules about what the finished ad may claim.

danny.md is a small library of markdown files for agents, run by Danny Postma, who builds AI products including HeadshotPro. The site lists three skills, of which motion-ad is the video one. Its summary line says it produces short motion-graphics video ads for any product, like 15-second Facebook, Instagram or TikTok ads, as rendered MP4s.

What the skill actually builds

One HTML page, animated by a paused GSAP timeline, plus a Node script that steps that timeline frame by frame and encodes the frames into an H.264 MP4. That is the whole mechanism. Because the renderer seeks the timeline to each frame and screenshots it, the output does not depend on realtime playback.

The bundle includes a finished 4:5 ad you edit rather than a blank page. It runs five beats across 15 seconds: a hook headline with a phone scrolling a screen capture, a tapped card growing into the hero as a scan beam wipes from a before image to an after image, the hero shrinking into a tilted wall of outputs, a carousel of three showcase cards with a proof row, and a brand-colour circle wipe into a logo, a call-to-action headline and a button.

Everything editable sits in a single CONFIG object at the top of the template's script. Beat copy, colours, logo paths, the proof line and the end-card button are all fields. The font is swapped in the page's Google Fonts link and a CSS variable. Accent words are marked with asterisks and line breaks are forced with a backslash-n.

Installing it

One command copies the bundle into a local skills directory:

curl -fsSL danny.md/skills/motion-ad.tar | tar -x -C ~/.claude/skills/

The skill lists Claude Code, Codex, Gemini CLI, Grok, Cursor and OpenCode as compatible. On the machine that runs it you need Node 18 or newer, Google Chrome (or a Playwright Chromium install), ffmpeg, and Python 3 with Pillow. The bundled scripts install playwright-core and gsap with npm and download no browser.

Assets come from your own files or from your live site: a fetch script pulls images from a destination URL and writes an images.json beside them, and a second script builds a contact sheet so the agent can pick the hero pair and the carousel cards.

The guardrails are the part worth copying

A short section marked CRITICAL carries rules that most ad tooling leaves to the operator:

  • Copy must match the page the ad links to. Prices, counts, speeds, guarantees and any claim of "free" have to appear on that destination page, and if you ask for copy that contradicts the page the skill complies but flags the mismatch once.
  • Only real assets. Customers, reviews, ratings and results are never invented, and the proof row is set to null when there is no real number to display.
  • Never fabricate a person. If a beat needs more images of someone than exist, the skill uses crops or mirrors of real ones and says so.
  • Match the brand rather than the template defaults, and default to no hype, no exclamation marks and no emoji unless the brand uses them.
  • Output lands in ~/Downloads under a versioned filename, and never overwrites an earlier version.

Together they target one failure: an ad that makes a claim the product's own page does not back up.

The workflow, and what it costs you in time

The documented loop is six steps: research the product and its destination page, set up a working directory and gather assets, write the storyboard and copy, fill the CONFIG object or edit the timeline, render stills at nine timestamps and review them on a contact sheet, then render the full MP4 and spot-check transitions before delivery. A full 450-frame render is described as taking about a minute.

Where it stops

The template is 4:5 by default. Vertical 9:16 needs the stage resized and the vertical positions respaced, which the skill walks through but does not ship as a second template. It is licensed CC BY-NC 4.0, so you can use and remix it and you cannot sell it. Images missing from a build render as labelled placeholders, which lets an ad preview before the assets exist and also means placeholders reach a final render if nobody checks the stills. The step that produces the copy is a language-model pass, so the same review you would give any generated ad copy still applies.

The skill and its full documentation are free at danny.md/skills/motion-ad.

Sources

  1. danny.md - the skill itself: install command, workflow, template beats, requirements and its CRITICAL rules
  2. danny.md - what the site is and who publishes it
  3. creativecommons.org - the licence the skill ships under
  4. pivotnews.ai - independent write-up, including the six-file bundle and the render time