SkillsAdd

hairyf/skills

motion

Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.

All-time #9473 First seen Jan 29, 2026
8-week activity · all time api

Installation

$ npx skills add hairyf/skills --skill motion
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Same topic
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Same topic
vercel-labs/agent-skills 326.5K installs
supabase Same topic
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
vercel-react-native-skills Same topic
vercel-labs/agent-skills 205.5K installs
vercel-react-view-transitions Same topic
vercel-labs/agent-skills 115.9K installs

Also in this package

Other skills from hairyf/skills · top by installs.

npx skills add hairyf/skills
tailwindcss 3K hairy-utils 1.1K next 809 react-use 807 valtio 743 valtio-define 714 openapi-specification-v3.2 713 hairy-react-lib 713 vitest 646 overlastic 639

Browse all from hairyf/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 25
License LICENSE.md
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version2026.2.1
More metadata
author
Hairyf
version
2026.2.1
source
Generated from https://github.com/motiondivision/motion, scripts located at https://github.com/antfu/skills

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 7,925 B
  • docs SUMMARY.md 206 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1,100 installs

SKILL.md

Motion is an open-source animation library for JavaScript, React, and Vue. It provides a simple API with first-class support for multiple platforms, a hybrid animation engine combining JavaScript with native browser APIs for 120fps GPU-accelerated animations, and production-ready features including TypeScript support, extensive test suite, tree-shakable builds, and a tiny footprint. Batteries included: gestures, springs, layout transitions, scroll-linked effects, and timelines.

The skill is based on Motion v12.29.2, generated at 2026-02-01.

Core References

Topic Description Reference
Motion Components Basic motion components (motion.div, motion.svg, etc.) [core-components](references/core-components.md)
Basic Animation animate prop, initial, while states [core-animation](references/core-animation.md)
JavaScript animate() Vanilla animate(), sequences, createScopedAnimate [core-javascript-animate](references/core-javascript-animate.md)
Vanilla scroll() Imperative scroll() and scrollInfo() for non-React [core-vanilla-scroll](references/core-vanilla-scroll.md)
motionValue Create MotionValues without React [core-vanilla-motion-value](references/core-vanilla-motion-value.md)
stagger Orchestrate child delays in variants [core-stagger](references/core-stagger.md)
frame / cancelFrame Motion's animation loop [core-frameloop](references/core-frameloop.md)
motion/mini Minimal bundle entry [core-motion-mini](references/core-motion-mini.md)
Variants Declarative animation variants and orchestration [core-variants](references/core-variants.md)
Transitions Animation timing, easing, spring physics [core-transitions](references/core-transitions.md)

Motion Values

Topic Description Reference
useMotionValue Create and use motion values for reactive animations [values-motion-value](references/values-motion-value.md)
useSpring Spring-based motion values with physics [values-spring](references/values-spring.md)
useTransform Transform motion values with functions [values-transform](references/values-transform.md)
useMotionTemplate Combine motion values into a string (e.g. filter, boxShadow) [values-motion-template](references/values-motion-template.md)
useFollowValue Motion value that follows a source with any transition [values-follow](references/values-follow.md)
useScroll Scroll-linked motion values and animations [values-scroll](references/values-scroll.md)
useVelocity Access velocity of motion values [values-velocity](references/values-velocity.md)
useTime Time-based motion values [values-time](references/values-time.md)
useWillChange GPU layer hint for animating elements [values-will-change](references/values-will-change.md)

Gestures

Topic Description Reference
Drag Drag gestures with constraints and controls [gestures-drag](references/gestures-drag.md)
Pan Pan gestures for touch and pointer events [gestures-pan](references/gestures-pan.md)
Tap & Press Tap and press gesture handlers [gestures-tap-press](references/gestures-tap-press.md)
Hover & Focus Hover and focus state animations [gestures-hover-focus](references/gestures-hover-focus.md)

Layout Animations

Topic Description Reference
AnimatePresence Animate components entering and exiting [layout-animate-presence](references/layout-animate-presence.md)
usePresence / useIsPresent Access presence state in AnimatePresence children [layout-use-presence](references/layout-use-presence.md)
usePresenceData Read AnimatePresence custom prop in descendants [layout-presence-data](references/layout-presence-data.md)
LayoutGroup Coordinate layout animations across components [layout-group](references/layout-group.md)
Layout Animations Automatic layout animations with layoutId [layout-animations](references/layout-animations.md)
Reorder Drag-to-reorder with layout animations [layout-reorder](references/layout-reorder.md)
useInstantLayoutTransition Block layout update for one frame [layout-instant-transition](references/layout-instant-transition.md)
useResetProjection Reset layout projection tree after structural change [layout-reset-projection](references/layout-reset-projection.md)

Features

Topic Description Reference
In View useInView, inView(), usePageInView for viewport/visibility [features-in-view](references/features-in-view.md)
Resize resize() observer for window or element size [features-resize](references/features-resize.md)
Optimized Appear SSR-friendly appear animations with handoff [features-optimized-appear](references/features-optimized-appear.md)
SVG Path pathLength, pathOffset, pathSpacing for path animations [features-svg-path](references/features-svg-path.md)
motion/client Next.js "use client" and tree-shakable components [features-react-client](references/features-react-client.md)

Utils

Topic Description Reference
useReducedMotion Hooks for reduced motion preference [utils-reduced-motion](references/utils-reduced-motion.md)
useAnimationFrame Frame-synced callback with Motion's loop [utils-animation-frame](references/utils-animation-frame.md)
useCycle Cycle through a list of states [utils-cycle](references/utils-cycle.md)
useMotionValueEvent Subscribe to motion value events [utils-motion-value-event](references/utils-motion-value-event.md)
delay Frame-synced delayed execution [utils-delay](references/utils-delay.md)
interpolate Map input range to output [utils-interpolate](references/utils-interpolate.md)
useDomEvent Attach DOM event listeners [utils-dom-event](references/utils-dom-event.md)
useInstantTransition Block layout animations during update [utils-instant-transition](references/utils-instant-transition.md)
calcLength / createBox / distance Projection geometry and distance [utils-path-geometry](references/utils-path-geometry.md)

Advanced

Topic Description Reference
Animation Controls Programmatic animation control with useAnimation [advanced-animation-controls](references/advanced-animation-controls.md)
useAnimate Imperative animation API [advanced-use-animate](references/advanced-use-animate.md)
LazyMotion Code-split animations for better performance [advanced-lazy-motion](references/advanced-lazy-motion.md)
MotionConfig Global configuration and reduced motion [advanced-motion-config](references/advanced-motion-config.md)
Scroll Animations Scroll-linked animations and parallax effects [advanced-scroll-animations](references/advanced-scroll-animations.md)
transformTemplate Custom transform output [advanced-transform-template](references/advanced-transform-template.md)
addScaleCorrector Layout projection scale correctors [advanced-scale-corrector](references/advanced-scale-corrector.md)

Best Practices

Topic Description Reference
Bundle Size Entry points and optimization strategies [best-practices-bundle](references/best-practices-bundle.md)