An agent skill for Claude Code and Codex that makes launch films for apps, and other short videos from code: titles, kinetic type, explainers, data videos, music videos and graphics over footage. It rebuilds your app's real interface in HTML, puts it in an iPhone or in a window on a laptop, times every move to the music, checks the film frame by frame and renders it to video.

This is the skill's own launch film, made with the skill in one Claude Code session. The music was generated on the same Mac with ACE-Step and the voice with Chatterbox. How it was made.

And its showreel: 45 seconds of motion design, how the skill works and three films made with it, cut to an original track made on the same Mac. How it was made.

All the films and how it works are also on the site: designer.ostinos.com.

Rolyn: iOS, personal finance	Oryn: desktop file manager	Story: a story ad with a character

Click a poster to watch with sound. Each folder has the film's beat map and how it was made. Rolyn and Oryn carry their sources; the story film is the demo in the story template.

Also in the folder: Oryn showreel, a 60 s cut created with the motion-designer skill in a Claude Code session. The Lomi showreel is a 30 s cut of the Lomi desktop app, made in a Claude Code session with HyperFrames rather than the skill.

As a skill, where the command is /motion-designer:

npx skills add kaventro/motion-designer

As a Claude Code plugin from this repository's marketplace. Plugin commands carry the plugin's name, so there the command is /motion-designer:motion-designer:

/plugin marketplace add kaventro/motion-designer
/plugin install motion-designer@motion-designer

For Codex, the same skill goes into its skills folder, where $motion-designer calls it:

npx skills add kaventro/motion-designer -g -a codex

From a clone you can link the skill folder instead: ln -s "$PWD/skills/motion-designer" ~/.claude/skills/motion-designer (or ~/.codex/skills/motion-designer). The skill names the few things that differ between agents (planning, helpers, looking at images) in harness.

On the first run it looks for Node 22+, Chrome, ffmpeg, Python 3 and uv, tells you what is missing and why, and installs only what you agree to. Chrome comes as Chrome for Testing and needs no admin rights. The voice and music models are installed only when you want a voiceover or an original track.

New versions land on main; nothing updates by itself. Pick the line for how you installed it:

npx skills update motion-designer

As a Claude Code plugin, run /plugin marketplace update motion-designer in Claude Code, then restart it. From a clone, git pull in the clone; the linked skill folder follows it.

Open your app's repository, type /motion-designer and say what you need:

• "Make a 30-second launch film of this iOS app for our website."
• "We launch the desktop app next week. Make a film of the real UI, with the transfer finishing on the drop."
• "Make a 30-second story ad: the problem, our app, three features, and a sign-up button at the end."
• "Here's the track. Cut it so the drop lands when the dashboard appears."
• "Add an English voiceover and captions."

It starts in plan mode. It works out the product's name, reads what the app does and writes a brief with the materials, the look and the story scene by scene. Nothing is built until you approve it. Besides a product film in its device it can make a story in panels with your character, feature cards, a type-led film or a short sting.

The skill has four parts and opens each one only when a film needs it:

A film is one web page, and every frame is a function of time, seek(t). There are no timers and no random numbers, so any frame can be rendered on its own, a render is exact to the frame and the film loops cleanly.

Screens are rebuilt in HTML from the app's code and screenshots. A mobile app stays inside the iPhone for the whole film. A desktop app stays in its window, and the pointer moves only when it shows something. For Tauri, Electron and web apps the real frontend can be captured instead, which is how Oryn was made.

beats.py fits the tempo through the attack of every beat and finds bar one and the drops. music_edit.py cuts whole bars, exact to the frame. check.mjs looks for clocks, timers, random numbers and CSS animation in the code, seeks every 0.05 s looking for errors, and checks that the loop closes and that a frame looks the same however you get to it. Contact sheets are then reviewed against a written list of common mistakes.

The render drives headless Chrome over the DevTools protocol into ffmpeg: H.264, supersampled 2×, with optional debanding. You also get a muted loop, a poster and one self-contained HTML file.

There are seven styles, each with its own canvas, type, accent, motion, camera and one signature move: Brand-native, Meadow (Rolyn), Warm ink (Oryn), Midnight (the skill's own film), Field guide, Paper and ink, and Color block.

skills/motion-designer/
  SKILL.md       the film workflow, the rules, and where each part lives
  reference/     brief, film types, styles, motion, phone, desktop, capture, qa, rights, music, voiceover, setup
  templates/     the shared engine and the mobile, desktop and story starter films
  scripts/       doctor, install, new_film, render, check, beats, music_edit, music_gen, sfx, voiceover, assets, symbols, build_single
.claude-plugin/  plugin.json and marketplace.json, so this repository is also the plugin
tests/           end-to-end tests of every script and template
evals/           behaviour evals for claude plugin eval
examples/        Rolyn, Oryn, a story film, the skill-made Oryn showreel and the Lomi showreel
docs/launch-film the skill's own film
docs/showreel    the skill's showreel
site/            the site, published to designer.ostinos.com by .github/workflows/pages.yml

bash skills/motion-designer/scripts/doctor.sh shows what this machine has. install.sh <tool> next to it installs one thing the usual way for the system: Homebrew on macOS, the package manager on Linux, WSL2 on Windows.

MOTION_DESIGNER_HOME, ~/.cache/motion-designer by default, holds Chrome for Testing, the Chatterbox and Kokoro environments and ACE-Step.

The repository has no music files. When you don't bring a track, the skill makes an original one for the film with ACE-Step 1.5 (MIT) from a caption and a seed, and synthesizes the small sounds on a film's actions. The example videos carry their soundtracks as the licences allow, and each example says which track it uses and where to get it. There is also a list of places to get music you may use and what their licences allow.

python3 tests/test_plugin.py -v
claude plugin eval . --runs 1 --allow-tools Bash Write Edit --scaffold

The tests build and check every template, render video with sound and compare it with stills, recover a synthetic track's tempo, downbeat and sections, cut and mix audio, pack fonts and SF Symbols, prove that single-file builds match their sources, and make sure the checks catch random numbers, loop seams, CSS transitions, broken frames and a frame that never finishes. Tools a machine doesn't have are skipped, with the reason.

MIT for the skill, the templates and the example films' code. Rolyn, Oryn and Lomi are real apps by the author; Appname in the story film is made up. Brand logos in the Rolyn example belong to their owners. Music: "Digital Clouds" by Alejandro Magaña (Mixkit License) in Rolyn, "Ethereal Pulse" by Surf House Productions (CC BY 4.0) in Oryn, and original ACE-Step tracks in the story film, the skill's own film and its showreel. The Lomi showreel has an original score synthesized in code. Voices made with Chatterbox carry Resemble AI's inaudible watermark.