rossark0/rossark-motion-skill

What it solves

Making a drawing move is easy, but making it feel alive is hard. Naive animation looks like a slideshow: faces teleport between expressions, bodies stop dead at each pose, everything moves in sync, blinks flicker, and shapes show seams. This skill fixes those problems by encoding the principles real animators use, so an AI agent can produce motion that breathes, looks around, shifts weight, and acts without freezing or jumping.

How it works

The skill provides a set of rules, templates, and tools. It uses one clock for the whole scene so all parts move in the same time. Parts rotate around their real pivots, trailing parts follow a beat later, and idle life never stops. It defines smooth paths through key poses, with small amplitudes and strong curves. When you have a reference video, it measures motion frame by frame using included tools, because the subtle movements that make something feel alive are often too small to see. For interface motion, it follows established design rules from Emil Kowalski and Benji Taylor. The repo includes a full skill document (SKILL.md), a notes file (MOTION.md) for your project, ready-to-use animation engines for React Native and SwiftUI, live face components, and tools for creating contact sheets, tracking edges, and sampling colors. Demos are fully coded animated scenes rendered with the templates.

Who it’s for

Designers and engineers who want to bring their apps and drawings to life. This is especially useful for anyone using AI coding agents to animate characters, creatures, plants, cloth, fire, smoke, water, weather, lights, machines, icons, logos, charts, and whole scenes — without the agent falling into beginner animation mistakes.

Highlights

• One shared clock for the entire scene prevents mechanical, out-of-sync motion.
• Parts rotate around their true pivots and trailing parts follow with a delay, giving natural follow-through.
• Idle life (breathing, blinking, shifting) continues even between actions.
• Smooth flow curves move through key poses instead of stopping at each one.
• Reference videos can be measured frame by frame to capture motion too small for the eye.
• Includes ready-to-use engine templates for React Native (motion.ts) and SwiftUI (Motion.swift).
• Live face components (LiveFace.tsx / LiveFace.swift) produce eyes and mouths that glide, blink, and smile.
• Ships with four full demo scenes (Reveal, Garden, Chef, Orbit) rendered entirely in code at 60 fps.