SkillFoxx

Motion Starter Kit skill

A Remotion video starter: ten styles and two skills let an agent make a motion video from a repository link.

  • 55 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The agent installs tools and runs video and audio analysis scripts on your machine.
  • The first voiceover downloads about 2 GB of models.
All reasons and checks

motalim-ai/motion-starter-kitAuthor:motalim-ai

Install

Manual install

git clone https://github.com/motalim-ai/motion-starter-kit.git

Command from the agent note in the README: afterwards read `AGENTS.md`.

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The agent installs tools and runs video and audio analysis scripts on your machine.
  • The first voiceover downloads about 2 GB of models.

This is third-party code. Review the repository files before installing.

What it does

Motion Starter Kit turns a chat with an agent into Remotion motion graphics. The user shares the repository link and describes a topic, for example a 30 second video in the `plotter` style. The agent clones the repository, analyzes the style video, writes its rules into `STYLE.md`, asks about topic, length and voiceover once, writes the script and builds scenes. It shows the result in Remotion Studio and renders only after the user says "render". Ten ready styles ship with it: `plotter`, `doodle`, `whiteboard`, `chalkboard`, `stickman`, `isometric`, `fake3d`, `infographic`, `map-journey` and `product`. A second skill, `logo-animation`, animates a logo. The README is in Arabic and the agent rules are given in English too.

Who it is for. Creators of short and explainer videos who work with Claude Code or Codex and do not want to edit by hand.

Good fit when

  • A 16:9 video explains a topic in a whiteboard marker style.
  • A 9:16 reel retells a short story with doodle characters.
  • A company logo is animated in one of 17 animation styles.
  • Instead of picking a style, the user drops their own video into `reference/` and the agent follows its manner.

Not a fit when

  • You need a photorealistic video or generation by a video model.
  • The project cannot install Node.js, ffmpeg and uv.
  • You want a quick preview without downloading Remotion and a browser.

Example request

Make a 30 second video about the benefits of water in the plotter style from the motion-starter-kit repository and show it in Remotion Studio.

Limitations

You need Node.js 18 or newer, ffmpeg and uv, and the agent checks them and installs what is missing after your approval. Voiceover alignment downloads PyTorch and an alignment model on first use, about 2 GB in total, and the first Remotion preview render fetches a small browser of about 90 MB. The agent renders only on your word, and you remain responsible for the finished video and the rights to your material. If you use your own reference, make sure you may use and analyze it. Styles and scripts run locally, but the agent still needs access to its model.

How to disable. Delete the cloned project folder. The downloaded models and the Remotion browser cache live elsewhere and are removed by hand.

FAQ

Which agents does it work with?

Claude Code, Codex and Antigravity. They read `CLAUDE.md` and `AGENTS.md`, and the rules are the same for all.

Which styles does it include?

Ten: `plotter`, `doodle`, `whiteboard`, `chalkboard`, `stickman`, `isometric`, `fake3d`, `infographic`, `map-journey` and `product`. The gallery shows 26 styles in six families.

When does the agent render?

Only after you say "render". Until then the result opens in Remotion Studio, where you can adjust it in plain words.

How do I animate a logo?

Ask the agent to use `logo-animation`: the logo project lives in `logo/` and the gallery shows 17 animation styles.

Can I copy another style?

Put a video in `reference/` instead of choosing a style and the agent will make a video in the same manner.

Discussion

No questions or reviews yet.

Skills

A kit for software product promo videos on HyperFrames: 101 themes, a transition atlas and a repetition check for storyboards

SkillExtended access255

A Codex skill that turns a script or a voice recording into video with motion graphics, captions and an editable Remotion project.

SkillExtended access128

Ten skills and a rulebook for narrated vertical shorts and promo films on Remotion, driven by a coding agent

SkillExtended access141

Nine skills and a Remotion library make short vertical explainer reels in a layered paper-cut style, from strategy to render.

SkillExtended access207

Nine motion design skills for Claude Code: timing, color, composition, After Effects, Remotion, logos and backgrounds.

PluginMinimal access229
Editors’ pick

Official Remotion skills for making videos in React: compositions, animation, captions, maps and rendering

SkillMinimal access6.9K

README in short

The repository defines the agent workflow from cloning to rendering. Styles, gallery and rules live in the project itself.

README badge

Original SKILL.md

---
name: motion-from-reference
description: Build a new motion-graphics video in Remotion in the style of a reference video. Use when the user names a style from the styles/ library (e.g. "plotter", "doodle", "whiteboard", "chalkboard", "stickman", "isometric", "fake3d", "infographic", "map-journey" or "product") or puts a video in reference/, and asks for a new video, animation, explainer or motion graphics in that style («اصنع فيديو بنفس الستايل»). Covers studying the reference, one round of questions, script and voice timing, building scenes, review in Remotion Studio, and rendering only after the user approves.
---

<div dir="rtl">

# فيديو موشن جرافيك من فيديو مرجعي

**الهدف:** فيديو جديد بموضوع المستخدم، يبدو كأن صانع الفيديو المرجعي هو من صنعه.
- خذ من المرجع **الأسلوب** فقط: الألوان، والإيقاع، والحركة، والخطوط، والتفاصيل.
- لا تنسخ **المحتوى**: النصوص، والشعارات، والصور، والعلامات التجارية.

**قبل أن تبدأ:**
- شغّل كل الأوامر من جذر المشروع.
- السكريبتات في `.agents/skills/motion-from-reference/scripts/`، ونسمّيها هنا `$S`.
- المراحل بالترتيب، ولا تقفز فوق مرحلة.

## المرحلة 0: التجهيز
1. **إن بدأت من رابط الريبو** ولست داخل المشروع، فانسخه وادخل إليه:
   - المجلد الحالي فارغ: `git clone https://github.com/motalim-ai/motion-starter-kit.git .`
   - المجلد فيه ملفات: `git clone https://github.com/motalim-ai/motion-starter-kit.git motion-video`، ثم ادخل `motion-video`.
2. **تحقّق من الأدوات:** `node -v` (الإصدار 18 أو أحدث)، و`ffmpeg -version`، و`uv --version`.
3. **إن نقصت أداة:**
   - اشرح للمستخدم في جملة بسيطة ما هي ولماذا نحتاجها، واعرض أن تثبّتها أنت.
   - بعد موافقته ثبّتها:
     - macOS: `brew install node ffmpeg uv`
     - Windows: `winget install OpenJS.NodeJS.LTS Gyan.FFmpeg astral-sh.uv`
     - إن لم يكن مدير الحزم موجودًا، فاستخدم المثبّت الرسمي لكل أداة.
4. **ثبّت المشروع:** `cd video && npm install`.

## المرحلة 1: افهم المرجع
1. **حدّد المرجع:**
   - إن ذكر المستخدم اسم ستايل، فالمرجع `styles/<الاسم>/reference.mp4`. قائمة الستايلات في `styles/README.md`.
   - وإلا، فالمرجع كل فيديو في `reference/`.
   - إن لم يذكر ستايلًا وكان `reference/` فارغًا: اعرض عليه الستايلات الموجودة في `styles/README.md`، واسأله هل يختار واحدًا منها أم يضع فيديو خاصًا به. هذا هو السؤال الوحيد المسموح قبل التحليل.
2. حلّل المرجع:
   ```
   uv run --no-project --with numpy --with pillow python $S/analyze.py <مسار الفيديو> --out analysis/<اسم الستايل أو الفيديو>
   ```
3. اقرأ `analysis/<الاسم>/report.md`.
4. **انظر** إلى كل صورة في `sheets/` و`motion/`، وإلى `palette.png`.
   - صور `motion/` هي الأهم: كل صورة 8 إطارات بينها 0.1 ثانية.
   - منها تعرف كيف تدخل العناصر وتخرج، وكم تستغرق الحركة، وهل هي ناعمة أم حادة.
5. إن كان نموذجك يستطيع مشاهدة الفيديو أو سماع الصوت مباشرة، فافعل ذلك أيضًا.

Report a problem