Quick Answer: The Claude Code animation skill in rossark-motion-skill teaches your agent to turn SVG art and drawings into 60 fps animation in React Native and SwiftUI. It runs on one shared clock, rotates parts around their real pivots, and keeps idle motion going, so characters breathe and blink instead of jumping between frames.
Ask an agent to animate a character and you'll usually get a slideshow. The face swaps to a different drawing, the body stops dead at every pose, and everything moves in lockstep like a machine. The rossark-motion-skill repo is a Claude Code animation skill built for exactly this gap. It started as the method the author used to animate illustrations in their own app, and it now covers creatures, cloth, fire, icons, and whole scenes.
Why Agents Animate Like Slideshows
Here's the uncomfortable part: the default output is often worse than no animation at all. When an agent swaps one drawing for another, the face teleports from one expression to the next. When it tweens each pose with its own easing curve, the body decelerates to zero at every keyframe, which reads as a stutter.
The common mistakes are predictable:
- Every part moves in sync, so the figure looks mechanical.
- Parts rotate around the wrong point, so arms swing from the shoulder edge instead of the joint.
- Blinks last only a frame or two and flicker.
- Everything bounces, and the bounce is the only motion on screen.
- A hairline seam shows where two shapes meet.
The counter-intuitive fix is to stop adding more easing. Per-pose easing is the lazy advice, and it's the reason bodies freeze between poses. The skill instead routes motion through key poses as one continuous path. Why does a smooth path look more alive than a perfectly eased tween? Because real bodies never fully stop: they carry momentum from one pose into the next.
One Clock, Real Pivots, and Follow-Through
The skill's core rules are simple to state and hard to follow by hand. Everything in a scene reads from one clock. Parts turn around their real pivots. Trailing parts follow a beat later.
The Reveal demo shows this clearly. A kid drops, lands, and kicks a ball, and the head and forearms follow through after the torso moves. The shadow breathes with the figure's height, so the whole scene stays on one timeline. When you hear "follow-through," this is what it means in practice: a lag, not a second animation.
Idle life is the other half. A figure that waits in a perfectly still pose looks dead. The skill keeps breathing, weight shift, and small looks running even while the main action plays.
Smooth Paths Through Key Poses with flow
The engine lives in motion.ts for React Native and Motion.swift for SwiftUI. Beyond the loop and one-shot clocks, it provides track, flow, seg, wave, loop, bell, seeded, and a set of curves.
flow is the one that matters most for acting. You give it key poses and it moves through them as a single path, so the arm carries its speed into the next pose. The trade-off is that you author the poses yourself. The skill can't invent good poses for you, and a weak set of keyframes will still look weak.
seeded is useful for anything that should look random but repeat exactly. The Garden demo uses seeded arcs for water drops, so each loop has the same drops in the same places. Random values without a seed make a loop look different every time it plays, which is a bug on a repeating animation.
Live Faces: Eyes, Mouths, and Blinks That Don't Flicker
Faces are where most drawings fail. liveFace.tsx and LiveFace.swift handle live eyes and mouths that glide, blink, and smile. You supply the geometry and colours, and the component handles the motion.
The blink rule is the one most people get wrong. A blink that closes and opens in a frame or two reads as a glitch, not a blink. Give it enough time to be seen as a blink, and let the eyes glide rather than snap. The face also needs to track something, even if only slightly. A face that stares straight ahead forever looks like a sticker.
Face geometry should be built so the eyes sit on their own layer, so the head can move without the eyes sliding off the skull. That's a rule you'll only learn after the first version breaks.
Measuring a Reference Video Frame by Frame
When you have a reference video, the skill doesn't guess. Here's where most guides go wrong: they treat motion as something you can see. Much of what makes a reference feel alive is too small for the eye to catch, such as a 2% jiggle, a float, or a sway.
Three tools handle this:
- sheet.sh builds contact sheets of a video at its full frame rate, so you can study timing.
- track_edges.py measures a subject's edges frame by frame, which is the practical route to frame-by-frame motion tracking for video.
- sample_colors.py reads exact colours from a frame, so your palette matches the reference.
Tracking has a limit. It measures edges, not intent. It tells you a shape moved 2%, but not whether that movement is charming or distracting. You still have to make that judgement by watching the result.
What the Four Demos Show
The repo includes four demo scenes. Each one teaches a different lesson you can reuse.
| Demo | Core mechanic | Lesson to reuse |
|---|---|---|
| Reveal (9-second loop) | Gravity drop, squash on landing, ball kick at the middle of the swing | Use flow plus follow-through for full-body acting |
| Garden (10-second loop) | Seeded drop arcs, stem grows in two pushes, petals open one by one | Use seeded for varied but repeatable timing |
| Chef (9.6-second loop) | Pancake flips, hat squash, hand solved onto the pan handle | Keep contact exact: every throw starts and ends on a real surface |
| Orbit | Ring of cards orbiting in depth, sparkles appear at seeded times | Sort parts by depth so fronts and backs swap correctly |
The Chef demo is the most instructive for a skeptical reader. The second flip goes too high, lands on the hat, and the pancake slides off. That reads as believable because the contact points are solved, not faked.
Caveats Before You Ship
A few things to know before you rely on this:
- The demo renderer targets macOS 14+ and needs
swiftcand ffmpeg. The MP4 and GIF outputs depend on that toolchain. - The 60 fps figure is the target the engine is built for. Your actual frame rate depends on your art, your screen, and how much you draw per frame. Test on a real device.
- The skill assumes you'll fill in MOTION.md. That file records where the code lives, your rules, and what your art can't do. Agents read it first, so skipping it means the agent guesses.
- More motion is not better. The skill argues for small amplitudes and strong curves, and that advice holds up. A big, constant bounce is the mistake it's trying to prevent.
- For motion inside an interface, the skill follows Emil Kowalski's rules and Benji Taylor's Family values. Read those too if your animation is part of UI, not just art.
Getting Started in Three Steps
- Install the skill with
npx skills@latest add rossark0/rossark-motion-skill. - Copy MOTION.md next to your artwork and fill in Part 2: the code location, your rules, and your art's limits.
- Ask your agent to animate one character for a single loop, then review the contact sheet before adding more.
Starting small matters because the first render will show you which rules your art actually needs.
Frequently Asked Questions
What is the Claude Code animation skill?
The Claude Code animation skill is a set of instructions, templates, and tools that helps an agent animate drawings and SVG art. It covers the principles for natural motion, a React Native or SwiftUI engine, live face components, and frame-by-frame measurement tools. It's designed for designers and engineers who want characters to breathe, blink, and act rather than swap frames.
How do I animate an SVG drawing with this skill?
Install the skill, copy MOTION.md next to your art, and fill in the code location and your art's limits. Then describe the action and ask your agent to build it on the engine's single clock, using flow for key poses. Review a contact sheet of the result before adding more motion.
Why does my animated character look like a slideshow?
Usually the face swaps between drawings and each pose gets its own easing, so the body stops at every keyframe. Route the motion through key poses as one continuous path, let parts follow through with a small delay, and keep idle motion running. A blink that's too short will also flicker, so give it enough time to read.
Does the skill work with both React Native and SwiftUI?
Yes. The repo includes motion.ts and liveFace.tsx for React Native, and Motion.swift and LiveFace.swift for SwiftUI. The demo renderer currently needs macOS 14+ to build, so check your toolchain before you start.
Animation that feels alive comes from one clock, real pivots, and small, well-timed motion, not from more easing. If you're wrestling with a character that looks like a slideshow, install the Claude Code animation skill this week, animate a single blink or breath, and note whether the result reads as alive. Pass this to someone fighting the same stutter.