这是一款玻璃折射首屏效果,基于 Three.js 实现。米白底色上是三行加粗的大标题,中间悬着一个缓慢旋转的透明玻璃扭结体。它像一块真玻璃一样把背后的文字扭曲、放大、错位,边缘还会分离出彩虹色的光边,鼠标移动时角度跟着微微偏转,文字的变形也随之流动。
这个效果好在克制。整个页面只有一个几何体、一段文字和一行导航,靠玻璃本身的折射制造视觉张力,不靠花哨的动画堆料,很符合当下高端品牌站的审美取向。玻璃质感是用真实的物理材质算出来的,包括透光、厚度和色散,不是贴图伪造的。
技术上有两点值得一提:标题文字是先画在画布上再作为贴图放进 3D 场景的,所以缩放窗口时排版会重新计算,不会糊;另外它检测了系统的"减少动态效果"偏好,开启后会停在静止画面,对晕动敏感的用户比较友好。
适合设计工作室、品牌官网、作品集的首屏,也适合产品发布页和展会活动页。