做动效还在凭感觉？24 万 Star 的 motion-foundations 给你一整套设计语言

你有没有过这种体验：点开一个 SaaS 落地页，按钮 hover 上去”啪”一下弹起来，卡片入场的弧线舒服得像自带重力，页面切换丝滑到你截图发推……而你照着同一个组件库抄，效果就是”廉价 AI 味儿”？

差距从来不在组件，在 motion。今天推荐的 motion-foundations（affaan-m/ECC，24 万 Star）就是给 React/Next.js 项目打底的一整套动效语言——读完你就能让 Agent 写出来的 UI 拥有 Awwwards 那种”会呼吸”的质感。

它到底解决什么问题

99% 的前端项目里，动画是这样的：按钮 transition 写了 0.2s ease-in-out、卡片 hover 写了 transform: translateY(-4px)、弹窗写了 300ms…… 每个开发者各写一套，没有统一的设计语言。结果就是同一个产品里 transition 时长从 150ms 到 600ms 都有，缓动曲线混着 linear / ease / cubic-bezier 全用了一遍。

motion-foundations 给了你四个原子层：

• motionTokens：duration / easing / distance / scale 四类数值常量
• springs 预设：5 个命名弹簧（snappy / gentle / bouncy / soft / stiff）
• shouldAnimate()：所有组件共用的”该不该动”闸门
• useReducedMotion()：SSR 安全的无障碍兜底

三条不容商量的硬规则

这个 Skill 最值钱的部分不是 tokens，而是它把团队容易踩的坑变成了”规则”。比如：

• 只用 motion/react，绝不允许从 framer-motion 直接 import
• initial 必须跟服务端输出一致，避免 hydration mismatch
• 永远不对 width / height / top / left 做动画，只用 transform + opacity

把这三条塞进 SKILL.md，Agent 在写动效时就会自动绕开你团队踩过无数次的坑。

谁来用最香

• 做设计系统：直接把 tokens 抽出来接到 Tailwind / shadcn，整个体系一套动效
• 做 SaaS / 工具类产品：按钮、卡片、抽屉、Toast 全套丝滑，体感直接拉满
• 做创意展示站 / 作品集：Awwwards 那种”动画叙事”的入场、hover、scroll-linked reveal 全覆盖

快速上手

一行命令装到项目：

npx skills add affaan-m/ecc --skill motion-foundations

它会自动生成 motionTokens 对象、5 个 spring preset、useReducedMotion hook，以及一份”什么时候该用哪种 duration / 哪种 spring”的决策表。配合同仓库的 motion-patterns（具体组件动效）和 motion-advanced（手势 / 拖拽 / SVG 动画）使用，能直接撑起一个完整的产品级动效体系。

为什么我推荐它

市面上讲 CSS transition 的教程多如牛毛，但讲”动效作为设计语言”的几乎没有。motion-foundations 难得地把 token、preset、accessibility、SSR 性能四件事捆在一起，而且每条规则背后都给了 why。当你下次写 transition 时不再拍脑袋，而是翻一眼 tokens 表——那一刻你就懂了什么叫专业的设计系统。

GitHub: https://github.com/affaan-m/ECC/tree/main/skills/motion-foundations