这张开场动画最早的问题不是”要不要酷”,而是:进入一个个人站之前,能不能有一个短到不烦、但足够像门槛的瞬间。
我不想做常见的粒子场。粒子太容易变成”科技感”的默认答案:点、线、漂浮、聚合,最后像任何一个 AI 产品的 launch video。我们讨论到后来,更准确的词变成了 Widmanstätten:陨铁被切开、酸蚀之后露出来的交错晶格。它不是装饰线,它是材料的时间切面。
这个词一出来,动画的语法也跟着定了。
慢冷留下的秩序
维斯台登纹路真正迷人的地方,不是它像不像未来,而是它完全不是为了被看见而长出来的。
它形成在镍铁陨石极慢冷却的过程里。高温时混在一起的金属,在漫长时间里分出不同晶相;等它被切开、磨平、酸蚀,那些原本藏在内部的差异才显影出来。换句话说,这不是表面花纹,而是一个物体把自己的生成条件留在了身体里。
这点对我很重要。很多网页动画是在页面外面贴一层”氛围”,像给内容加滤镜。但陨铁纹路不是氛围,它是历史。它说的是:真正有质感的东西,不是被设计成复杂的,而是在足够长的约束、压力和冷却里长出了结构。
所以这张开场不该只是”漂亮的黑白线条”。它应该暗示一种更慢的价值观:
- 秩序不是从外面画上去的,而是从材料内部析出来的;
- 时间不是背景参数,而是形状本身的一部分;
- 切开不是破坏,有时是唯一能看见内部结构的方式;
- 显影总是发生在之后,不是在生长的当下。
放回这个站,这几乎就是我想要的进入隐喻。一个个人站如果值得留下,它不应该只展示结论,也应该让人看到那些结论是怎样慢慢冷却、分层、互相挤压出来的。开场动画里纹路的”生长”,不是炫技,而是在说:这里的内容也应该像截面一样,允许时间的纹理被看见。
不是背景,是截面
真正的 Widmanstätten 纹路有一种很反网页的气质:它不圆滑,不迎合,不解释自己。线条互相穿过,亮面和暗面互相压住,局部像金属刮伤,整体却有非常稳定的方向秩序。
所以实现里没有用一个大噪声图铺底,而是把画面拆成几类层:
- 三组相隔约 60° 的 lamellae,构成主要晶格方向;
- 小三角暗袋和 rhombus 亮面,让交叉处有金属截面的重量;
- 短促的 crosshatch、Neumann-like 细线和 polish scratches,让画面不是干净的 SVG 网格;
- 极少数近白 specular facet,只在局部闪一下,避免整屏发光。
它看起来复杂,但复杂不是重点。重点是:每一层都像从同一种材料里长出来。 这也是为什么它比普通”科技纹理”更合适:科技纹理通常在模拟控制感,维斯台登纹路则在承认控制之外还有时间、冷却和不可逆的生成。
生长比出现更重要
开场不是淡入一张图,而是让纹路从时间里”长”出来。代码里每个片段都有自己的 t0 和 dur,再用同一个 sweep direction 排出先后顺序。也就是说,你看到的不是随机冒点,而是一块截面被逐步显影。
这和站点本身的节奏有关。P1·103N1X 不是一个要马上把所有东西摊开的 landing page,它更像一本被切开的笔记本。开场纹路承担的角色是预告这个节奏:你不是进入一个 dashboard,你是在进入一个材料表面。 你看到的不是界面先欢迎你,而是材料先把它的年龄露出来。
标题也因此没有做花哨 reveal。“菲尼克斯”是硬切出来的。纹路已经足够动了,字就该停住。动的部分负责打开空间,不动的部分负责确认身份。
滚动退场
这个动画最关键的一处,其实是退场。
如果它只会播放完然后消失,它还是一个 splash screen。但现在它等待用户第一次滚动、移动或点击,再把已经长好的纹路反向擦除。进入网站不是”时间到了”,而是”你做了进入的动作”。
这个细节让我很喜欢:纹路不是被页面盖掉,而是自己退回黑场。像门帘,也像把一块金属截面重新收进暗处。
给这个站留下的规则
这次讨论最后留下来的不是某一张漂亮截图,而是一条更有用的规则:
视觉资产如果只是好看,很快会变旧;如果它解释了站点的进入方式,它就会变成结构的一部分。
Widmanstätten 纹路在这里不是”陨石主题”,也不是科幻皮肤。它更像这个站的第一句语法:黑底、材料、切面、缓慢显影,然后由用户的一次滚动把门打开。一个站也可以这样长出来:先有内部结构,再有截面,最后才有观看。
