CoMinVi

CoMinVi 做了二十多年隧道开掘，客户是在墨西哥开金矿和银矿的矿业公司，页面下方列出的合作方有 Trafigura、Agnico Eagle、First Majestic 等十四家。官网要同时回答两类人，一类是想知道这家承包商靠不靠得住的矿业公司，另一类是想来这里工作的矿工和工程师。所以首页的顺序安排成先把场面和规模摆出来，再讲业务、矿种、安全、设备和人，最后才是合作方名单和招聘入口。

访客每次进门，都要先看完一段大约 4.5 秒的开场动画。黑底上先出现公司的矿工头像标志，接着展开成 COMINVI 字标。然后一扇白框小窗在屏幕中央打开，窗里是首屏的画面，小窗再一路放大到铺满整个屏幕，首屏这才完整出现。

首屏是一条昏暗的地下巷道，一辆矿用卡车亮着车灯从岩壁之间开过来，左边是大字 Your trusted partner in underground mining，右边一行等宽小字写着累计开掘超过一百万延米。右下角两张小卡片通向服务和技术两页。

首屏往下，页面换成白底，先是一段公司介绍和六个数字，一百万延米、两千万吨矿石、五千一百个间接岗位、一千七百个直接岗位、七个在建项目和三十六个已交付项目。接下来是五项服务，工程设计、支护加固、巷道开拓、采矿生产和运输，每一项是一张大卡片。首页再往下是那块会转的矿石，然后是安全方针、超过三百六十台设备的车队、员工证言和合作方名单。整个首页约 22 屏，除此之外还有服务、技术、安全、关于、招聘、博客和联系七个内页，全站另有一套西班牙语版本。

这个站的规矩是暗场只留给开头和结尾，中间全是白纸。首屏是首页唯一一段暗色的电脑渲染场景，进入正文以后，背景换成纯白和一种很淡的灰绿色，两种底色轮流出现。到了页脚之前，页面又回到暗处，铺满整屏的是一张头灯照亮的矿工照片。白色的正文夹在两段暗场中间，读起来像一份装帧讲究的公司手册。

正文里的图像大多是真实拍摄的井下照片。矿工戴着亮着的头灯、穿着橙色工作服、戴着防毒面具，这些照片大多很暗，只有灯光和工作服是亮的。技术一章把六台设备拍在纯黑背景上，平地机、伸缩臂叉车、压路机都是黄色的机身。白底版面和暗色照片放在一起，每一张照片都像从井下开出来的一扇窗。

首页从头到尾只用了两款字体，一款无衬线，一款等宽。标题和正文用粗壮的无衬线字 Helvetica Now Display，好几章的开头是一整段加粗的大字，像在宣读一句公司声明。标签和数字用等宽字 PP Supply Mono，字号很小，全部大写。每一章左上角有一个黑底小标签，写着 S.01 ABOUT US、S.02 OUR SERVICES 这样的编号，一直编到 S.08，整页因此像一份分了章节的技术文件。

品牌的橙色几乎不出现在静止的版面上。这种橙色只在访客动手的时候出现，打开菜单时菜单按钮变成橙色圆点，当前语言 En 是橙色，鼠标移到服务卡片上，整张卡片变成橙色。版面平时只有黑、白、灰和照片里的颜色，橙色就成了访客在操作的信号。

矿产这一屏的版面，最像博物馆里的一份标本说明。石头四周围着一圈细细的刻度线，像一只仪表盘。右边写着元素符号和原子序数，金是 AU 79，银是 AG 47，铜是 CU 29。左边五个名字从上到下排成一列，当前那一个是黑色，其余是浅灰。这一屏把采矿公司的业务讲成了化学元素表上的五格。

首屏里那辆卡车的动作，是由两段不同的素材接起来的。开场结束时，一段 3.6 秒的影片先播一遍，卡车从远处开进画面。访客开始往下滚以后，画面换成 150 张预先渲染好的图，每滚一点就换下一张。卡车继续往前开，巷道慢慢变暗，大约滚过大半屏，这段画面就走完了。这 150 张图每张都是 1920×1080 的完整画面，分五批下载，画在一块画布上。

介绍文字跟着滚动一个词一个词变黑。公司介绍那段加粗的大字一开始是浅灰色，访客往下滚，词语从左到右依次变成黑色，安全方针那一段也是同样的处理。这样读者的眼睛会跟着变黑的位置走，读到哪里，哪里就是黑的。

服务卡片的变化全部发生在访客的鼠标下面。五张卡片平时是白色的，只有标题和一个线条图标。鼠标移上去，卡片变成橙色，底部滑出一段说明。右边那格照片也同时换掉，工程设计配的是车间里的工人，运输配的是一个站在巨型水晶洞里的矿工。一格照片轮流服务五项业务，所以五项服务不需要各占一块版面。

矿石那一屏会把页面钉住一段时间。访客滚动到这一章时，石头停在屏幕中央，在接下来大约一屏半的滚动距离里，石头一边转动一边依次换成另外四种矿石，左边的名字也跟着换。这块石头其实是一段 600 帧的影片，HOLOGRAPHIK 把它存成了可以任意跳到某一帧的形式，访客滚到哪里，浏览器就把哪一帧解码出来画上去。普通的视频只能顺着播放，这里却能往回滚、停在任意一帧，转动的速度完全由访客的手决定。

HOLOGRAPHIK 把合作方名单做成了一只竖着转动的滚筒。十四家公司的名字排成一列，访客往下滚，名字像轮子上的字一样往上翻，正中那一个是黑色，上下两边越来越淡。

访客点进内页时，被点的那张照片会一路放大，变成下一页的首屏。比如访客在首页点公司介绍旁的 About us，那张戴防毒面具的矿工照片会先在顶部露出 About Us 的字样，再铺满整个屏幕，成为关于页的封面，整个过程大约一秒。页面切换交给 Barba 处理，这是一个让网页换页时不整页刷新、可以做过渡动画的库。

整页滚动起来很稳，从首屏连续滚到页脚，页面平均每秒 59 到 60 帧，最慢的一帧也只有 30 毫秒。只有首屏那一段降到每秒 50 到 55 帧，那正是 150 张大图在轮换的位置。

这个站的版面在 Webflow 里搭，动效写在一个单独托管的脚本里，用到了动画库 GSAP 和它的滚动触发插件、平滑滚动库 Lenis、换页库 Barba，以及播放矢量动画的 Lottie。页面上二十多个线条小图标就是 Lottie 动画，联系页的地图则用开源地图库 MapLibre 画，底图来自 OpenStreetMap 的数据。

首页一共下载约 24.5 MB，几乎全部发生在打开的那一刻。首屏的 150 张图占了约 15 MB，矿石那段影片 4.8 MB，开场影片 3.7 MB。访客之后从头滚到尾，只再多下载约 0.1 MB。所以首页打开时，访客还没往下滚，浏览器就已经把整页最重的三样素材全部取了回来。

矿石那段影片用的格式是这个站最省的地方。600 帧画面一共只有 4.8 MB，平均每帧不到 8 KB，因为它是一段压缩视频，由浏览器自带的视频解码接口 WebCodecs 按需解出单帧。不支持这个接口的浏览器会改为逐张加载 600 张单独的图片。

访客看到首屏的时间，比加载指标显示的要晚得多。服务器 20 毫秒就返回了第一个字节，首次内容绘制（FCP）在 0.23 秒，但浏览器那时画出来的是藏在首屏后面的菜单文字，访客要等开场走完，大约 4.5 秒才看到完整的首屏。布局位移（CLS）是 0.27，高于 Google 建议的 0.1 上限，一部分来自打开后 0.3 秒首屏视频框的跳动，其余来自开场时 COMINVI 字标展开的动画。而且每次重新打开首页，这段开场都会再播一遍。

只用键盘的访客，在页面顶部就会走丢。键盘用户用 Tab 键依次选中标志和菜单按钮之后，焦点会进入那个没有打开的菜单，在十二个看不见的链接上走一遍。这时屏幕上只有首屏，焦点框被首屏挡住，用户不知道自己选中了什么。菜单打开以后，按 Esc 关不掉，按钮的展开状态也一直报告为关闭，读屏软件的用户听不出菜单已经开了。员工证言上方的 01 和 02 切换器是普通的块元素而不是按钮，键盘用户多半选不到它。页脚的三个社交图标链接没有名字，读屏软件只会念出这是一个链接。好在其余的链接和按钮都有浏览器默认的焦点框，图片都带有替代文字属性，西班牙语版本也把页面语言正确标成了西语。

这个站也没有为系统里的减少动态效果设置做任何准备。样式表里没有一条针对这个系统设置的规则，开了减少动态效果之后，开场、首屏影片和那 150 张图照样播放。

十九位评委给出的四个分项里，设计（Design）7.65 最高，可用性（Usability）7.04 最低。设计分最高，和白底版面、井下照片、章节编号这一套整齐的视觉规矩对得上。可用性最低，可能和 4.5 秒的开场、键盘焦点落进隐藏菜单这几处问题有关。开发奖的五个分项里动画 8.00 最高，无障碍 6.80 最低，方向和上一章一致。

HOLOGRAPHIK 在 Awwwards 上提交过 23 件作品，其中 20 件拿到当日站，近两年的客户包括区块链项目 Sui、创业大会 Slush、电子音乐人 Paul Kalkbrenner 和足球运动员 David Alaba。这个站在 Awwwards 上只署了工作室，没有列出个人。