动效设计系统

描述

把动画规则编码为 token 与预设的动效设计系统工具包。提供精选 token 集：时长（fast 100ms / base 200ms / slow 400ms / deliberate 700ms）、缓动曲线（标准减速、加速、强调 cubic-bezier；弹性物理预设）与按间距比例派生的位移/缩放距离。附带预设「动效模式」（Fade、Slide-up、Scale-in、Swap），以配置对象形式可复用于 Framer Motion、GSAP 或 CSS 过渡。

提供注入这些 token 到 context 的 MotionProvider、给组件作者的 useMotionTokens() hook，以及 MotionPreview 试玩页——设计师可实时调时长/缓动并复制结果配置。覆盖编排原则：子元素 40-60ms 间隔、每元素最多动画 2 个属性、进出场不要用相同时长+切换（出场要更快）、始终经全局开关尊重 prefers-reduced-motion。含动效审查清单供复盘现有页面。

元数据