Hi, I'm

motion-designer

I make launch films of your app inside Claude Code: the real interface, cut to music on the beat, rendered on your own machine.

Install

[ Films ]

Films it has made

Each one was planned, built, checked and rendered by the skill in a Claude Code session. They play here without sound; click one to watch it with its music.

The skill's own film motion-designer 60 s · 128 BPM · Midnight You watch it work: it reads an app, finds the drop, checks every frame and renders. The music is ACE-Step and the voice is Chatterbox, both made on the same Mac.
iOS Rolyn 46.5 s · 129 BPM · Meadow A finance app rebuilt from its SwiftUI code, inside an iPhone the whole time. Desktop Oryn 67.5 s · 128 BPM · Warm ink A file manager's real Tauri frontend, captured as it is. The film only moves the camera and the pointer.
Story Appname 27.4 s · 105 BPM A made-up planner told with a character, three panels and an end card. Every action on screen makes its own small sound.

What it makes

  • Product films in an iPhone or a laptop window
  • Stories in panels with your character
  • Feature cards
  • Type-led films
  • Short stings

Seven styles

  • Brand-native
  • Meadow
  • Warm ink
  • Midnight
  • Field guide
  • Paper and ink
  • Color block

[ How it works ]

Type /motion-designer and say what you need

It starts in plan mode, reads the app and writes a brief. Nothing is built until you approve it.

Rolyn · claude

> /motion-designer make a video for my app

⏺ Here's the plan: Meadow, 46.5 s at 129 BPM, and four stills for your approval.

beat 1 0:00 the dot draws the balance line and the phone forms

beat 19 0:08 voice entry: the phrase appears as it is said

beat 53 0:24 drop: the new row grows into the cash-flow card

⏺ Bash(python3 …/music_edit.py audio/source/track.mp3 audio/grid.json --from-bar 4 --bars 25)

bars 4–28: 5.7404s → 52.2571s, 100 beats at 128.998 BPM = 2791 frames

track bar 17 (drop) → film beat 53 at 24.187s

⏺ Bash(node …/scripts/check.mjs src/index.html)

PASS no clock, timer, randomness or CSS animation in src/

PASS every 0.05s from 0 to 46.50s without page errors

PASS frames are the same whatever order they are sought in

PASS the loop closes: 46.517s equals 0s

⏺ Bash(node …/render.mjs video src/index.html out/rolyn-launch-film.mp4 --scale 2)

out/rolyn-launch-film.mp4: 2791 frames

  1. 01

    Brief

    Works out the product's name, reads what the app does and writes the film scene by scene: the materials, the look, the story.

  2. 02

    Beat map

    Makes an original track or takes yours, finds the tempo, bar one and the drop, and puts every move on a beat. Four stills come first, for you to approve.

  3. 03

    Build

    Rebuilds your real screens in HTML from the code and screenshots, inside an iPhone or a window on a laptop. Web, Tauri and Electron apps can be captured as they are.

  4. 04

    Check

    Reads the code for clocks, timers and random numbers, seeks through the film every 0.05 s looking for errors and makes sure the loop closes.

  5. 05

    Render

    Headless Chrome into ffmpeg, supersampled 2×. You also get a muted loop, a poster and the whole film as one HTML file.

It all runs on your machine

  • MusicACE-Step 1.5MIT
  • VoiceChatterbox or Kokoro-82MMIT · Apache-2.0
  • Soundssynthesized by sfx.pyoriginal
  • RenderChrome and ffmpeglocal

No API keys, no cloud renders. The skill itself is MIT-licensed.

The skill's own film took one session

2 h 21 min
of work, pauses over ten minutes left out
371,277
tokens written
111.6 M
tokens read, almost all from the cache
221
tool calls

[ Install ]

One line, then one command

$ npx skills add kaventro/motion-designer

Then open your app's repository in Claude Code and type /motion-designer.

Or as a Claude Code plugin

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

Plugin commands carry the plugin's name, so there the command is /motion-designer:motion-designer.

It needs Node 22+, Chrome, ffmpeg, Python 3 and uv. On the first run it checks what's missing, tells you why it needs it and installs only what you agree to. The voice and music models come only when you want a voiceover or an original track.

If you like it, a star on GitHub helps other people find it.

Star on GitHub