Framer Motion 动效组件库
ReactFramer Motion动画Motion用户体验更新于 2026-08-14
使用场景： 用 Framer Motion 构建 React 界面：手势驱动 UI、弹性物理动画、布局过渡，以及路由或条件内容的进出场动画。
安装
npx skills add framer-motion-kit克隆
git clone https://github.com/skillhub-community/framer-motion-kit.git描述
一套完整的 Framer Motion 组件库。核心覆盖：motion.div/motion.button 与 variants API 编排多元素动画、弹性物理（stiffness/damping/mass）做自然感的 UI、手势处理器（whileHover、whileTap、whileDrag、whileFocus）、带约束与弹性边界的拖拽、滚动联动值（useScroll、useTransform）做视差与进度，以及 layoutId/layout 动画在重排时让元素平滑形变。
包含 AnimatePresence 做进出场动画（弹窗、toast、条件列表），支持自定义 variants 与 mode='wait' 排序、useAnimate 做事件处理器命令式动画，以及组件画廊：手风琴、拖拽重排列表、共享布局 tab 指示器、弹性开关、磁吸按钮与物理感卡片堆叠。每个组件都是带源码的独立示例。覆盖 MotionConfig 下的减少动态与 'once: { amount: 0.5 }' 视口出场模式。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖0