Agent skill · software engineering · secondsky
motion
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
Why this skill is useful
Provides specific commands and patterns for implementing complex animations in React applications that the AI wouldn't reliably generate on its own.
What it needs
Requires motion installed locally. About 8k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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) Recommended Stack: React 19, Next.js 16, Vite 7, Tailwind v4 --- When to Use This Skill ✅ Use Motion When: Complex Interactions: Drag-and-drop interfaces (sortable lists, kanban boards, sliders) Hover states with scale/rotation/color changes Tap feedback with bounce/squeeze effects Pan gestures for mobile-friendly controls Scroll-Based Animations: Hero sections with parallax layers Scroll-triggered reveals (fade in as elements enter viewport) Progress bars linked to scroll position Sticky headers with scroll-dependent transforms Layout Transitions: Shared element transitions between routes (card → detail page) Expand/collapse with automatic height animation Grid/list view switching with smooth repositioning Tab navigation with animated underline Advanced Features: SVG line drawing animations Path morphing between shapes Spring physics for natural bounce Orchestrated sequences (staggered reveals) Modal dialogs with backdrop blur Bundle Optimization: Need 2.3 KB animation library (useAnimate mini) Want to reduce Motion from 34 KB to 4.6 KB (LazyMotion) ❌ Don't Use Motion When: Simple list animations (use auto-animate instead: 3.28 KB vs 34 KB) …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/motion