The Singularity

一个超级碗活动网站要同时做两件事，一是让访客看到那支广告，二是把访客带去 Squarespace 建自己的网站。Squarespace 在 2023 年 2 月 9 日公布了这次活动，这一年正好是公司成立二十周年。广告在 2 月 12 日的超级碗第一、二节之间播出，Squarespace 同时推出了一款限量的 Singularity 网站模板。这个站把两件事接在同一个笑话上。广告说 Squarespace 是一个做网站的网站，网站就让 Adam 当场一张一张地做出网站，而 Adam 做出来的每一张都是访客可以直接拿去用的模板。

访客打开网站后看到的是一个只有四段的单页，在 1920 像素宽的桌面屏幕上总共约四屏半。第一段是首屏，一段从广告里剪出的十五秒画面在标题后面循环播放，正中的 WATCH THE BIG GAME AD 按钮会打开完整的广告。第二段介绍限量的 Singularity 模板。第三段是一大片 Adam 组成的人群，标题写着 MAKE A WEBSITE WITH THE WEBSITE THAT MAKES WEBSITES，下面是免费试用的按钮。第四段 DISCOVER MORE 是一排可以拖动的视频卡片，放着预告片、花絮和三支短广告。页面上另外三个按钮分别通往 Squarespace 的模板库、Singularity 模板的演示站和免费试用的首页。

整个网站真正的主角是右下角那个圆形头像，它在访客往下滚动时一直跟在屏幕角落。头像外圈的字写着 MAKE A WEBSITE WITH ADAM，访客点它，或者在页面任何地方按住鼠标一秒左右，Adam 的头就会放大到占满整个屏幕。访客每点一下，Adam 说一句“website”或“websites”，一张模板从 Adam 嘴里飞出来，停在头像的一侧。网站一共放进了 27 个 Squarespace 模板的演示站，每张卡片都是其中一个的截图。访客把光标移到卡片上，卡片上会出现 START WITH THIS TEMPLATE，点下去就会在新标签里打开那个模板的演示站。

这个玩具的节奏照着广告的剧情往上升级。访客点到第五下时，Adam 分裂成两个人，一个问“Are you a website?”，另一个答“I'm a website”。访客再点一下，Adam 变成三个人，三个人一起往外吐模板。访客点到第十下时，十张模板一下子喷出来，整个画面被一个漩涡吸进去，等画面重新亮起来，屏幕上又只剩一个 Adam，循环从头开始。访客停手三秒，Adam 会自己说一句“click me”，这样提醒两次之后，Adam 会自己吐出模板。每一句台词都同时用白色的引号字幕写在 Adam 胸前，所以没有打开声音的访客也看得懂 Adam 在说什么。

整个网站的版面只用黑和白两种颜色，彩色全部来自影像，也就是广告的画面、Adam 的皮肤和那些模板截图。底色是纯黑 #000000，文字和按钮都是白色 #FFFFFF。版面因此退到了画面后面，访客最先看到的总是广告里的荒漠和人群，或者 Adam 的脸。不过页面也因此很少有地方能区分层次，几段之间只靠标题的大小和图像的明暗来分开。

字体分两类，各管一件事。标题用 Dharma Type 的窄体字 Rama Gothic E 的 Semibold，笔画末端没有装饰，全部大写，桌面上 50 像素，手机上 37.5 像素。标题的行距只有字号的 1.1 倍，几行字紧紧叠在一起，像电影海报上的片名。正文、按钮和页脚用 Optimo 的 Clarkson Medium，正文 12.5 像素，行距 1.6 倍，标题大约是正文的四倍。首屏的 THE SINGULARITY 标志不是用字体排出来的，而是一张图片，里面的小写 i 比其他字母矮一截，一眼就认得出来。

页面上的文字按钮都是同一种样子，是一个白色的长方块，里面写着黑色的大写字。文字按钮在桌面上高 50 像素，首屏那个大按钮高 59 像素，前面多一个播放三角。光标移上去时，按钮变成黑底白字。版面的左右留白随屏幕宽度变化，在 768 到 1440 像素宽之间从 20 像素逐渐加到 127 像素。四段里只有模板那一段是左右两栏，文字放在左边，两张模板截图在右边错开叠放，其余三段都是居中的。

三维画面的美术方向和广告一致，都像在暗处拍的人像。全屏的 Adam 只有一侧脸被光照亮，另一侧落进黑色里，西装和背景融成一片，所以那些彩色的模板截图在画面里格外显眼。人群那一段把同一个 Adam 复制成几百个，前排清楚，越往后越暗，最后消失在黑色里，左右两边也逐渐变暗。圆形头像的边缘是一圈像墨水一样晃动的毛边，外圈的字也会转动。头像一直留在屏幕角落，所以访客在任何一段里都找得到它。

到了手机上，同一套规矩换成了竖排的版面。左上角只留 Squarespace 的图形标志，圆形头像挪到右上角，原来右上角的 MAKE A WEBSITE 按钮不再显示。模板那一段的截图挪到文字下面，DISCOVER MORE 的视频卡片从横排变成一张接一张的竖排列表。全屏的 Adam 离镜头更远，访客能看到整个上半身，吐出来的模板排在头顶和胸前的空位里。

首屏的开场把加载画面和真正的首屏接在一起。打开网站后，黑色的屏幕上先出现白色的标题、一个小转圈和加载进度。加载完成后，这一层在三分之一秒内淡出，底下同一个位置的标题已经画好，访客看不出换了一层。接着，背景的视频从中间一条横线开始往上下展开，先快后慢，大约三秒半才完全铺开。WATCH THE BIG GAME AD 按钮和视频同时出发，从下方三十像素处一边升起一边长高。底部的 EXPLORE THE SINGULARITY 晚两秒多才出现，访客一开始滚动，它就淡出。

这个网站自己接管了页面的滚动。访客转一下滚轮，页面不会立刻跳到位，而是每一帧追上剩下距离的十分之一，所以松开滚轮后，页面还会滑一秒多才停下。首屏的视频往上走得比文字慢，模板那一段的两张截图一张往上、一张往下，各自还在缓缓上下浮动。到了人群那一段，滚动带着镜头从人群上方往下降，人群本身也一直在慢慢横移，像在不停行进。DISCOVER MORE 的卡片在访客滚到这一段时一张接一张升上来，每张比前一张晚 0.12 秒，访客拖动时每次换一张。整页从头滚到尾，再从尾滚回头，画面都稳定在每秒 60 帧。

圆形头像有自己的一套动法。它平时停在右下角，光标靠近到屏幕宽度五分之一以内时，它会离开角落，带着一点延迟追到光标下面，光标走开后再慢慢退回去。访客滚动得越快，它在上下方向上落后得越多，外圈的字也跟着滚动转动。光标移到它上面时，外圈的毛边晃得更厉害。

打开 Adam 的过程是全站最主要的过渡，进入的方式不同，画面也不一样。访客点击头像后，圆形从角落往全屏放大，先快后慢，约 0.6 秒放大到一半，1.2 秒时已经接近全屏，大约两秒才完全停稳。访客在页面上按住鼠标时，头像外圈有一道白色的弧线顺时针转一圈，表示还要按多久。与此同时，整个页面以光标为中心拧成一个漩涡，标题和按钮被拉长、卷进去，按满一秒左右，Adam 就会放大到全屏。访客点 WATCH THE BIG GAME AD 时也会看到同一个漩涡，只不过这次播放器从光标所在的位置开出一个圆，1.5 秒内扩大成整个窗口。访客滚动一下滚轮，Adam 就会缩回角落，0.4 秒就差不多收起来，比打开快得多。

全屏的 Adam 即使在访客什么都不做的时候也在动。Adam 的头会随着呼吸微微前后点动，眼珠偶尔小幅跳一下，头发像被风吹着一样轻轻晃动。Adam 的脸会转向光标，一盏跟着光标的灯照亮离光标最近的那一侧脸，光标移动得越快，这盏灯越亮。访客点击时，Adam 先张嘴，大约 0.3 秒后模板才从嘴里出来。截图一开始是鼓起来、起伏着的，在两秒多的时间里一边飞到一侧、一边展平。截图到位以后还会慢慢朝访客飘近，八秒后自己淡出。

分裂是这个玩具里最夸张的动作。Adam 的脸先往两边拉宽，像被两只手扯开，半秒后裂成两个人，两个头带着回弹分开，一个先问、一个隔一秒再答。第三个 Adam 出现时，原来的两个往旁边让开，新的一个从中间分出来。原来的两个各说一句“Another one”，新出现的那个说“I'm a website”。

玩具的最后一下是一个吞掉整个画面的漩涡。到这一下，十张模板在两秒内从嘴里接连喷出，整个画面在三秒内越转越快。画面的下半部分先暗下去，所有东西被卷向屏幕上方，然后画面用八秒慢慢转回来，只剩一个 Adam。画面从一个 Adam 说话、吐模板，到三个 Adam 一起说话，再到最后的漩涡，始终保持每秒 60 帧。

光标移到一张飞出来的模板上时，所有截图都停止往前飘，被指着的那一张颜色暗下去七成，START WITH THIS TEMPLATE 的字从截图后面浮上来，截图本身还轻轻弹一下。同时，Adam 的脸会被这张截图照亮一侧，像截图在发光。到了手机上，头像固定在右上角，不再跟着手指走。访客点一下头像打开 Adam，之后每点一下，模板就落在 Adam 头顶和胸前的格子里。手机上滑动页面时，页面几乎直接跟着手指走，不再像桌面上那样慢慢滑到位。

这个站建在 Active Theory 自己的网页框架 Hydra 上，整个页面画在一块 WebGL2 画布里，连标题、正文和按钮都不是网页文字。文字用 MSDF 字体图集绘制，Rama Gothic E 和 Clarkson 各有一张图集，按钮、视频和模板截图都是画布里的平面。每一帧，页面先被整体画进一张渲染目标，再由一个全屏的后期处理着色器读出来，漩涡、上下两端的渐暗和细微的颗粒都在这一步加上。圆形头像不在这张渲染目标里，它在后期处理之后单独画在最上面，所以页面被拧成漩涡时，头像本身始终是圆的。Adam 的三维场景和人群各自先画进自己的渲染目标，再作为图片贴到头像和人群那一段上。为了让读屏软件和键盘能用，框架在画布下面另外维护一份看不见的 DOM，里面的标题和链接和画布里的内容一一对应。

Adam 的头用的是正面视角的人像贴图，着色器把它们从正面投射到一个人头网格上，所以这个头只适合从正面看，网站也只让 Adam 在小范围内转头。网格是一个带骨骼的蒙皮模型，骨骼数据存在一张贴图里。脸上用到四张 2048 像素见方的正面贴图，分别是一张已经带着明暗的底色图、一张光线均匀的漫反射图、一张记录每个点朝向的法线图和一张遮罩图。遮罩图的红、绿、蓝三个通道分别标出整个头的轮廓、头发和眼睛。底色图、漫反射图和法线图以 KTX2 格式下载，由 Basis Universal 转码器在浏览器里解压。

着色器用这几张贴图在 Adam 脸上重新打光。跟着光标的那盏灯沿着法线图的朝向，把漫反射图的颜色叠加到底色图上，所以光标经过的地方就像真的被照亮了。头发区域按一张流向图偏移贴图坐标，模拟风吹，眼睛区域的贴图坐标每隔一会儿跳动一下，做出眼珠的微小跳动。眼睛里的高光另外用一张材质捕捉图（matcap）算出来，它把一张小小的高光球图按眼睛的朝向贴上去。开发者在着色器里留下的注释写着“subtle wind blowing through hair”，还说明眼珠跳动放在顶点着色器里算，是“for better performance”。

Adam 说的每一句话由一段录音和一段面部动画组成。网站给 Adam 准备了 13 句台词，每一句配一个只有 2 到 5 KB 的动画文件，记录这句话的口型和表情。动画和声音之间还可以设置一个提前或推后的时间，好让嘴型对上声音，字幕的文字则来自网站的内容数据。分裂成两个、三个 Adam 时，新的 Adam 直接复制原来的网格、骨骼动画和录音，不用再下载一次。分裂时的拉宽和撕开是在顶点着色器里做的，一个变量控制整体的横向拉伸，另外两个变量控制往左或往右的单侧拉伸，最后用弹性缓动放回原状。

飞出来的模板来自一个预先建好的 30 张卡片的池子，卡片从内容数据里的 27 个模板中按打乱的顺序取图，所以每次打开看到的顺序都不一样。卡片飞出时的起伏同样由顶点着色器完成，一个变量从 1 降到 0，卡片就从鼓起展平。光标停在某张卡片上时，程序把这张卡片的位置传给人脸的着色器，作为那盏从卡片方向照过来的灯。

人群那一段画了 805 个 Adam，却只用一次实例化绘制。每个 Adam 是一张始终朝向镜头的平面卡片，一共 35 排、每排 23 张，每隔一排错开半个位置，每张再随机挪动一点，避免排得太整齐。所有卡片共用一张 2048 乘 1024 的图集，图集里并排放着五个姿势略有不同的 Adam 全身像，每张卡片按自己的编号取其中一个。图集配了一张同样排布的法线图，所以跟着光标走的那盏灯能照亮光标附近的 Adam，光标动得越快，灯越亮。整群人先画进一张单独的渲染目标，只有这一段在屏幕上时才画，显卡较弱的设备会直接换成一张人群的静态图片。

这套做法按显卡分档。程序先给访客的显卡评级，再据此决定画布的分辨率倍数、每秒最多画几帧，以及是否画出光标带动的流体、三维人群和完整分辨率的人头场景。在一台装着中高端显卡的电脑上，页面按 1.5 倍分辨率绘制，没有多重采样抗锯齿，也没有 FXAA，边缘的平滑全靠这 1.5 倍的超采样。框架里带着泛光效果的代码和着色器，但这个站没有用上。后期处理着色器里还有一段按滚动速度弯曲画面的代码，它算出的结果在使用前就被覆盖了，所以滚动时画面并不会弯。

首次打开时，网站自己的文件约 10 MB，其中最大的是首屏那段 4.7 MB 的循环视频，它会被整段缓冲下来。手机上换成一段 1.2 MB、512 乘 1024 的竖版视频，打开减少动态效果的访客则只下载一张静止的画面。Adam 的模型、动画、贴图和台词录音在首次加载时就下载好了，所以访客点开头像时几乎不用再等。访客从头滚动到尾再滚回来，网站也不会再下载任何文件。首屏的视频只在出现在屏幕上时才把新的一帧传给显卡，滚出首屏以后就不再占用这部分开销。屏幕上第一次出现东西大约在 0.4 到 0.5 秒，标题在 0.8 秒左右就已经出现，视频大约在第 4 秒半铺满背景，加载过程中画面几乎没有跳动。

画布下面那份看不见的 DOM 让读屏软件能读到页面的标题和每一个链接，按 Tab 键也能依次走到 WATCH THE BIG GAME AD、五个视频和页脚的链接。不过键盘焦点停在某个链接上时，画布并不会滚到那个位置，焦点到了页面下方的视频卡片，屏幕上仍然停在首屏。圆形头像不在 Tab 的顺序里，只用键盘的访客打不开 Adam，也就碰不到整个站最主要的玩法。打开减少动态效果后，只有首屏的视频换成了静止的画面，漩涡、人群和 Adam 的动作都照常播放。

The Singularity 先在 2023 年 2 月 28 日拿到 FWA 的当日最佳，得分 84，3 月 17 日又拿到 Awwwards 的当日最佳和开发奖。FWA 把它归进动画、实验和推广三类。整个广告活动在 2023 年的 D&AD 拿到一支黄铅笔、一支石墨铅笔和一支木铅笔，D&AD 的条目把 Active Theory 列为设计公司。这个网站本身在 2024 年的 Webby 奖拿到网站类最佳视觉设计的 Honoree。

在 Awwwards 的四个分项里，创意 Creativity 最高，得了 8.03，把广告的笑话做成一个会说话、会分裂的 Adam，可能是这一项高的原因。可用性 Usability 最低，得了 7.28，主要的玩法藏在角落的头像和按住鼠标的手势里，键盘也打不开它，这和前面讲到的情况对得上。开发奖评委给了 7.78 分，其中动画 Animations 最高，为 8.80，标记 Markup 最低，为 6.80。整个页面都由 WebGL 画出来，网页本身的结构只剩那份看不见的 DOM，这可能拉低了标记一项。

表里的战绩是截至 2026 年 10 月 29 日的累计数。这个站是 Squarespace 的内部创意团队和 Active Theory 一起做的，Webby 的参赛名单里，Squarespace 一方有首席创意官 David Lee、创意总监 Mathieu Zarbatany 和设计团队，Active Theory 一方有创意总监 Andy Thelander、互动总监 Luigi De Rosa、三维负责人 Michael Sungalia 和首席三维开发 Pete Feltham 等人。广告由导演 Aoife McArdle 执导，制作公司是 Smuggler，网站首屏循环的画面就剪自这支广告。