给博客装上弹簧：物理动效落地记

所有动效基于弹簧物理模型，拒绝线性过渡——这是这个站的第一动效原则。

弹簧参数

三档令牌，覆盖全站：

export const SPRINGS = {
  a: { type: "spring", stiffness: 320, damping: 18, mass: 1 },
  b: { type: "spring", stiffness: 300, damping: 20, mass: 1 },
  c: { type: "spring", stiffness: 280, damping: 22, mass: 1 },
};

• a（果冻）：按压回弹、指示条——阻尼低，回弹可见
• b（标准）：面板、模态进出
• c（柔和）：磁吸跟随、滚动 reveal——过冲极短

回弹要克制

位移类过冲不超过 15%，旋转不超过 2°。弹簧的意义是「重量感」，不是「弹跳表演」。

工程约束

1. 只驱动 transform / opacity / clip-path，绝不碰布局属性
2. 指针事件 rAF 合帧，点击反馈第一帧 ≤ 100ms
3. 触屏、低端、减弱动效三档降级，由全局 Provider 统一注入

这三条比参数本身更重要——参数决定手感，约束决定它能不能一直 60fps。