Sobha Privy Collection

Sobha Realty 是迪拜的大型开发商，Privy Collection 是它从自家楼盘里挑出来的一个顶级子系列，站上称之为迪拜最稀有的豪宅精选。整个站围绕一句口号展开，The Art of the Sublime，意思是崇高的艺术，站上把崇高当成一种可以被挑选出来的品质来讲。首页是一整条竖向长页，总高 48,763 像素，分六个章节往下走。About 讲什么是崇高，Collection 讲三种房型，Tenets 讲七条入选标准，Selection 讲怎么挑选，Locations 讲四个楼盘在哪，The Idea 是董事长 Ravi Menon 的三段话。

这个站什么都不卖，全站没有任何一套房的价格、户型或面积，也没有咨询表单、电话和邮箱。最后一章是一张白色卡片，上面写着 Feel the Sublime。卡片底下的网页代码里留着一个空的表单标签，里面一个输入框都没有。页脚只有三个链接，3D 地图、回到顶部和 Vide Infra 的署名。想知道更多的人只有一条路，就是打开那张地图。

四个楼盘要到 Locations 那一章才露面，分别是迪拜主干道 Sheikh Zayed Road 上的 The S 顶层公寓、Dubai Harbour 的 Sobha Seahaven、市中心旁边的 Sobha Hartland II，以及远在乌姆盖万的 Sobha Siniya Island。每个楼盘都只有一段介绍和一个标志，连一张房子的照片都没有。七条入选标准占了首页最长的一段，将近两万像素。这七条是 Expansive Spaces、Iconic Addresses、Uncompromising Finesse、Exclusive Amenities、Exceptional Service、Extraordinary Privacy 和 A Cut Above，每一条配一段文字、几张效果图和一段视频。全站的图片几乎都是电脑渲染的效果图，真人只出现了三次，一个戴帽子的女人，一个在无边泳池里的女人，还有董事长的黑白肖像。

一条黑色缎带是这个站的视觉标志。首屏是一段视频，黑色的缎带在黑底上慢慢翻卷，光顺着它的边缘滑过。The art 用手写体压在缎带上，OF THE SUBLIME 用细衬线体排在下面。这条黑色缎带在首屏之后还出现了三次。访客打开菜单时，这条缎带会在章节名后面转动。在 Sublime 那一屏，它绕着一个戴帽子的女人。到了董事长那一章，它变成白色，铺在一整面白墙上。

这个站从头到尾的用色只分黑白两档。深色章节用 rgb(26, 25, 25) 和纯黑，浅色章节用纯白。文字只有白、近黑和一种灰 rgb(113, 113, 112)，灰色专门留给手写体和大段引言。彩色全部来自图片，暖米色的客厅、落日下的泳池、蓝色的海。章节按明暗交替往下排，黑色的首屏，白色的 About，黑色的 Collection，白色的 Tenets，黑色的 Selection 和 Locations，白色的 The Idea，最后回到黑色的页脚。每次底色翻转，页眉的字也跟着换色，到了白底的章节，Menu 和 3D Map 就变成近黑。

所有标题都用衬线体 TT Ramillas 的细体，全部大写，章节名 160 像素，正标题 110 像素，副标题 70 像素，小标题 36 像素，字母间距一律放宽百分之二。Altesse 是一款手写体，全站只用它写了 104 个字符，每次都是标题前面引出标题的一两个词，The art、The three、Iconic、Exclusive、Extraordinary、Handpicked、Projects、Feel。这些词都是 140 像素，放在大写衬线标题的上一行，像请柬上手写的一笔签名。正文和标签用 TT Commons Pro，段落 16 像素，标签是 13 像素的大写小字。三万多个字符的正文，在页面上占的面积加起来还不到细体大标题的三十分之一。

版面上视觉分量最重的一屏，是 About 里那段左对齐的宣言。五行大写衬线字一行行往下叠，右边一张浴室效果图从字底下滑上来，最后用灰色手写体的 of fine living 收尾。七条标准每一条都排成一张海报，左边或右边是一个手写的引子词加一个大写词，中间是一张铺满版面的效果图，旁边一段小字，再配一段自动播放的短片。房型那一章，也就是 Collection，把 MANSIONS、VILLAS、PENTHOUSES 三个词放大到 160 像素，黑底白字，一次只亮起一个。

访客打开页面时，一块深灰的幕布先盖住一切，右下角一个数字从 1 数到 100。幕布退开后，The art 和 OF THE SUBLIME 一个词一个词地升起来。页面的滚动不是浏览器原生的，而是 Vide Infra 自己改过的一套平滑滚动。每一帧，页面只把当前位置往目标位置挪剩下距离的十分之一，所以滚轮停了之后页面还会慢慢滑一段。每个章节由脚本各自移动位置，移出屏幕的章节整块隐藏起来。几个关键章节的边缘还设了引力井，也就是会把滚动往这里吸的区域。页面滚到房型那一章和四个楼盘那一章附近时，滚动会明显变沉，滚轮停下之后，页面还要再滑两三秒才停稳。

房型那一章画在一块 WebGL 画布上，也就是由显卡实时绘制的画面。三张效果图贴在弯曲的面上，像绕着一根看不见的柱子排开，边缘随着滚动微微鼓起。访客往下滚时，三张图一张接一张转到正中，然后整章被钉在屏幕上不再往上走，三个房型词在下方依次换上来。Selection 那一章是第二块画布，十三张图斜着悬在黑色空间里，滚动时从四面八方飞过来，Handpicked 的手写体压在最前面。两块画布都只在滚动时重新绘制，页面一停就一帧也不画，不白白占用显卡。

除了这两块画布，页面上其余的动作全由滚动带出来。满幅的效果图在滚动时以不同的速度平移和放大，小标题的每个词则先升起，再落定。Locations 那一章的图钉随着卡片翻页一个个点亮，页脚那五行大字上则有一道斜光扫过。Vide Infra 把七条标准那一段做成了一组幻灯片，画面钉住整整 19,532 像素的滚动距离，每条标准占一屏。访客往下滚时，图和字在钉住的画面里横向切换。

访客点那块 3D 小图，会进入单独的 /location 页，那里是另一个世界。一个三维的迪拜灰色模型从雾里浮出来，海是浅灰，陆地是深灰，楼是用很少的面拼出来的白色方块。这一页 7,560 像素的滚动距离，全部用来推动镜头。镜头先在棕榈岛上空停住，然后沿着海岸线往东北飞，帆船酒店、迪拜眼摩天轮 Ain Dubai、哈利法塔和未来博物馆的图钉依次出现，最后越过相邻的沙迦和阿治曼，停在西尼亚岛上空。光标停在四个楼盘的图钉上，图钉里会浮出一张小效果图。访客点十个地标的图钉时，右边会滑出一张卡片，一张照片加一段介绍，网址末尾也跟着换成 #burj-al-arab-sail 这样指向该地标的锚点。鼠标不参与镜头的控制，镜头只听滚轮的。

这个站是手写的静态页面，外加站点自己的一套插件系统。页面上每个带动效的元素都标着一个 data-plugin 属性，写明要挂哪个插件，parallax、reveal、stickySlider、carouselWebGl、threeWorldsWebGl、mapActivePin 等等，一共二十来种。脚本打成两个包，shared.js 压缩后 106 KB，landing.js 69 KB，里面装着 jQuery 3.7、负责页面切换的 Barba、改过的平滑滚动库 Locomotive Scroll，也就是动效一章说的那套滚动，还有 three.js。/location 页另外再下载一个 208 KB 的 three.js r179 包，里面带着三种加载器。glTF 是三维模型的通用文件格式，Draco 用来压缩模型的几何数据，KTX2 是一种显卡能直接使用的压缩贴图格式。

访客打开首页要下载 8.6 MB，共 98 个请求，其中图片 8.1 MB。页面一进来，就把 34 张 @xxxl 这一档超大尺寸的效果图全部请求了，从第一屏一直到页脚，没有一张是等滚到跟前才加载的。访客滚完整页要再多下载 10.5 MB，主要是 Selection 那十三张图和三个房型的图，整页一共 19.1 MB。视频用视频托管平台 Kinescope 的内嵌播放器（iframe）来放，一共 13 个，包括首屏的缎带、菜单里的缎带、3D 按钮里的小地图和七条标准里的短片，全部静音、自动循环播放。这个站的三款字体从 Adobe Fonts 加载，一共 231 KB。

地图页更重，它的三维模型是一个 8.9 MB 的二进制文件，再加 13 张 AVIF 格式的贴图，共 2.9 MB，一进页面就要下载 12.2 MB。地图页运行时，显卡里常驻着 28 万个三角形。画布按窗口尺寸的两倍来渲染，画面更清晰，计算量也更大。画面静止时，页面每帧向显卡发 33 次绘制指令，滚动时反而降到十几次，全程保持每秒 60 帧。

服务器要等 480 到 568 毫秒才返回第一个字节。屏幕上第一次画出内容（FCP）在 800 到 852 毫秒，画出来的是幕布上的标题。整个页面在两秒半到三秒之间全部加载完。加载中东西跳位置的程度（CLS）是 0.013，远低于 Google 建议的 0.1 上限。加载时只有一个 100 毫秒上下的长任务，也就是脚本连续占住浏览器、让它暂时顾不上响应操作的一段时间。整页滚动保持每秒 59 到 60 帧，最慢的几帧出现在两块 WebGL 画布进入屏幕的地方，每帧 60 到 90 毫秒，是 60 帧下每帧约 16.7 毫秒预算的好几倍，访客会看到一下明显的顿挫。

Sobha Privy Collection 把无障碍的基础工作做得不错。页面声明了语言是英文，四个地标区域都标齐了，页面开头有一个让键盘和读屏用户直接跳到正文的链接，27 个可操作的控件都有读屏软件能念出的名字，键盘焦点框是一像素的白线。它的毛病出在用键盘操作页面的时候。键盘用户用 Tab 键往下走，过了页眉的四个链接，焦点就掉进那 13 个视频播放器里。焦点一路往下走，页面却不跟着滚，屏幕还停在首屏，焦点已经到了一万多像素以外，用户看不到自己停在哪。脚本也没有读取系统的减少动态效果设置，打开这个设置后，视频照样播放，滚动照样带着惯性，两块画布也照样在画。

四项评分里，创意 Creativity 7.63 最高，易用性 Usability 7.09 最低，设计 Design 7.41，内容 Content 7.53。开发奖是 Awwwards 单独给开发质量打的分，分六项，这里列出其中五项，不含响应式那一项。动画 Animations 7.80 最高，语义化 Semantics 7.00 最低，性能优化 WPO 7.60，代码结构 Markup 7.60，无障碍 Accessibility 7.20。

Vide Infra 在 Awwwards 上有 41 件作品，拿过 19 个当日站和 39 个荣誉提名，自述做数字产品、电商和品牌传播。它拿到当日站的作品几乎全是房地产项目，比如 Era、Madar、Silver Pinewood Residences、Springs、AIR 和 LIKOVA，其中五个是在一年之内拿到的。页脚的署名链接指向 Vide Infra 自己的一个页面，页面标题是豪宅网站设计代理公司。这个站的署名只有 Vide Infra 这家公司，没有个人。Sobha Realty 的董事长 Ravi Menon 以受访者的身份出现在站上，留下三段引言和一张肖像。