微交互组件库
React动画Micro-interaction用户体验Motion更新于 2026-08-14
使用场景： 为任何界面做收尾：悬停/按压状态、开关弹性、点赞动画、按钮波纹等让产品活起来的小交互。
安装
npx skills add micro-interaction-library克隆
git clone https://github.com/skillhub-community/micro-interaction-library.git描述
受顶级产品（Linear、Stripe、Apple）启发的精选微交互库。组件：ButtonPress（按压缩小+墨迹波纹，可配置波纹原点）、SpringToggle（滑动时带弹性回弹的开关，悬停时旋钮阴影变大）、LikeHeart（点赞时粒子迸发+弹性弹出，超级赞带彩带）、DragFeedback（拖拽卡片倾斜、阴影增强、松手回弹或抛出）、NumberStepper（数字刻度滚动动画）与 InputFocusRing（标签浮动+强调环入场）。
每个交互都为手感而设计：时长控制在 100-300ms 黄金区间，自然减速的缓动（cubic-bezier(0.2, 0, 0, 1) 家族），用视觉反馈（阴影深度、缩放、光晕）而非仅颜色变化。附带「手感检查清单」组件，可在现有 UI 上运行，揪出死气沉沉的交互。所有组件尊重减少动态、支持键盘且焦点环可见。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖1