Repolode
Submit
kaventro

kaventro/motion-designer

An agent skill for Claude Code and Codex that turns your app's real UI into launch films and short videos, cut to music and rendered locally.

Open-source alternative to:After Effects

View on GitHubWebsite
Stars
105
Forks
7
Open issues
1
Last commit
19 days ago

What is it?

motion-designer is an agent skill that produces launch films, titles, explainers, data videos and music-driven graphics from code. It rebuilds your app's interface in HTML, places it inside an iPhone frame or a laptop window, times each movement to the music's beat, checks the result frame by frame and renders it to video with headless Chrome and ffmpeg.

Each film is a single web page where every frame is a function of time, so any frame can be rendered independently and the output is exact to the frame. The skill includes scripts for beat detection, bar-accurate music cutting, a frame-by-frame quality check and a voiceover pipeline using local voice models or macOS say, with music ducked under the voice.

It installs as a skill for Claude Code and Codex and is driven by a short prompt from inside your app's repository, starting with a plan that you approve before anything is built.

Key features

  • 01Rebuilds the app's real interface in HTML for use inside device frames or windows.
  • 02Times motion to the music's beats, with bar-accurate cuts.
  • 03Checks frames for timers, random numbers and loop errors before rendering.
  • 04Renders H.264 video through headless Chrome and ffmpeg, with a muted loop and poster.
  • 05Adds voiceovers with local models such as Chatterbox or Kokoro, mixed at -16 LUFS with ducked music.

Use cases

  • Making a 30-second launch film for an iOS or desktop app's website.
  • Producing a short story ad with a character and a sign-up call to action.
  • Cutting a promotional video so a key moment lands on a track's drop.
  • Creating data or explainer videos from code instead of a video editor.

Quick start

  1. 1

    Install the skill for Claude Code

    npx skills add kaventro/motion-designer
  2. 2

    Check which tools this machine has

    bash skills/motion-designer/scripts/doctor.sh
  3. 3

    Run the skill in your app's repository

    /motion-designer

Things to know

  • Needs Node 22+, Chrome, ffmpeg and Python 3 installed before films can be rendered.
  • Optional original music (about 11 GB) and voiceover models (about 4 GB or more) are large downloads.

Topics

#video-generation#motion-graphics#claude-code#agent-skill#remotion-alternative#ffmpeg#video-rendering#music-sync

FAQ

What is motion-designer?
An agent skill for Claude Code and Codex that turns your app's real UI into launch films and short videos, cut to music and rendered locally. motion-designer is an agent skill that produces launch films, titles, explainers, data videos and music-driven graphics from code. It rebuilds your app's interface in HTML, places it inside an iPhone frame or a laptop window, times each movement to the music's beat, checks the result frame by frame and renders it to video with headless Chrome and ffmpeg.
Is motion-designer free to use? What license does it have?
motion-designer is open source under the MIT license. Check the license terms before using it in commercial products.
Is motion-designer still maintained?
Actively maintained. The last commit to motion-designer was on Oct 1, 2026.
What can I use motion-designer for?
Making a 30-second launch film for an iOS or desktop app's website. Producing a short story ad with a character and a sign-up call to action. Cutting a promotional video so a key moment lands on a track's drop. Creating data or explainer videos from code instead of a video editor.
How do I install motion-designer?
Install the skill for Claude Code: npx skills add kaventro/motion-designer Check which tools this machine has: bash skills/motion-designer/scripts/doctor.sh Run the skill in your app's repository: /motion-designer
Where can I get motion-designer?
The source code and installation instructions are on GitHub: https://github.com/kaventro/motion-designer

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects