果冻特效是怎么做的

这个站的 hover 手感是刻意调过的：卡片上浮时带一点回弹，按钮按下去立即收缩，松手再弹回来。这篇拆解一下实现分层。

第一层：CSS 果冻贝塞尔

90% 的交互交给 CSS，零 JS 成本。关键是一条带 overshoot 的缓动曲线：

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card {
  transition: transform 0.45s var(--ease-spring);
}
.card:hover {
  transform: translateY(-2px) scale(1.012);
}
.card:active {
  transform: scale(0.985);
  transition-duration: 0.08s;
}

cubic-bezier 的第二个控制点纵坐标超过 1，就会产生「冲过头再弹回来」的果冻感。

第二层：motion 弹簧进场

「出现」类动效用 motion 的弹簧物理——真实的 stiffness / damping 参数，比贝塞尔更自然：

import { animate, stagger } from 'motion/mini';

animate('[data-spring-in] > *', {
  opacity: [0, 1],
  y: [8, 0],
}, {
  type: 'spring',
  stiffness: 170,
  damping: 20,
  delay: stagger(0.05),
});

参数直觉

• damping 越低越 Q 弹，但低于 10 会显廉价
• overshoot 控制在 10% 以内是高级感的边界
• 列表 stagger 间隔 50ms，比 100ms 更利落

动效的克制比堆料难得多——每个效果都要能回答「它让操作反馈更清晰了吗」。