Is motion-dev-animations-skill free to use? What license does it have?

motion-dev-animations-skill is open source under the MIT license. Check the license terms before using it in commercial products.

Is motion-dev-animations-skill still maintained?

No commits for 6+ months. The last commit to motion-dev-animations-skill was on Mar 30, 2026.

What can I use motion-dev-animations-skill for?

Adding a hero section entrance animation to a Next.js landing page Building scroll-linked parallax or progress effects for a marketing site Creating drag-to-reorder lists or hover and magnetic button interactions Giving a Svelte or Astro project consistent, accessible motion without reading the full API

How do I install motion-dev-animations-skill?

Clone the skill into your Claude Code skills folder: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations Ask Claude Code for an animation in natural language

Where can I get motion-dev-animations-skill?

The source code and installation instructions are on GitHub: https://github.com/199-biotechnologies/motion-dev-animations-skill

199-biotechnologies/motion-dev-animations-skill

A Claude Code skill that generates Motion.dev web animations for React, Next.js, Svelte and Astro, with accessibility and performance guidance built in.

View on GitHub

Stars: 194
Forks: 34
Open issues: 0
Last commit: 7 months ago

What is it?

This project is a Claude Code skill that teaches the assistant Motion.dev animation patterns, so it can generate TypeScript animation code from natural-language requests such as adding a hero entrance, parallax scrolling, or a draggable list. It targets React 19+, Next.js 15+, Svelte 5+ and Astro 4+, with Vue supported through the motion-v package.

The generated code favors GPU-accelerated properties (transform, opacity, filter), respects prefers-reduced-motion, and includes keyboard focus handling. The skill covers entrance animations, scroll effects, gesture interactions, micro-interactions and layout animations such as FLIP reorders, AnimatePresence accordions and layoutId tab transitions.

The repository is organized around progressive loading: a core instruction file is loaded first, while examples, API reference, spring presets, starter templates and a config validator are pulled in only when needed. It installs by cloning into the Claude Code skills directory or adding it as a git submodule.

Key features

01Generates Motion.dev animation code from natural-language prompts inside Claude Code
02Supports React, Next.js App Router, Svelte, Astro and Vue via motion-v
03Covers entrance, scroll, gesture, micro-interaction and layout animations
04Uses GPU-friendly transform and opacity properties and respects prefers-reduced-motion
05Includes example patterns, spring presets, starter templates and a config validator

Use cases

Adding a hero section entrance animation to a Next.js landing page
Building scroll-linked parallax or progress effects for a marketing site
Creating drag-to-reorder lists or hover and magnetic button interactions
Giving a Svelte or Astro project consistent, accessible motion without reading the full API

Quick start

1
Clone the skill into your Claude Code skills folder
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
2
Ask Claude Code for an animation in natural language

Things to know

It is a Claude Code skill, so it only works inside Claude Code and does not run as a standalone library.
The README lists framework support only for React, Next.js, Svelte, Astro, and Vue via a separate package, so other frameworks are not covered.

Topics

#animation #motion-dev #claude-code #react #nextjs #svelte #scroll-animations #typescript #accessibility #animation-library

FAQ

What is motion-dev-animations-skill?: A Claude Code skill that generates Motion.dev web animations for React, Next.js, Svelte and Astro, with accessibility and performance guidance built in. This project is a Claude Code skill that teaches the assistant Motion.dev animation patterns, so it can generate TypeScript animation code from natural-language requests such as adding a hero entrance, parallax scrolling, or a draggable list. It targets React 19+, Next.js 15+, Svelte 5+ and Astro 4+, with Vue supported through the motion-v package.
Is motion-dev-animations-skill free to use? What license does it have?: motion-dev-animations-skill is open source under the MIT license. Check the license terms before using it in commercial products.
Is motion-dev-animations-skill still maintained?: No commits for 6+ months. The last commit to motion-dev-animations-skill was on Mar 30, 2026.
What can I use motion-dev-animations-skill for?: Adding a hero section entrance animation to a Next.js landing page Building scroll-linked parallax or progress effects for a marketing site Creating drag-to-reorder lists or hover and magnetic button interactions Giving a Svelte or Astro project consistent, accessible motion without reading the full API
How do I install motion-dev-animations-skill?: Clone the skill into your Claude Code skills folder: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations Ask Claude Code for an animation in natural language
Where can I get motion-dev-animations-skill?: The source code and installation instructions are on GitHub: https://github.com/199-biotechnologies/motion-dev-animations-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.