Motion 动画库：JavaScript/React/Vue 高性能动画解决方案，支持120fps GPU加速

motion by hairyf/skills

623 周安装量

8 GitHub Stars

安装命令

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

🇨🇳中文介绍

Motion 是一个面向 JavaScript、React 和 Vue 的开源动画库。它提供了一个简单的 API，对多平台提供一流的支持，其混合动画引擎结合了 JavaScript 与原生浏览器 API，可实现 120fps 的 GPU 加速动画，并具备生产就绪的特性，包括 TypeScript 支持、广泛的测试套件、可摇树优化的构建以及极小的体积。功能齐全：包含手势、弹簧动画、布局过渡、滚动关联效果和时间轴。

此技能基于 Motion v12.29.2 版本，生成于 2026-02-01。

核心参考

主题	描述	参考链接
Motion 组件	基础运动组件（motion.div, motion.svg 等）	core-components
基础动画	animate 属性，initial，while 状态	core-animation
JavaScript animate()	原生 animate()，序列，createScopedAnimate	core-javascript-animate
原生 scroll()	用于非 React 环境的命令式 scroll() 和 scrollInfo()	core-vanilla-scroll

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

776,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

261,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

210,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

140,500 周安装

主题	描述	参考链接
useMotionValue	为响应式动画创建和使用 motion 值	values-motion-value
useSpring	基于物理的弹簧 motion 值	values-spring
useTransform	使用函数转换 motion 值	values-transform
useMotionTemplate	将 motion 值组合成字符串（例如 filter, boxShadow）	values-motion-template
useFollowValue	以任意过渡跟随源值的 motion 值	values-follow
useScroll	滚动关联的 motion 值和动画	values-scroll
useVelocity	访问 motion 值的速度	values-velocity
useTime	基于时间的 motion 值	values-time
useWillChange	为动画元素提供 GPU 层提示	values-will-change

主题	描述	参考链接
拖拽	带约束和控制的拖拽手势	gestures-drag
平移	用于触摸和指针事件的平移手势	gestures-pan
点击与按压	点击和按压手势处理器	gestures-tap-press
悬停与聚焦	悬停和聚焦状态动画	gestures-hover-focus

主题	描述	参考链接
AnimatePresence	为进入和退出的组件添加动画	layout-animate-presence
usePresence / useIsPresent	在 AnimatePresence 子组件中访问存在状态	layout-use-presence
usePresenceData	在子代中读取 AnimatePresence 的自定义属性	layout-presence-data
LayoutGroup	跨组件协调布局动画	layout-group
布局动画	使用 layoutId 的自动布局动画	layout-animations
重新排序	带布局动画的拖拽重新排序	layout-reorder
useInstantLayoutTransition	阻止一帧内的布局更新	layout-instant-transition
useResetProjection	在结构变化后重置布局投影树	layout-reset-projection

主题	描述	参考链接
视口内	用于视口/可见性的 useInView, inView(), usePageInView	features-in-view
调整大小	用于窗口或元素大小的 resize() 观察器	features-resize
优化的出现动画	支持 SSR 的、带交接的出现动画	features-optimized-appear
SVG 路径	用于路径动画的 pathLength, pathOffset, pathSpacing	features-svg-path
motion/client	Next.js 的 "use client" 和可摇树优化的组件	features-react-client

主题	描述	参考链接
useReducedMotion	用于减少运动偏好的钩子	utils-reduced-motion
useAnimationFrame	与 Motion 循环同步的帧回调	utils-animation-frame
useCycle	循环遍历状态列表	utils-cycle
useMotionValueEvent	订阅 motion 值事件	utils-motion-value-event
delay	帧同步的延迟执行	utils-delay
interpolate	将输入范围映射到输出	utils-interpolate
useDomEvent	附加 DOM 事件监听器	utils-dom-event
useInstantTransition	在更新期间阻止布局动画	utils-instant-transition
calcLength / createBox / distance	投影几何与距离	utils-path-geometry

主题	描述	参考链接
动画控制	使用 useAnimation 进行程序化动画控制	advanced-animation-controls
useAnimate	命令式动画 API	advanced-use-animate
LazyMotion	代码分割动画以获得更好性能	advanced-lazy-motion
MotionConfig	全局配置和减少运动	advanced-motion-config
滚动动画	滚动关联动画和视差效果	advanced-scroll-animations
transformTemplate	自定义变换输出	advanced-transform-template
addScaleCorrector	布局投影缩放校正器	advanced-scale-corrector

主题	描述	参考链接
打包大小	入口点和优化策略	best-practices-bundle

🇺🇸English

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

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

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

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

Best Practices

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

Weekly Installs

578

Repository

hairyf/skills

GitHub Stars

First Seen

Jan 29, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

cursor565

claude-code515

trae468

codex130

opencode130

gemini-cli128

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装