White Desert

一个探险公司的官网通常从风景讲起，先给你看冰，再讲住在哪里。这一支从行程讲起，而且是照着一张登机牌的顺序讲的。

首屏是一段南极冰面的循环视频，左边一行斜体写着在地球最远的地方享受奢华与冒险，底下 347px 的 ANTARCTICA 横满整个宽度。往下依次是行程、营地、航班、地图。

营地那一段是横向推进的。页面被钉住 945px 高，底下一条 7,370px 宽的轨道横着走，三张营地卡片一张一张从右边进来。每张卡片底部印着自己的坐标，Explorer 是 71º 31' 37" S, 8º 51' 20" E，Echo 是 71º32'47" S, 8º50'11" E。坐标不是装饰，营地在冰面上确实是靠坐标定位的，写出来比写地址诚实。

再往下是整个概念最清楚的一屏。画面上只有四个字母和一条横杠，CPT — WFR，开普敦到沃尔夫斯芬跑道，机场三字码的写法。字是半透明的白，压在一张冰川照片上，照片里只有一个穿橙色羽绒服的人在走。文字两侧各挂一组数据，左边 33º 58' 17" S 18º 36' 13" E 开普敦，右边 71º 31' S, 08º 48' E 沃尔夫斯芬跑道，中间还有飞行时间 05:30 hrs、4,220 km / 2,610 mi、-5°C / 23° F。

把一次旅行拆成航班信息来写，读者拿到的东西和营销文案完全不同。距离、时长、落地温度回答的恰好是所有人心里的头三个问题。到底有多远，要飞多久，冷到什么程度。

最后一屏把这条航线画出来。黑底上是南极洲的地形影像，一条青色的曲线从画面上方弯下来，落在一个会呼吸的圆点上，点旁边写着 Wolf's Fang Runway。这是全站唯一一次使用饱和色，青色 #6AF0FF 在整个页面上只出现在这两个元素身上。

三款字，分工不是按大小分的，是按断层分的。

正文是 Inter Tight，3,955 个字符压在 15px 这一档，另外几档 11、13、17 只写了一千多个字符，是标签和注脚。衬线是 Cardinal Classic Long，从 20px 到 152px 一共九档，章节标题、营地名、引文全归它。

Oswald 是这三款里做法最特别的一款。这款窄体只写了 269 个字符，却占掉全站最大的一块渲染面积，1,297,028 平方像素，比正文那 3,955 个字符还大两成。它的字号表是 15、17、20，然后直接跳到 277 和 347，中间一片空白。同一款字在这里干两件毫不相干的活，小到当标签，大到当风景的一部分，中间留出断层就是为了让这两种用法互不相认。

颜色收得同样狠。文字只有两个值，深蓝 #1F2A44 用在 342 个元素上，白用在 483 个。橙色 #FF7E15 在整个页面上只落在两个地方，跟随鼠标的那个点，以及右侧那条写着 How it works 的竖条按钮。青色只在地图上出现。

这就要说到那个最容易被当成疏漏的决定。整个站的上方常驻着一层六栏网格，position 是 fixed，z-index 是 2，不透明度写死在 0.1。它不随滚动走，不随章节变，从首屏一直挂到页脚。

栏位参考线通常只活在 Figma 里，上线之前要删掉。这里没删，而且 0.1 这个值调得很准。白底上只能看见极淡的竖线，压到照片上几乎消失，翻到黑底的地图那一屏完全看不见。白底那几屏因此有了一点结构感，深色内容又不会被它干扰。要照着做的人得知道，这条路只在配色极素的站上走得通，只要页面上出现第二个饱和色，10% 的网格线就会变成脏东西。

鼠标指针也重做了。默认状态是一个 4×4 的橙点，别的什么都没有。移到可以点的东西上面，从这个点的上下左右各伸出 12px 的线，四条线加中间的点合成一个十字准星。准星是测绘和导航用的符号，和这个站讲的事情对得上。它也比常见的放大圆圈克制，圆圈会遮住底下的内容，准星只在内容上划两道细线。

最见功夫的是那层玻璃，而且它的做法完全写在 DOM 里，可以直接抄。

每一个玻璃元素由三层叠出来。最底下是 liquid-glass__filter，身上挂着 backdrop-filter: blur(3px) 和一个 SVG 滤镜。中间是 liquid-glass__overlay，负责底色。最上面是 liquid-glass__specular，只有一条内阴影，rgba(255, 255, 255, 0.2) 偏移 0.35px，那是玻璃边缘那道高光。

真正让它不像普通毛玻璃的是那个 SVG 滤镜，链条一共三步：

feTurbulence  type=fractalNoise  baseFrequency=0.008  numOctaves=2  seed=100
feGaussianBlur  in=noise  stdDeviation=2
feDisplacementMap  in=SourceGraphic  in2=blurred  scale=40  xChannelSelector=R  yChannelSelector=G

先生成一张很低频的分形噪声，把它糊一下，再拿噪声的红绿通道去推原图的像素。推的幅度是 40。这一步做出来的就是真玻璃那种不均匀的折射——背后的冰面不是整体模糊，而是有地方被拉过去一点、有地方被推回来一点。单靠 backdrop-filter 只能得到均匀的雾，得不到这个。

这套组件在首页用了 12 次，尺寸从导航按钮的 130×43 一直到营地卡片的 960×720，中间还有 Watch Film 和那一栏 Flying time 05:30 hrs。同一个三层结构横跨七倍的尺寸差，没有换实现，说明它一开始就是当组件写的，不是给首屏特调的。

照着做的人要留意两件事。baseFrequency 0.008 配 scale 40 是校过的，噪声再密一点、位移再大一点，文字就开始糊，玻璃后面的东西认不出来。这两个数得一起调，不能单独动一个。另一件是性能，backdrop-filter 每出现一次就多一个独立的合成层，12 个还很轻松，几十个同屏就会开始掉帧。

滚动那一层交给了 Lenis 和 GSAP。打包文件里 gsap 出现 206 次、ScrollTrigger 18 次、lenis 44 次，three.js 一次都没有，版本是 GSAP 3.13.0。营地那一段就是标准的 ScrollTrigger 钉住加横移，轨道宽 7,370px，减去视口刚好是一屏多一点的横向行程。

航线的画法同样朴素。那条曲线是一条 64 个字符的三次贝塞尔，stroke-dasharray 写成 0px, 999999px，靠推 stroke-dashoffset 让它一点一点长出来。这是十几年前就有的描边动画，在这里够用得很，因为它要表达的只是一架飞机在往南飞。

连续滚动实测全程 60 fps，p95 帧耗时 18 毫秒，24,013px、25.4 屏走下来一帧没卡。

减弱动画这一项是空的。样式表里一条相关规则都没有，把系统偏好打开之后首屏那段视频照样在播。24 屏的视差加一段自动播放的循环视频，对前庭敏感的人来说恰好是最难受的组合，而这正是应该被接住的场景。

这个站真正有意思的地方，是它的性能分和它实际加载的东西看上去互相矛盾。

冷启动一次传 8.44 MB，91 个文件。视频 4.32 MB，走 Cloudflare Stream，1920×1080、17.5 秒、静音循环、preload 写的是 metadata。图片 2.19 MB，脚本 1.29 MB，字体 545 KB。

脚本这 1.29 MB 里，属于这个站自己的只有一小部分。Google Tag Manager 连同它拉起来的三个衡量库一共 659 KB，Facebook 像素 191 KB，HubSpot 的表单、横幅、会话和分析四个脚本加起来 121 KB，再加 Clarity 27 KB、Bing 17 KB、Metricool 6 KB。统计和营销这一摊是 939 KB，占了页面全部脚本的四分之三。

可是 WPO 拿了 8.00，是开发奖六项里最高的，而且实测支持这个分数。首字节 181 毫秒，首屏 860 毫秒，load 事件 1.9 秒，累计布局偏移是 0，长任务只有三个，最长 146 毫秒。

这两件事能同时成立，靠的是把首屏需要的东西压到了最少。文档本身 27 KB，样式表 34 KB，字体 545 KB，加起来六百多 KB 就能画出第一屏，视频和 939 KB 的统计脚本全部排在后面。布局偏移是 0 也不是运气，29 张图全部走 next/image，尺寸在 HTML 里就定好了，23 张标了 lazy，位置提前占住，后到的图只是往已经留好的框里填内容。

任何一个带市场部的站都会遇到同样的处境。埋点是业务要求，砍不掉。这个站给出的答案是不砍，但是让它们一个都不挡在首屏前面。

图片全部来自 Sanity 的 CDN，路径是 cdn.sanity.io/images/kq9qn5zn/production。奖项页的技术标签写的是 Contentful，页面上找不到任何 Contentful 的痕迹，整份文档里 sanity 出现了 193 次。

无障碍这边好的部分相当扎实。页面声明了语言，nav 和 main 两个地标都在，29 张图片全部带替代文字，91 个可聚焦控件里只有 4 个没有名字。弹出那个 How it works 面板的时候滚动是真的锁住的，html 上加了 lenis-stopped，body 的 overflow 变成 clip，关掉之后位置和滚动能力都回来了。

不足的地方也很集中。样式表里 focus-visible 只有一条规则，减弱动画一条都没有，页面没有跳转到主内容的链接。标题层级也有断档，文档里只有一个 H1，但是在第一个 H2 出现之前先排了七个 H3。这几条对应到分数上就是无障碍 7.00，六项里最低的一项。

四维里 Content 7.74 最高、Creativity 7.21 最低，这个排序在获奖站里不太常见。多数站赢在手法新，内容是补上去的。这个站反过来，飞行时间、距离、落地温度、营地坐标这些东西本身就是内容，评委给的分说明他们也是这么读的。乌克兰的 Denys Koloskov 给了 Content 一个 9，其余四位评委四项全填 7。

7.61 的开发奖分数反过来盖过了 7.31 的站点总分。WPO 8.00 是六项里最高的，对得上 860 毫秒首屏和 0 布局偏移。动效 7.80 第二高，对得上那层玻璃和全程不掉帧的 25 屏。无障碍 7.00 垫底，也对得上。西班牙的 CSS_killer 六项全给 9，奥地利的 Barry Baris Dogan 给到 6.90，两头差了 2.1 分，是这份票里最大的分歧。

Malvah 名下 26 件作品拿了 21 个 SOTD，命中率相当高，profile 上把报价区间也写出来了，三万到五万美元。Geoff Dawes 那 14 件全部挂在 Malvah 名下，是工作室的固定设计师而不是外部合作者。Usudo 是英国的全栈代理，名下只有这一件作品，White Desert 是他们的第一座奖。

工作室在开普敦，而这个站讲的航线正是从开普敦出发的。

FWA 上查不到这个站，它自己也没有挂对方的徽章。