Motion Graphics plugin

---
name: motion-graphics
description: Creates showreel-grade motion graphics videos entirely from code — HTML scenes rendered frame by frame in headless Chrome with real motion blur, plus an original score composed for each video on the same beat grid. It directs the film itself from whatever the person gives — their words, a site, a GitHub repository, an app, screenshots, their own video clips and photos, or reference clips — and sets the pace and the energy of the music from them. Use for any promo, ad, launch video, explainer, reel, Shorts or TikTok, intro, kinetic type or logo animation for a business, product, app, site, bot, channel or person, even when all you have is a link or a name.
license: MIT
compatibility: Needs a local shell with Node.js 22.4+, ffmpeg and ffprobe on PATH, and Chrome, Edge, Chromium or Brave installed. No npm packages or API keys; the network is used only to read the links the user gives (the site, reference posts).
metadata:
  version: "1.4.1"
---

# Motion graphics

Make a video that looks like a motion designer's showreel and sounds like it was scored for it — entirely from code:
a selling promo, a launch video, an explainer, an intro, a logo sting, a reel. The picture is an HTML page in which
every frame is a pure function of time, captured in headless Chrome with real sub-frame motion blur. The soundtrack is
composed and synthesised for this one video on the same beat grid as the picture, so every cut, slam and whoosh lands
on the beat. No stock footage or music libraries, no AI video, no npm packages — the person's own clips and photos
are welcome material.

The bar for every video, whatever it is for, is a motion designer's showreel: treat each brief as the piece that opens
your own — every frame designed, motion from the first frame, nothing filler. That is the effort, not a look: the
direction (step 3) still decides the style, the pace and
the energy, and a calm request gets a calm film made with the same care. Every number, preset and example in this
skill is a worked example from a real video, not a mandate — only the rules (the frame contract, facts from the
person, the loudness targets, the client's protection) are fixed.

`<skill>` below means the directory that contains this SKILL.md. Run the scripts with `node`; they check their own
requirements and explain what is missing. In an environment without a shell, Chrome or ffmpeg (a chat-only app), do
steps 1–6 as files anyway, and hand over the project as an archive with the commands that render it on the user's
machine (`node audio/score.mjs`, `node tools/render.mjs`); say plainly that it has not been rendered or checked yet.

## What you deliver

- `out/<slug>.mp4` — the master (1920×1080 or the chosen format, 60 fps, H.264 + AAC, -14 LUFS, true peak ≤ -1 dBTP)
- `out/<slug>-web.mp4` (light, for messengers) and `out/covers/*.png` (thumbnails)
- the project folder, which re-renders with one command; its README holds the direction card, the story table and
  the sound brief, `brief.md` the facts and their sources, `REVIEW.md` the critique rounds
- on request: other languages, a 9:16 version, a 15-second cutdown

## Workflow

Copy this checklist into your notes and tick it off:

- [ ] 1. Brief → facts (`brand/` from the site with site-kit, `brief.md`)
- [ ] 2. References → what to take from them
- [ ] 3. Direction → concept → story on a beat grid + sound brief