d2741f39f3
基于 Wayfinder #99 决议，完成动效/响应式/无障碍三大维度落地： 1. 动效 token 迁移（CSS 动画） - 33 处 easing 替换为 var(--motion-ease-out/in-out/linear) - 7 处有限动画 duration 替换为 var(--motion-dur-*-calc) （含 motion-scale 降级，自动联动 prefers-reduced-motion） - canvas-node batch 动画内联值替换为 token 2. aceternityMotion 对齐 + motion/react 硬编码替换 - 添加 JS↔CSS token 映射文档注释 - 3 处 motion/react 硬编码 duration 替换为 aceternityMotion.* 引用 3. infinite 装饰动画 reduced-motion 降级 - L1 (prefers-reduced-motion): 缩短至 0.01ms + 单次播放 - L2 (.no-motion): animation: none 完全禁用 - 覆盖 9 个 infinite 动画类（连线流光/边框流光/极光标题等） 4. 响应式断点体系 - @theme 新增 3 断点 token: --breakpoint-tablet(768)/desktop(1024)/wide(1440) - 修复 canvas-toolbar 外观面板缺 max-w 导致移动端溢出 5. 无障碍 - 画布页新增 skip-to-content 链接（键盘用户跳过侧栏直达画布） - 任务进度面板 aria-live="polite"（屏幕阅读器播报任务数变化） Closes #99
32 lines
1003 B
TypeScript
32 lines
1003 B
TypeScript
/**
|
||
* 动效配置（对应 #99 动效系统）
|
||
*
|
||
* JS 侧 duration（秒）与 CSS token（毫秒）映射关系：
|
||
* instant 0.12s ≈ --motion-dur-fast (150ms)
|
||
* state 0.20s ≈ --motion-dur-fast (150ms)
|
||
* panel 0.32s ≈ --motion-dur-base (250ms)
|
||
*
|
||
* easing 与 CSS token 映射：
|
||
* enter [0.2, 0.85, 0.18, 1] ≈ --motion-ease-out
|
||
* exit [0.4, 0, 1, 1] ≈ --motion-ease-in
|
||
*
|
||
* prefers-reduced-motion 由组件层 useReducedMotion() 控制，
|
||
* CSS 层由 --motion-scale 联动（L0=1 / L1=0.3 / L2=0）。
|
||
*/
|
||
export const aceternityMotion = {
|
||
duration: {
|
||
instant: 0.12,
|
||
state: 0.2,
|
||
panel: 0.32,
|
||
},
|
||
spring: {
|
||
dock: { mass: 0.12, stiffness: 220, damping: 18 },
|
||
surface: { mass: 0.32, stiffness: 280, damping: 26 },
|
||
panel: { mass: 0.42, stiffness: 320, damping: 28 },
|
||
},
|
||
easing: {
|
||
enter: [0.2, 0.85, 0.18, 1] as const,
|
||
exit: [0.4, 0, 1, 1] as const,
|
||
},
|
||
} as const;
|