Motion

This is the React animation library you've probably seen in production apps without realizing it. Motion handles everything from simple hover states to complex drag-and-drop interfaces, scroll-triggered parallax, and shared element transitions between pages. The API is declarative enough that basic fade-ins take three props, but it scales up to spring physics and SVG morphing when you need it. Bundle size ranges from 2.3 KB for the minimal useAnimate hook to 34 KB for the full motion component, with a 4.6 KB middle ground using LazyMotion. One catch: if you're deploying to Cloudflare Workers, you'll need to use the older framer-motion package instead due to build issues with Wrangler.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 13
skills.sh installs: 1.1K
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill motion --agent claude-code

Installs into .claude/skills of the current project.

Files

Motion Animation Library

Overview

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Key Capabilities:

Gestures: drag, hover, tap, pan, focus with cross-device support
Scroll Animations: viewport-triggered, scroll-linked, parallax effects
Layout Animations: FLIP technique for smooth layout changes, shared element transitions
Spring Physics: Natural, customizable motion with physics-based easing
SVG: Path morphing, line drawing, attribute animation
Exit Animations: AnimatePresence for unmounting transitions
Performance: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB)