Motion

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.

hairyf/skills·821installs25starsDesign & UI/UX

SKILL.md

Full skill instructions

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
Basic Animation	animate prop, initial, while states	core-animation
JavaScript animate()	Vanilla animate(), sequences, createScopedAnimate	core-javascript-animate
Vanilla scroll()	Imperative scroll() and scrollInfo() for non-React	core-vanilla-scroll
motionValue	Create MotionValues without React	core-vanilla-motion-value
stagger	Orchestrate child delays in variants	core-stagger
frame / cancelFrame	Motion's animation loop	core-frameloop
motion/mini	Minimal bundle entry	core-motion-mini
Variants	Declarative animation variants and orchestration	core-variants
Transitions	Animation timing, easing, spring physics	core-transitions

Motion Values

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

Gestures

Topic	Description	Reference
Drag	Drag gestures with constraints and controls	gestures-drag
Pan	Pan gestures for touch and pointer events	gestures-pan
Tap & Press	Tap and press gesture handlers	gestures-tap-press
Hover & Focus	Hover and focus state animations	gestures-hover-focus

Layout Animations

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

Features

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

Utils

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

Advanced

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

Best Practices

Topic	Description	Reference
Bundle Size	Entry points and optimization strategies	best-practices-bundle

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/hairyf/skills --skill motion

View on GitHub

motion

More Design & UI/UX skills

View all

Design & UI/UX

gpt-taste

gpt taste

92.7K 355.7K

View

Design & UI/UX

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K

View

Design & UI/UX

image-to-code

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K

View

Design & UI/UX

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Design & UI/UX

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Design & UI/UX

Emil Design Engineering

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K

View

Design & UI/UX

impeccable

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K

View

Design & UI/UX

extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K

View

Design & UI/UX

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K

View

Design & UI/UX

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K

View

Design & UI/UX

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View

Design & UI/UX

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K

View