Moto Finance

Moto Finance 的官网先让访客想要这张卡，再告诉他这张卡能做什么。Awwwards 奖项页上的介绍说得很直白，这个站的目标是让这张卡在访客申请之前就显得值得拥有。页面正文因此几乎不拿数字说服人，2,500 美元的年费只写在页面的描述信息里，也就是搜索结果里显示的那段简介，正文要翻到最后的常见问题才有一条相关的问答。

开场影片之后，访客跟着这张卡走完一段旅程。访客最先看到的是一颗夜晚的地球，亮着灯的城市上空浮着 Hotel Booked（酒店已订）、Jet Booked（飞机已订）这样的小通知，意思是这张卡在全世界都能用。这些通知里有一条写着 Transaction Successfull，多拼了一个 l，而地球是访客在首屏之后看到的第二屏，这个错字很难不被注意到。

地球之后，这张卡本身出场，四周围着一圈生活方式照片，标题写着 THE CARD IS ONLY THE BEGINNING（这张卡只是开始）。页面接下来依次讲零外汇手续费、全天候的礼宾服务，以及合作的酒店、餐厅和旅行。零外汇手续费指的是持卡人在国外用这张卡付款时，银行不另收换汇的费用。页面的最后是常见问题，以及一句收尾的话 A quieter way to move through the world（一种更安静地走遍世界的方式）。

收尾那句里的 quieter（更安静）也是整个站的调子。页面上没有一句促销口吻的话，行动按钮也只有一种，写着 Apply for Access（申请资格），点开是一张只要填邮箱、公司名和两个勾选框的申请表。常见问题里有一条问使用 Moto 需不需要持有加密货币，可见这张卡和加密资产有关，但除了这一条问答，官网别处对这件事完全没有提。访客从头到尾看到的，只是一张卡和一种生活方式。

黑、白、灰是这个官网界面上仅有的三种颜色。底色是近黑的 #080808，文字是略带冷调的浅灰 #e1e5e5，两者之间还有几级深浅不同的灰。整页唯一的彩色来自那颗地球，大气是淡蓝色，城市灯光是暖黄色。

这几种颜色在页面上以整块翻转的方式出现，页面靠背景在黑白之间来回切换来分出章节。首屏到卡片出场都是黑底，讲外汇的一段忽然变成整屏浅灰，礼宾服务又回到黑色。合作商户和常见问题两段都是浅色底，页尾再回到黑色。

文字和颜色一样收得很紧，全站只用一款字体 Neue Montreal。大标题是 64 像素的中等字重，全部大写，字母间距收紧到负 0.5 像素左右，正文和按钮用的是 16 像素左右的同一款字。除了少量说明文字用常规字重，全站的字几乎都是中等字重。

Properly Studio 挑照片同样克制，卡片周围那一圈照片几乎都是暗调的室内和人影，有空荡的走廊、石材墙面、灯光下的长餐桌和穿长外套的背影。这些照片的色彩压得很低，放在一起也认不出是哪一家酒店或餐厅的品牌。

讲外汇的那一段没有用照片，Properly Studio 在浅灰底上排了两列大字金额，有 ¥20,000、CHF 40.000、£15.000、₩22.000、€12.500 等各国货币。这些金额有的清楚，有的半透明或者模糊，看起来像远近不一地浮在空中。大标题 0 FX FEES BUILT IN（不收外汇手续费）压在这两列金额的上方，两列之间只有三行小字。

卡片的出场是 Moto 官网上最主要的动效。访客往下滚时，卡片先以侧面对着镜头，只剩一道细细的亮线。卡片随后绕着竖轴转过来，先露出印着卡号的背面，再翻到印着头像标志的正面。四周那圈照片跟着卡片的转动一起往镜头靠近，访客看到的就像是在一条照片围成的隧道里往前走。

卡片和照片隧道都画在一块 three.js 画布里。这张卡是一个三维模型，周围的照片会跟着镜头产生透视变化，看起来是放在同一个三维场景里的一张张平面。卡片的金属质感来自一张 matcap 贴图，这种做法把光照和反光提前画在一张球形的图片上，模型转到哪个角度，就从图上取对应位置的颜色，所以不需要实时计算灯光。

首屏那段开场影片则是一段真正的视频，而不是实时渲染的三维画面。视频长 11.4 秒，画面从一片黑色开始，先出现 Moto 的标志，再有一只发光的灯箱降下来。镜头最后落到石台和卡片上，视频只播一遍，播完就停在这最后一帧。紧接着的地球则是实时渲染的，由 three.js 在画布上一帧一帧画出来。

页面的滚动交给平滑滚动库 Lenis，滚轮停下后页面还会顺着惯性滑一小段。各段的动画由动画库 GSAP 和它的滚动插件 ScrollTrigger 按滚动的进度来推进，访客滚多少，动画就走多少。连续滚完整页时，画面平均每秒 59 到 60 帧，按 60 帧算每帧大约 16.7 毫秒。整页只在首屏一段出现过一次 86 毫秒的卡顿，相当于连着丢了四五帧，其余每一段最慢的一帧也在 24 毫秒以内。

Properly Studio 选了可视化建站平台 Webflow 来搭这个站，页面和样式在 Webflow 的编辑器里拖出来，再加上手写的脚本。GSAP、Lenis 和 three.js 这几个库都从公共的内容分发网络加载，没有打包进站点自己的文件。

页面上有三块画布，分别画地球、卡片和外汇那一段的金额，三块都用 three.js，但用的不是同一种渲染器。地球用的是 three.js 为新一代图形接口 WebGPU 准备的渲染器，卡片和外汇那一段用的是普通的 WebGL 渲染器。WebGPU 渲染器在浏览器用不了 WebGPU 时会改走较早的 WebGL2 接口，这个站上的地球实际就跑在 WebGL2 上。页面因此要把两套渲染器的代码都下载下来，WebGPU 版 165 KB，普通版 84 KB，另加两者共用的核心 98 KB。

首次打开 Moto 的首页要下载约 7.1 MB，滚完整页是 7.6 MB。首屏那段开场视频一个文件就有 4.4 MB，占了首次下载量的六成多，而它只播放一次。第二大的是地球的三张贴图，分别画着白天的地表、夜晚的城市灯光和云层，合计约 1 MB，其中云层那张最大，553 KB。卡片用的两张贴图约 400 KB，另外还有 173 KB 的 Google 统计脚本，以及申请表上用来拦截机器人的 Cloudflare 验证脚本。

首屏虽然带着一段 4.4 MB 的视频，文字却出来得很快，因为页面上第一块和最大的那块内容都是首屏那行大标题，不必等视频下载完。服务器在 134 到 430 毫秒内返回第一个字节，Google 建议的上限是 0.8 秒。这行大标题出现在 324 到 648 毫秒之间，远在 Google 对第一块内容（FCP）建议的 1.8 秒和对最大内容（LCP）建议的 2.5 秒之内。加载过程中页面几乎没有跳动，布局位移（CLS）只有 0.002，Google 建议的上限是 0.1。页面加载时也有 6 个长任务，也就是浏览器被一段脚本连续占住超过 50 毫秒、顾不上响应输入的时候，最长的一个约 0.3 秒。

这个站对三类访客照顾得不够，分别是怕晃动画面的人、用键盘浏览的人和用读屏软件的人。操作系统里有一个减少动态效果的设置，是给容易被屏幕上的运动弄得不舒服的人用的，这个站的样式表没有为它写任何规则。键盘用户按 Tab 键时，焦点会依次走过导航和每一个按钮，但标出焦点的框是 1 像素的近黑色线，落在黑底上几乎看不见，他们很难看清自己停在哪里。到了最后的申请表，公司名那一栏没有文字标签，读屏软件念不出这一栏是填什么的。

Moto Finance 在 Awwwards 拿到 7.30 分，四个分项里 Creativity（创意）7.56 最高，Usability（易用性）7.19 最低，Content（内容）7.31 和 Design（设计）7.25 居中。四个分项相差不到 0.4 分，评委对这个站各方面的评价比较平均。十九位评委给出的总分从 6.1 到 8.7 不等，其中有五票在 8 分及以上。

这个站的开发奖来自 Awwwards 另一组专门看技术实现的开发评委，他们给了 7.20 分。开发分项里 Animations（动画）7.40 最高，这个站用力最多的也正是卡片翻转和照片隧道这些滚动动画。Markup（网页代码的写法）7.00 最低，Semantics（语义）、Accessibility（无障碍）和 WPO（网页性能优化）都是 7.20。

这是 Properly Studio 在 Awwwards 拿到的第一个当日站，此前它得过 3 次荣誉提名（HM），荣誉提名是 Awwwards 比当日站低一级的认可。三位署名的个人在 Awwwards 上都只提交过这一件作品。三人各自的介绍显示，设计由 Damian Denis 和 Natalia Parandyk 负责。卡片、地球和照片隧道这几块三维动画应该出自前端开发 Michał Laskus 之手，因为他在个人档案里写的专长正好是 GSAP、three.js 和 Webflow 这三样。