vibe-motion/skills

What it solves

This project provides a collection of "skills" (modular animation and rendering tools) that can be integrated into AI agents (like Claude Code) to automate the creation of high-quality visual effects, motion graphics, and programmatic animations. It bridges the gap between text-based AI prompts and professional-grade video/SVG/HTML rendering.

How it works

Users install these skills via an interactive script (npx skills add vibe-motion/skills). Once installed, an AI agent can trigger these tools to generate specific visual outputs based on user requests. The library includes a variety of specialized renderers:

• Video & Motion: Tools for brand launch videos, 3D tickers, vinyl players, and financial candlestick charts using Remotion.
• Vector & SVG: A tool to convert pixel-based logos into animatable SVGs (pixel2motion).
• 3D & Simulation: Renderers for Three.js earth routes, 3D Chladni particles, and p5.js curtain simulations.
• UI/UX Animations: Tools for typing effects, ruler progress bars, and spotlight reveals.

Who it’s for

Motion designers, developers, and AI agent users who want to generate complex, programmatic animations and brand assets quickly through AI-driven workflows.

Highlights

• Agent-Ready: Specifically designed to be added to AI agents like Claude Code.
• Diverse Visuals: Covers everything from 3D particle systems and global flight paths to financial charts and brand promo videos.
• SVG Conversion: Includes a specialized workflow for turning static logos into motion-ready vector graphics.
• Animation Principles: Includes a skill to apply Disney's 12 principles of animation to code-driven motion for more natural movement.