←Leaderboard/Design/rossark-motion-skill
Last commit on October 22, 2026·Created on October 22, 2026

rossark0/rossark-motion-skill

“Translates static illustrations into believable motion for mobile and web interfaces”
Combined rank
#636
across all skills
In Design
#69
category rank
Stars
352
7d change unavailable
Forks
27
Watchers
1
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill provides a framework for animating characters, creatures, and environmental elements with natural movement. It helps developers transform static drawings into living scenes by applying specific motion patterns to pupils, breathing, and full-body acting.

Designed for React Native and SwiftUI developers, the skill includes a motion engine and templates using react-native-svg, Reanimated, TimelineView, and Canvas to ensure high-frame-rate execution.

WHO IT'S FOR
React Native developers
animate SVG illustrations using Reanimated
SwiftUI developers
create high-fps animations with TimelineView and Canvas
Product designers
turn static mascots and icons into living art
Frontend engineers
implement believable motion for web-based SVGs
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Install rossark-motion-skill

Installs: The rossark0/rossark-motion-skill repository skill and accompanying resources.

  1. Run this command in a terminal.

    npx skills@latest add rossark0/rossark-motion-skill
README.md ↗ · Checked Oct 23, 2026

Give it something to do.

Suggested first task

Give a mascot subtle idle motion

Uses rossark-motion-skill

  • The existing mascot illustration and its source code location.
  • The project's platform and existing animation setup.
  • Any existing MOTION.md or other project animation rules.
Use rossark-motion-skill to add subtle breathing and occasional blinks to my existing mascot illustration. Read the project's motion notes first and follow its rules. Keep the layout fixed, interpolate movement smoothly, and keep the motion calm and small. Freeze idle loops at a good still frame when reduced motion is enabled, and pause animation when hidden or off screen.
SKILL.md ↗ · Checked Oct 23, 2026