ProjectsOctober 18, 2026

Linear — 产品站的动效基准

image
打开 Linear 的首页,第一眼看到的是节奏,不是特效。滚动到不同区块时,文字的入场时间被控制得很紧:先标题、再副标题、最后是插画,间隔不超过 120ms。 真正值得学的是它的过渡曲线。大量元素用的是接近 cubic-bezier(0.16, 1, 0.3, 1) 的缓出,起步快、收尾极慢,看起来"贵"的原因就在这条曲线上,而不在用了多少 WebGL。 另一个细节:它几乎所有的 hover 都只改透明度和位移,不改尺寸。不改布局就不会触发重排,帧率自然稳。

Related projects

rauno.me — 交互细节的密度

rauno.me — 交互细节的密度

Vercel — 暗色系的对比度控制

Vercel — 暗色系的对比度控制

Bruno Simon — 3D 站点的性能取舍

Bruno Simon — 3D 站点的性能取舍

Apple — 滚动叙事怎么拆

Apple — 滚动叙事怎么拆