kaventro / motion-designer

# motion-designer
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.
## Examples
| | | |
|:---:|:---:|:---:|
| | | |
| 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.
## Install
As a skill, where the command is `/motion-designer`:
 [code] 
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`:
 [code] 
For Codex, the same skill goes into its skills folder, where `$motion-designer` calls it:
 [code] 
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.
## Update
New versions land on `main`; nothing updates by itself. Pick the line for how you installed it:
 [code] 
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.
## Use 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 l