Guillaume Colombel

Guillaume Colombel 把整个作品集收成了一个物件，屏幕正中永远只有一块石碑。作品集常见的样子是一张缩略图网格或一条列表，每个项目点进去是一页案例，这个站把这些全都换成了这一块石头。十二个项目的标题用三维文字排成一圈，绕在石碑脚下，正对访客的那个标题就是当前的项目。访客滚动鼠标滚轮，这一圈标题就转一格，换到下一个项目。

访客打开页面时，石碑并不是直接出现的，而是先被一步一步造出来。一条细线先把石碑的轮廓描出来，接着石头变成三角面组成的线框，然后屏幕上弹出几扇像软件窗口的小框，标签分别是 wireframe、clay、uv、normals、transmission 和 beauty。这六个词是三维开发者调一个模型时常用来检查的几种画面，依次是线框、没上材质的白模、贴图坐标的棋盘格、表面朝向的彩色图、光线穿透的效果和最终成片。窗口收起后，一层方格像素把画面整块翻开，荒原和石碑才完整出现。Colombel 靠写三维代码吃饭，这段开场等于把他自己调一个模型的工作流程当面演示了一遍。

开场结束后，十二个项目共用同一块石头和同一片荒原，每个项目不是一页内容，而是一组数值。石头的那组数决定纹理里的亮脉有多密多粗、横向色带有多宽，以及石头整体有多密实。荒原的那组数决定水面高低、雾有多浓、视野多远、植物多少、地形起伏多大，以及是不是夜晚。每个项目另外还有一个主色，比如 CLARTÉ 是红色，Chris Macari 是天蓝色。访客换到 Chris Macari 时，天空变成青蓝，雾更浓，石头的色带偏黄。访客换到香水品牌 Rabanne 的 1 Million Black 时，天完全黑下来，石头像一盏在夜里发光的灯。Colombel 不需要为十二个项目各画一张图，只要为每个项目调一组数，十二个彼此明显不同的画面就会自己生成出来。

每个项目的内容都藏在石头里面，光标移到石碑上时，石头上会裂开一道缝，同时响起一段细碎的开裂声。访客点下去，石头整块碎开，碎片停在半空围成一个不规则的框，框里是这个项目的封面。这些封面有的是一张图，有的是一段循环播放的视频。

石头碎开之后，左下角会出现一段一两句话的项目说明，以及合作者、年份和一个 Visit website 链接，浏览器地址栏里的网址也换成这个项目自己的地址。访客点右上角的 Close 或按 Esc 键，碎片会飞回原位，重新拼成一块完整的石头。

石碑的说法一直贯穿到最边缘的页面。访客输入一个不存在的网址，看到的是 404 和一句 Nothing stands here（这里什么也没立着），下面的返回链接写着 Back to the stone（回到石头那里）。Colombel 介绍自己的 About 页也搭在同一片荒原上。

整个画面只有一个主体，它永远在正中。石碑从页面顶部往下占了八成多的高度，形状像一块竖着的鹅卵石，边缘略微不规则。石头看上去像半透明的缟玛瑙，内部是一层层横向的色带，色带里爬着细细的亮脉，光线能从石头里透出来，所以石头成了暗色荒原上最亮的物体。石碑背后的地平线压在画面中部偏下，远处是起伏的沙丘、零星的植物和一片浅水，天空从地平线往上由亮到暗渐变。

界面本身几乎没有颜色，画面上的颜色全部来自当前项目的那组数值。界面只用两个颜色，接近纯黑的 #050404 和象牙白 #f0ebe2，界面上的文字都是接近象牙白的浅色，靠 55% 到 92% 的不透明度分出主次。天空由地平线、中段和天顶三个颜色渐变而成，雾和碎片的颜色也都跟着当前项目的主色变。整个画面上还盖着一层很淡的颗粒噪点，让干净的渲染画面带一点胶片感。

全站只用了两款字体，所有的网页文字都是 Neue Montreal，左上角的名字、右上角的 About、项目说明和按钮都是 12 到 14 像素的小字。石碑脚下的大标题是第二款字，一款很粗很宽、全部大写的无衬线体。这些大标题不是网页文字，而是画在画布里的三维文字，程序用一张字形图（MSDF）记录每个像素离字形边缘有多远，所以文字放得再大边缘也清楚。正对访客的标题填成实心白色，转到两侧的标题只保留描边，还顺着圆环的弧度弯过去，访客一眼就分得出哪个是当前项目。

项目打开后，画面的主次整个翻了过来。原本在正中发光的石头变成一圈碎片，碎片外壳是这个项目的主色，内侧是暗色，它们退到画面边缘当画框。封面图或视频成了画面里唯一的亮面，项目标题仍然压在封面的下沿。左下角那段说明只有三四行小字，不和封面抢位置。

石头碎开的那一下，是这个站最重要的动作。碎片先从裂开的那一点往外弹，同时绕着自己的轴翻转，所有碎片还会一边张开一边往下坠一点，最后停在半空。访客关上项目时，碎片沿原路飞回去，重新拼成完整的石头。

这些碎片不是几十个各自计算的物体，而是一整块网格。每一片碎片都记着自己往哪个方向飞、绕哪根轴转、转多快、飞多远，着色器（在显卡上运行的小程序）只拿一个从 0 走到 1 的打开进度，就能逐片算出每一块此刻的位置，关上时这个进度再倒着走回 0。整个过程不需要物理引擎，显卡一次就把所有碎片画完。碎开时和静止、悬停、换项目时一样，画面都稳定在每秒 60 帧，也就是每帧约 16.7 毫秒，没有一帧超过 32 毫秒。

碎片停稳之后，项目说明的每一行文字会从一道遮罩下面往上滑出来。光标停在最后一行的 Visit website 上时，这几个字母会一个接一个地动一下。

换项目时，画面不是切过去的，而是整片荒原慢慢变过去。访客滚动滚轮后，标题圈转一格，天空、雾和水的颜色一起慢慢过渡，石头的纹路也换成另一种。远处有几只鸟在飞，水面有缓慢的波纹，植物在逆光里发亮，访客就算什么都不做，画面也一直在动。

这个站的声音和画面是对齐的，光标停在石碑上时，一段开裂的循环声会淡入，光标移开就淡出。碎裂声的录音要到第 1.45 秒才是崩开的那一下，程序会按画面的进度跳过前面一段或者稍等片刻，让这一下正好落在石头崩开的那一帧上。访客的滚轮每转一格，还会带出一声短促的转动声，背景里一直有一段低音量的环境音在循环。在手机和平板这类触屏设备上，这套声音整个不加载。

开场那段演示比加载本身长得多，资源在大约 2.5 秒时就已经准备好，但从打开页面到能操作，完整的开场要 7 到 9 秒多。这个站为减少动态效果的设置准备了一条近路，这个设置是操作系统里给容易被屏幕上的运动弄得不舒服的人用的。访客打开它之后，这段开场会被整个跳过，1.8 秒就能看到完整的石碑，项目说明的逐行滑入和各种过渡也会一起关掉。

Colombel 用网站框架 Nuxt 搭了这个站，Nuxt 基于 Vue，页面在服务器上预先生成好。三维部分用的是 three.js 的 WebGPU 渲染器，WebGPU 是浏览器里新一代的显卡接口，比 WebGL 更接近显卡本身的工作方式。浏览器不支持 WebGPU 时，同一套代码会自动退回较早的 WebGL2 接口。材质用 three.js 的着色语言 TSL 写成，这种写法让开发者用 JavaScript 写着色器，再由 three.js 翻译成 WebGPU 或 WebGL 的代码，所以一份材质在两种接口下都能运行。

整个三维场景没有下载任何模型文件或环境贴图。荒原的地形是一张平面网格，程序用几层不同尺度的噪声把它推出沙丘、山脊和低洼，每个项目的起伏参数再把高低放大或压平。石头用来反光的环境贴图也是代码当场生成的，只有 64 乘 32 像素。石头的纹理同样没有对应的图片文件，应该也是噪声算出来的，所以换项目时只要改几个数，不用再下载任何东西。

Colombel 的作品集首次打开只要下载约 2.0 MB，其中封面图片 992 KB，脚本 729 KB，剩下的主要是大标题用的字形图和字体。8 张封面图片在首屏就全部下载了，而访客此时还一个项目都没打开。视频封面则要等访客打开对应的项目才加载，最大的一段有 4.9 MB。访客把十二个项目全部打开一遍，累计会下载 23.5 MB，其中视频占 20.5 MB，五段音效约 1 MB。

页面最先出来的几样东西都很快，服务器在 192 到 297 毫秒内返回第一个字节，浏览器在 468 到 584 毫秒画出第一块内容（FCP）。这两项都在 Google 建议的 0.8 秒和 1.8 秒之内。最大内容绘制（LCP）落在 4.5 到 7.0 秒，超过了 Google 建议的 2.5 秒，但浏览器算成最大内容的是开场小窗口上 wireframe、transmission 这样的标签文字，访客真正在等的是整段开场结束。加载过程中没有任何东西跳位置，布局位移（CLS）是 0。

Colombel 把加载本身拆成了十一个阶段，从初始化渲染器、生成地形和装饰、生成石头和碎片，到分三批编译着色器。程序在阶段之间会主动停一下，让浏览器有空响应输入，页面的加载进度也跟着这些阶段往前走。即便如此，加载过程中还是有 5 个长任务，也就是浏览器被一段脚本连续占住、暂时顾不上响应输入的时候。这些长任务每个 55 到 144 毫秒，集中在第 1 到 2.5 秒之间，正是编译着色器的时候。

键盘和读屏软件的用户在这个站上也有一条完整的路。页面右侧藏着一份十二个项目的链接列表，平时只有 1 像素大，访客按 Tab 键把焦点移到其中一项时，标题圈会转到这个项目，屏幕右侧还会亮出一个写着编号和项目名的标签。访客按回车就打开项目，按 Esc 就关上。声音开关有读屏软件念得出的名字，也标明了当前是开还是关，访客的选择会记在浏览器里，下次打开时照旧。

Guillaume Colombel 的这个作品集在 FWA 拿到 82 分，FWA 不公布分项分数，奖项页上的署名栏里也只有他一个人。

这是 Colombel 个人名下的第五个 FWA 当日站，前四个分别在 2020、2021、2024 和 2025 年。他在 About 页上写自己从 2019 年起担任 Awwwards 评委，并列出 15 次 Awwwards 当日站、15 次开发奖和 10 次 FWA 当日站。About 页上的 FWA 次数比他个人名下的多，多出来的几次应该是他在工作室任职时参与的项目。

作品集里的项目也能看出他的经历。列表里的 Kaizen 和 Magical Pantry 是他在 makemepulse 时做的，CLARTÉ 则是他自己创办的品牌，About 页上说这个品牌源于他的一段生病经历。他的上一版作品集 Portfolio 2024 也在列表里，那一版在 2024 年 10 月拿到了 Awwwards 的当日站和开发奖，列表上注明它由设计师 Maxence Henric 设计，而这一版在 FWA 上没有列出任何设计师。