Rossark Motion: idle animation for anything drawn

rossark-motion-skill names the mistakes that turn an animated mascot into a slideshow (a face that jumps between expressions, a body that stops dead at every pose, parts that move in sync) and gives the fix for each. It began as the method its author used to animate the illustrations in an app of their own, and now covers characters, plants, fire, weather, icons and charts too. It's MIT licensed. If you haven't installed a skill before, start with Claude Code skills.

The method

Twelve principles open the SKILL.md, among them:

• Never teleport. A pupil slides and a door swings; nothing snaps between drawings.
• Pivots and follow-through. Each part rotates around its real joint, and hair, tails and forearms trail their parent by 60 to 150 ms.
• One main action, plus two or three idle loops. The rest of the scene stays quiet.

Section 3 is a recipe table by subject: a candle flame leans 2 to 4 degrees on two waves of different periods, a plant sways 1.5 to 4 degrees from its base, a phone buzzes in bursts of about 0.45 seconds. For interface motion it follows Emil Kowalski's rules and Benji Taylor's Family values, with durations such as 100 to 160 ms for press feedback and up to 500 ms for sheets.

What's in the repository

• Engines for React Native (react-native-svg with Reanimated) and SwiftUI (TimelineView with Canvas): loop and one-shot clocks, keyframe tracks, a flow function that passes through poses without stopping, waves and seeded variety.
• Live-face templates with eyes and mouths that glide, blink and smile. You supply the geometry and colors.
• Reference-video tools. Given a clip and "make it like this", the skill studies it frame by frame with contact sheets, edge tracking and color sampling, built on ffmpeg and Python's standard library.
• MOTION.md, a notes file you keep next to your art. The skill reads it first, and its rules override the skill's own.

How to install it

npx skills@latest add rossark0/rossark-motion-skill

Then ask in plain words, for example "make this mascot feel alive" or "add idle motion to the onboarding illustration".

Example request

Use rossark-motion-skill. Animate [file with the SVG or drawing] in [React Native / SwiftUI]. One main action: [what happens]. Add two idle loops, keep the amplitudes small, and make frame 0 work for reduced motion.

Limits

• Two platforms get code. The web gets the method alone, applied with requestAnimationFrame and SVG or CSS transforms; there's no web template.
• Offline rendering is macOS-only. Turning a scene into MP4 or GIF without a device uses SwiftUI's renderer and macOS 14 or newer.
• Video tools need ffmpeg and Python 3 installed.

When to use it

• Onboarding, paywall or empty-state art in a mobile app that looks flat.
• Recreating the motion of a reference clip someone sent you.

To clean up a vibecoded screen before it gets any motion, use Unslop, whose last pass cuts looping pulses and bouncy hovers.