motion-launch-videos: A Claude Code plugin for kinetic-typography launch videos

What does motion-launch-videos make?

A short, loud, looping film of type for a launch or a brand sting: a hook, what the product does, a proof, then the call to action. It runs 6 to 20 seconds, with at most four words of display type per beat and a single call to action.

Deliverables

An H.264 MP4 with BT.709 colour tags and no audio track, a preview GIF, a poster PNG, and the single HTML file the film lives in. That file previews in Chrome: Space pauses, the arrow keys step one frame.

Formats

Square 1080 × 1080 by default, vertical 1080 × 1920 (9:16) or wide 1920 × 1080 (16:9).

Defaults

12 seconds, 60 fps, a 120 BPM beat grid, muted, and the brand colours read from the product's site.

Copy

3 to 5 beats in the product's own words. Every fact is logged in BRIEF.md with the URL it came from.

Not for

Screen recordings, narrated explainers, talking heads or long product demos.

How does it turn a brief into a video?

Claude works through six steps, and nothing is rendered in full until the review stills pass.

1. Brief

   It reads the product's live site, asks at most one round of questions (message, format, duration, palette) or uses the defaults, and writes BRIEF.md with every fact and its source.

2. Copy

   Hook, what it does, proof, call to action: at most four words a beat, lifted from the product's own words. No prices or numbers the site does not show.

3. Design spec

   DESIGN.md puts every beat on an 8 px baseline grid and a tempo grid, with palette roles, contrast ratios, type roles, springs and transitions.

4. Build

   It copies the engine template, fills in its FILM config, fetches the fonts, builds one self-contained HTML file and settles the baselines from the measured cap heights.

5. Critique

   Automated checks, review stills and a contact sheet. It fixes what fails and looks again.

6. Render and verify

   A pixel-exact loop check, then the MP4, the GIF and the poster, then ffprobe facts, colour tags and decoded frames compared with the canvas.

The techniques inside the engine

• One file, one clock

  The film is a canvas page whose seek(t) draws any moment from t alone: no timers, no Date, no Math.random, no state between frames. The fonts are embedded, so the page loads nothing over the network.

• Closed-form springs

  Every move is a sum of damped springs evaluated in closed form, one per target change, and snapped to exactly 1 once settled. Any frame can be drawn on its own.

• Kinetic type, one glyph at a time

  Kerning is recovered from measureText pair widths, lines are fitted so their ink spans the measure exactly, and each glyph enters on its own springs, staggered on the tempo grid.

• Designed accents

  Misregistration on landing frames only, a mask wipe through the outgoing line's own letterforms, and camera punch-ins and smash-pans on the beat.

• Real motion blur

  Each frame averages 1 to 64 subframes on a 270° shutter, about one per 5 px of movement, and never blurs across a hard cut.

• A pixel-exact loop

  Frame 0 is the lockup at rest and the film ends by rebuilding it. loopcheck compares the canvas pixels at the seam and requires every difference to be 0.

• Critique before the render

  Checks for glyph coverage, words per beat, live area, collisions, letter gaps, contrast, palette, the loop tail and blank frames, plus stills Claude reads before the full render.

• Checked output

  H.264 with BT.709 tags in the stream, faststart, the exact frame count, and decoded frames compared with the canvas pixels.

What do you need to run it?

• Node 20 or newer. The scripts need one package, playwright-core, installed next to them or in your project. Nothing is installed globally.
• ffmpeg and ffprobe with libx264 (brew install ffmpeg or apt install ffmpeg).
• A Chromium: CHROME_PATH, one already in the Playwright cache, a system Google Chrome, or the one playwright-core installs. Firefox and WebKit are not supported.
• Network access once per film, to fetch the fonts from the npm registry.

render.mjs doctor checks all of this and prints the exact command for anything missing.

What does it run, fetch and send?

Everything runs on your machine, inside the project you are working in.

• It reads the public web pages of the product you point it at, to take the copy from the product's own words.
• It fetches three open-source fonts (Archivo Black, Syne and IBM Plex Mono, under the SIL Open Font License) from the npm registry and embeds them in the HTML file.
• It installs one npm package, playwright-core, next to its scripts to drive a local headless Chromium. If no Chromium is found, it can download Playwright's build, and render.mjs doctor prints that command first.
• It runs your local ffmpeg and ffprobe to encode and verify the MP4.
• It reads only local paths from the environment (CHROME_PATH, PLAYWRIGHT_BROWSERS_PATH, FFMPEG_PATH, FFPROBE_PATH, PATH). No credentials, no API keys.
• It sends nothing anywhere else: no analytics, no accounts. It asks you before any commit, push or upload.

Questions people ask

Source, docs and the demo

• GitHub repository

  Source, README and the install instructions

• SKILL.md

  The workflow, ground rules and pass criteria Claude follows

• The Crux example

  Brief with sources, design spec, the HTML film, MP4, GIF and poster

• MIT licence

  Covers the code and docs; the fonts keep their SIL OFL licence

• Crux

  The product the demo was made for: X analytics for people who post

Made by Marouane Gazouzi, Senior Data Engineer in Paris, building in public. More about me →