Motion.dev Animations Skill
motion-dev-animations-skill
A Claude Code skill for Motion.dev, the successor of Framer Motion: 120 fps web animation, spring physics, scroll animation
- 160 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The frame rate has to be measured on your own project
- The skill is for Motion.dev
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-dev-animations-skillDetects 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 frame rate has to be measured on your own project
- The skill is for Motion.dev
This is third-party code. Review the repository files before installing.
What it does
Motion.dev Animations Skill teaches Claude Code to work with the Motion.dev library, the successor of Framer Motion: web animation at up to 120 frames per second, spring physics, scroll animation. The skill suits those searching for framer motion who want an agent to write animations against the current API and not from memory. Installation by cloning: `git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations`. MIT license.
Who it is for. For frontend developers on React and plain JavaScript who need smooth interface animation and scroll animation.
Good fit when
- You need Framer Motion or Motion.dev animations
- You need spring physics and scroll animation
- The agent writes outdated animation code
Not a fit when
- You need a ready animation without code: the skill teaches an agent to write code
- The project is not on a web stack
Example request
Add a spring appear animation and a scroll animation to a card with MotionLimitations
The skill is text and sets rules for writing animation. 120 frames per second depends on the device and browser, so measure on your own project. Access is minimal.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What is Motion.dev?
An animation library, the successor of Framer Motion.
What can the skill do?
It teaches an agent to write web animation, spring physics and scroll animation on Motion.dev.
How do I install it?
git clone of the repository into ~/.claude/skills/motion-dev-animations.
Discussion
No questions or reviews yet.
Related
SkillsA motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Motion Web
motion-web
Sites with motion first on pure Three.js, Canvas 2D, WebGL and CSS: damping physics, tokens, 7 examples. CC BY-NC 4.0 license
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Motion.dev Animations Skill (this entry) | no | 160 | |
| Motiscope | no | 122 | animation code from a screen recording, only your own samples |
| Design Motion Principles | no | 1,269 | interface motion principles for an agent |
| Bang Motion | no | 589 | intros, promos and kinetic typography in one HTML |
README in short
The README describes a Claude Code skill for Motion.dev with 120 fps animation, spring physics and scroll. MIT license.