Rossark motion skill makes an agent animate any SVG at 60 fps

An AI agent given a drawing and asked to make it move usually produces a slideshow: the face teleports between expressions, every body part eases on the same curve, and a thin line shows across the face where two shapes meet. The author of rossark-motion-skill, published to GitHub on 22 October and gaining 302 stars in its first day, wrote down the mistakes an agent is likely to make and the recipes it should follow instead.

The project is an MIT-licensed Claude Code skill, installable with npx skills@latest add rossark0/rossark-motion-skill. It targets both React Native and SwiftUI, and ships a Motion engine for each (motion.ts and Motion.swift), templates for live faces that glide, blink and smile, and demo scenes rendered as MP4 and GIF.

The problem it names

The repository's README is as much a short motion-design lecture as it is a skill file. It describes four failure modes it is written to prevent. The body stops dead at every pose when each pose carries its own eased tween. Everything moves in sync, so the character looks machine-driven rather than alive. Blinks that fire for one frame flicker instead of reading as a blink. And two shapes that join without an overlap draw a thin seam across the face.

Its answers are prescriptive: one clock for the whole scene, parts that rotate around their real pivots, trailing parts that follow a beat later, idle life that never stops, smooth paths through key poses, small amplitudes paired with strong curves. When a reference video is available, a Python tool measures its motion frame by frame before building, on the view that what makes a reference feel alive is often too small to see.

What ships

Four demo scenes come with the repository, each a 60 fps loop that returns to its own first frame. Reveal is a 9-second phone-frame scene in which a kid falls into view, kicks a ball, waves, and hops. Garden is a 10-second scene of a girl watering a sprout that grows, blooms, hosts a butterfly, and returns. Chef is a 9.6-second scene with two pancake flips, the second landing on the chef's hat and bouncing into the pan. Orbit shows a bird with a tilted ring of cards orbiting around it.

The repository also carries three command-line tools: sheet.sh for contact sheets of a reference video at its full frame rate, track_edges.py for frame-by-frame edge tracking that catches a 2% jiggle or sway, and sample_colors.py for lifting exact colours out of a video frame. For interface motion, the skill is written to follow Emil Kowalski's rules and Benji Taylor's "Family Values".

Who changes what tomorrow

For a product team that uses Claude Code on its React Native or SwiftUI codebase, the install is one npx line, and the agent gets a prescriptive guide the moment it is asked to animate anything. The project is new, so the right next step is to try it on one existing illustration (a logo, an icon, a mascot) and compare the result against hand-written animation. A single-day star count carries no information about long-term quality; what it says is that the problem the author describes is widely felt.

Source

rossark0/rossark-motion-skill on GitHub.