Motion For Anything You Draw skill
A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
- 803 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill provides instructions and code templates, and the helper Python scripts only read reference videos.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-for-anything-you-drawDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill provides instructions and code templates, and the helper Python scripts only read reference videos.
This is third-party code. Review the repository files before installing.
What it does
The skill teaches an agent to animate drawn art the way animators do. By default an agent swaps one drawing for another, runs every pose through its own eased tween, moves everything in sync and makes blinks too short. The result looks like a slideshow. The skill lists these mistakes and fixes: one clock for the whole scene, body parts turning around real pivots, trailing parts and cloth lagging a beat, idle life that never stops, smooth paths between poses, small amplitudes and expressive curves. The repository holds recipes for characters, creatures, plants, cloth, fire, smoke, water, weather, light, machines, icons, logos and charts. For interfaces the skill follows Emil Kowalski's motion rules. The `MOTION.md` file is copied into your project and filled with your rules and art limits, and the skill reads it first. Engine templates in `motion.ts` for React Native and `Motion.swift` for SwiftUI contain clocks, `track`, `flow`, `seg`, `wave` and curves, and `liveFace` draws live eyes and mouths. The `sheet.sh`, `track_edges.py` and `sample_colors.py` tools take a reference video apart frame by frame: they show timing, catch 2% movements and sample exact colors. The `demo` folder has four finished scenes rendered to MP4.
Who it is for. Mobile developers and designers who draw illustrations in code for React Native or SwiftUI apps and want lively animation.
Good fit when
- An illustration in an app has to breathe, blink, shift its weight and react to what happens
- You have a reference video of the motion and need to measure its timing and small sway frame by frame
- A scene of several objects has to live on one clock with no desync or jumps
- A character's face has to change expression smoothly rather than switch between images
- You want live effects such as fire, smoke or water drawn in code with no ready-made video clips
Not a fit when
- The project is neither React Native nor SwiftUI: the engine templates are written only for them
- You need a ready animation editor with a graphical interface: the skill works in code
- You need animation for the web in CSS or GSAP: the skill targets mobile platforms
- You need Lottie output without code: the templates draw motion directly and do not create the Lottie format
Example request
Animate the SVG character in SwiftUI: breathing, blinking, eyes following a ball and a wave, all on one clock.Limitations
The engine and live-face templates are written for React Native and SwiftUI, and for other stacks you port them yourself. The demo scenes are re-rendered with `swiftc` and need macOS 14 or newer and ffmpeg to build the MP4.
The skill ships no graphic assets: you supply face geometry and colors. The section on motion in interfaces relies on a third-party author's rules, linked in the README.
The `track_edges.py` tool runs on Python and serves video analysis rather than the animation itself. The skill installs with `npx skills`, and the result, like any generated animation, has to be judged by eye on a device.
How to disable. Delete the skill folder from the agent's skills directory with `npx skills remove` or by hand. The `MOTION.md` file in your project stays and can be deleted separately.
FAQ
How do I install the skill?
With `npx skills@latest add rossark0/rossark-motion-skill`. It suits agents that read SKILL.md, including Claude Code, Cursor and Codex.
Which platforms are supported?
Engine templates exist for React Native as `motion.ts` and for SwiftUI as `Motion.swift`. The principles and recipes in SKILL.md are platform independent.
What is MOTION.md?
A notes file for your project: where the animation code lives, your rules, art limits and how you check changes. The skill reads it first.
Can I animate my own drawing from a reference video?
Yes. `sheet.sh` cuts a video into contact sheets, `track_edges.py` catches small sway and `sample_colors.py` samples exact colors from a frame.
What does the demo folder show?
Four scenes, Reveal, Garden, Chef and Orbit, written in SwiftUI with sources and finished MP4 files. Rendering is described in the README.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A skill that draws a UI component as an Apple-style sheet with spacing, radii and layers, plus a short film from it.
A skill and TypeScript library for live SVG scenes in an ink style: figures walk, react to clicks and the day turns to night
Motion2Code includes a web-animation skill: the agent checks output against source frames and shows both versions side by side.
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
Emil Kowalski's skills for designers and engineers
Skills For Designers and Engineers
Animation and UI detail skills from Emil Kowalski: curves, durations, animation reviews and picking UI libraries
README in short
The author explains how agent animation differs from an animator's and shows on four demo scenes the effect the skill aims for. The reference list describes SKILL.md, MOTION.md, an engine for two platforms and helper scripts. The license is MIT.