vibe-motion skills
Seventeen skills for motion graphics: an agent builds looping 3D scenes, titles and clips with Remotion, Three.js and Python.
- 1,631 ★ on the repository
- Last commit
Extended access
Why this level
- The skills run render scripts, install packages and clone third-party repositories whose code they then execute.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/vibe-motion-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills run render scripts, install packages and clone third-party repositories whose code they then execute.
This is third-party code. Review the repository files before installing.
What it does
The repository collects skills for generating animation and short clips with code. Each skill sits in its own directory with a `SKILL.md`, and many add scripts and templates. They install with one command, `npx skills add vibe-motion/skills`, and the script is interactive: you tick the skills you want and your agent, for example Claude Code, with the space bar. The skills fall into several kinds. Some make ready effects: `perspective-illusion` builds a looping 3D scene with a Japanese perspective illusion, `colorize` runs a black-and-white to color transition, `light-spotlight-render` reveals text with a moving beam and `claude-typer` turns a prompt into a typing animation in the Claude Code style. Others build charts and scenes in Remotion: `remotion-candlestick` draws an animated candlestick chart, `remotion-vinyl-player` a record player and `remotion-3d-ticker` a wall of photos. A third kind clones separate projects and renders them, such as `threejs-earth-render` with Puppeteer. `brand-launch-video-star` builds a 15 to 30 second brand clip from real website materials, and `disney-animation-rule-skill` applies Disney's twelve animation principles to code-driven animation.
Who it is for. Designers, developers and content creators who make animation for landing pages, social media and presentations and want an agent to build, render and tune parameters.
Good fit when
- A product launch needs a 15 to 30 second clip from the logo, colors and imagery of the official website.
- A prompt must become a typing demonstration in a terminal in the Claude Code style.
- Photos must be shown as an endless 3D wall or a logo must become an animated SVG.
- Animation written in code looks stiff and is checked against Disney's twelve principles.
- Stock prices need an animated candlestick chart with Yahoo Finance data.
Not a fit when
- Edited footage is needed: the skills create animation with code rather than cut shot material.
- You do not want to install Remotion, Puppeteer, Three.js or Python: the skills rely on them.
- The project is commercial and source materials carry a CC BY-NC or CC BY-SA license: check the terms.
Example request
Use brand-launch-video-star to make a 15 second 16:9 English clip from example.com with the real logo and fast pacing.Limitations
The README description and examples are in Chinese, with an English version available. Many skills clone separate repositories and render them: `threejs-earth-render` with Puppeteer, `3d-chladni-render`, `wechat-2d-render` and `fisheye-motion`. Node.js, Python and the relevant packages are needed. The installer is interactive, and each agent keeps its skills in its own directory. The 3D Chladni preview is released under CC BY-NC 4.0 and the curtain engine is adapted under CC BY-SA 4.0. The author requires every GIF in the repository to be under 1 MB.
How to disable. Delete the directories of unneeded skills from the agent's skills folder, for example `~/.claude/skills`, and start a new session.
FAQ
How do I install the skills?
`npx skills add vibe-motion/skills`. It is an interactive script: you pick skills with the space bar, the author recommends installing them all, and tick the agent, for example Claude Code, because agents keep skills in different paths.
What does brand-launch-video-star do?
It makes a 15 to 30 second clip from an official website or supplied images. It first checks the logo, fonts, colors and product details, then builds a narrative and a frame-by-frame timeline. Defaults are English, 16:9 and 15 seconds.
Which skills run on Remotion?
`remotion-candlestick`, `remotion-3d-ticker`, `remotion-vinyl-player` and `fisheye-motion`. The last one clones the fisheye-motion project and renders a fisheye effect.
What does pixel2motion do?
It turns a logo from PNG, JPG or WebP into a smooth SVG, then produces brand motion, an interactive HTML page, a GIF or video preview and motion QA evidence.
Is there a skill that does not render?
`disney-animation-rule-skill`: it applies the twelve animation principles to code in Web, SVG, Canvas, React, Remotion and games, and runs no render.
Discussion
No questions or reviews yet.
Related
SkillsMotion Skills for AI agents
motion-skills
Over 50 open skills for motion graphics, animation and video: kinetic typography, charts, explainers, TikTok and Reels, WebGL, Manim
Nine motion design skills for Claude Code: timing, color, composition, After Effects, Remotion, logos and backgrounds.
Fifteen Claude Code skills for launch films, animated charts and reels made entirely from code, with no After Effects
A motion design toolkit for coding agents: rules with numbers, frame self-review and synthesized sound, plus web sims at 60 fps
motion-video-production: a skill for motion videos
motion-video-production
A skill that takes an agent through seven stages for a 15 to 90 second video, a script checking each stage before the next
A skill that makes DeepSeek and other models build a Remotion film from a prompt close to Opus 5.5, with plan, sound and review
README in short
The README lists the skills with animated examples and contributor rules: before a PR all GIFs are compressed to 1 MB, preferably 250 KB. A separate fish-school simulation project is mentioned and is not a skill.