一个能用手抓起来的果冻，一段会随鼠标流动的云海，一组按下就回弹的按钮——这些效果全部由浏览器实时算出来，没有一帧预录视频，也没有一张静态图片。softlab 这个项目，把网络上那些经典交互特效一个个拆开，还原成可以跑起来的代码。

每个特效都是一个独立页面

作者收集并复现了散落在网络各处的交互效果，为每一个都建了单独的展示页。打开页面，看到的是高保真的实时渲染：果冻被拉扯时的形变、多层次云海的缓慢流动、按钮上细微的反馈动作，都在浏览器里当场生成。

关键在于实现方式。所有效果都基于 WebGL、canvas 或 CSS 实时计算，而不是播放提前做好的视频或贴一张图。这意味着用户可以在运行时直接查看和修改底层参数，效果会跟着参数变化即时重算。

从按钮回弹到流体模拟

项目覆盖的场景跨度不小：

  • 简单的按钮回弹等微交互
  • 可抓取的果冻类形变效果
  • 多层次的云海动画
  • 复杂的流体模拟与天空盒动画

这些场景对应的是开发者在 UI/UX 设计和可视化实验中的真实需求——想做一个有质感的交互，往往卡在不知道物理行为该怎么用代码表达。softlab 把真实物体的行为拆解成可运行的代码，等于把"看起来很难"的效果降到了可以动手改的程度。

附带原理说明和可执行代码

每个特效除了展示最终效果，还配有详细的原理说明和可执行的代码。对前端开发者来说，这比单纯看一个炫酷 Demo 更有用：复杂的算法或物理模拟究竟怎么在 Web 平台上落地，可以顺着代码一行行读下去。

项目定位是学习资源，也是实验场。想理解某个效果背后的计算逻辑，或者想在自己的页面里复刻类似的交互，都能从这里找到起点。