Skip to content
Get Friday PicksSubmit

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.

Checked on · Added

Open on GitHub · ★ 497

Works with

Agent / toolAccess / costLink
Claude CodePaid Claude plan or APIclaude.com/claude-code
GitHub repoOpen source · ★ 497rossark0/rossark-motion-skill
rossark-motion: make drawings in your app feel alive

Image: from the GitHub README, shown with credit.

Image from the rossark0/rossark-motion-skill README

Images from the project README on GitHub.

Reference videos (1)

Real videos made with this skill, credited to their creators. Hover to preview.

rossark-motion launch loop: a drawn kid that feels alive thumbnailMOTION0: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.

rossark-motion@rossark0♥ 2k

Try it in 60 seconds

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

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…

Short excerpt from the README of rossark0/rossark-motion-skill. Read the full README on GitHub.

Inside the repo

InstallWhy use it?ReferenceDemos

A prompt to try

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

  1. Open the GitHub repo and watch the demo loops in the README.
  2. Install: npx skills@latest add rossark0/rossark-motion-skill
  3. Copy MOTION.md next to your art and note where your code lives and what each drawing can do.
  4. 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.

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.

Related skills and use cases in Motion Graphics

See all Motion Graphics entries →

Related

Motion Prompt: name the motion you want, then hand it to your agent thumbnailSKILL

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 logoCodex logoClaude Code +1★ 849
pixelfx: 232 pixel-art effects in code, and a skill to make more thumbnailSKILL

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 logoClaude Code★ 147
HyperFrames: write HTML, get a video thumbnailSKILL0: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 logoCodex logoClaude Code +1★ 63.8k
/brag: turn a finished project into a launch video thumbnailSKILL0: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 logoCodex logoClaude Code +1★ 16k
Anatomy: interactive isometric illustrations thumbnailSKILL0:28

Anatomy: interactive isometric illustrations

Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.

Claude Code logoCodex logoClaude Code +1★ 10.6k
video-shotcraft: product films from your real screens thumbnailSKILL

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 logoCodex logoClaude Code +1★ 13.7k

Free newsletter

Friday Picks

New AI tools you can use right away, in plain words. Every Friday.

Free. No spam. Unsubscribe anytime.