rossark-motion: make drawings in your app feel alive
A Claude Code skill and small animation engine that turns SVG characters, plants, icons and whole scenes into smooth 60 fps loops in React Native or SwiftUI, with breathing, blinking, glancing eyes and follow-through instead of stiff pose-to-pose jumps.
In short: A Claude Code skill and small animation engine that turns SVG characters, plants, icons and whole scenes into smooth 60 fps loops in React Native or SwiftUI, with breathing, blinking, glancing eyes and follow-through instead of stiff pose-to-pose jumps. It is a free skill for people who use Claude Code and want help with motion graphics.
Real videos made with this skill, credited to their creators. Hover to preview.
MOTION0:09
rossark-motion launch loop: a drawn kid that feels alive
The skill's own demo: a silhouette floats in, a cartoon kid drops, lands with a squash, kicks a rolling ball and waves, all drawn and animated in code at 60 fps inside a phone frame.
Install command copied from the project README. Check the README for the latest version.
What it does
A Claude Code skill and small animation engine that turns SVG characters, plants, icons and whole scenes into smooth 60 fps loops in React Native or SwiftUI, with breathing, blinking, glancing eyes and follow-through instead of stiff pose-to-pose jumps.
A skill for designers and developers who want app illustrations to move like they are alive: it teaches the agent animator habits (one shared clock, real pivots, follow-through, idle motion that never stops) and ships…
Use rossark-motion-skill to bring the mascot in [file.svg] to life: an idle loop with breathing, blinks and a glance, then a wave when the screen opens.
Use rossark-motion-skill to bring the mascot in [file.svg] to life: an idle loop with breathing, blinks and a glance, then a wave when the screen opens.
Written by us so you can reuse it. Replace each [bracket] with your details.
Step by step
Open the GitHub repo and watch the demo loops in the README.
Copy MOTION.md next to your art and note where your code lives and what each drawing can do.
Ask your agent to animate a character or scene; give it a reference video if you have one so it can measure the motion first.
Watch out for
Built for app illustrations in React Native (SVG + Reanimated) and SwiftUI, not for exporting video files; re-rendering the demos as MP4 needs macOS 14+. Brand new (October 2026), so expect changes. The helper scripts (contact sheets, edge tracking, colour sampling) need ffmpeg and Python.
Common questions
What does rossark-motion do?
A Claude Code skill and small animation engine that turns SVG characters, plants, icons and whole scenes into smooth 60 fps loops in React Native or SwiftUI, with breathing, blinking, glancing eyes and follow-through instead of stiff pose-to-pose jumps.
Which AI agents can use rossark-motion?
It works with Claude Code. The code is on GitHub at rossark0/rossark-motion-skill.
Is rossark-motion free?
Free & open source (MIT). No account or API key needed.
How do I install rossark-motion?
Run the install command from the README: “npx skills@latest add rossark0/rossark-motion-skill”. Check the README on GitHub for the latest version, then follow the steps on this page.
Is rossark-motion safe to install?
We read 7 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.
Motion Prompt: name the motion you want, then hand it to your agent
A clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.
Claude Code +1★ 849
SKILL
pixelfx: 232 pixel-art effects in code, and a skill to make more
A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.
Claude Code★ 147
SKILL0:56
HyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34
/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28
Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILL
video-shotcraft: product films from your real screens
A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.
Claude Code +1★ 13.7k
Free newsletter
Friday Picks
New AI tools you can use right away, in plain words. Every Friday.