Lando Norris

Awwwards 和 FWA 上的说明都把这个站称为 F1 车手 Lando Norris 的一个高性能平台，要用动态的交互和大胆的画面传达这位车手的能量和对赛车的热情。头盔是一位车手身上最个人化的设计，网站自己也写到，Lando Norris 从标志性的色块涂装到只用一次的特别设计，一直热衷于设计头盔。网站于是让头盔反复出场，开场的头像可以戴上头盔，首页中段是十几顶历年头盔的名人堂，ON TRACK 页面开头是一顶跟着滚动转动的金色头盔。Lando Norris 的页脚头像戴着整顶荧光绿头盔，找不到页面时出现的 404 页也是一顶旋转的头盔。

Lando Norris 的首页按先认识这位车手、再看比赛、最后看商品和合作的顺序排。开场头像之后是 MESSAGE FROM LANDO，两行大字写着在主场英国大奖赛赢下比赛的那个周末会永远记得，接着是一段宣言，说要突破极限、为胜利而战、在赛道上和赛道外留下自己的传奇。宣言之后是一条横向移动的照片带，照片来自卡塔尔、迈阿密、摩纳哥和英国等地，中间穿插着车手自己的两句话。首页再往下是 ON TRACK 和 OFF TRACK 两个入口，它们把内容分成比赛和生活两半，随后是头盔名人堂、世界车手冠军的纪念商品、合作品牌和社交媒体，页脚把访客带到商店、商务合作邮箱和四个社交账号。

Lando Norris 在首页之外还有三个子页面，都从右上角的菜单进入。ON TRACK 页讲比赛，有生涯数据、历年成绩、夺冠的分站和进入 F1 之前的经历。OFF TRACK 页讲生活，写的是板网球、摄影、乐高和高尔夫这些个人爱好。CALENDAR 页列出整个赛季的赛历和成绩，当前一站的赛道会画成一条发光的三维赛道带，最下面是到下一场比赛的倒计时。

Lando Norris 的画面以四种颜色为主：米白（#F8F8F3）、深橄榄绿（#282C20）、近黑（#111112）和荧光绿（#D2FF00）。米白和深橄榄绿轮流当大段的底色，近黑只用在头盔名人堂和日历页，荧光绿则只留给按钮、签名、焦点框和标题里的几个词，像赛车涂装上的点缀色。两行横向流动的大字和照片带还用到一种暗一些的黄绿（#B2C73A）和一种灰白（#DDE1D2），让画面从深绿过渡到米白时不显得突兀。

整个网站的底色上都铺着一层细细的等高线，这是全站最统一的视觉记号。这些等高线弯弯曲曲、不断缓慢变化，和车手头盔上那种弯曲的色块涂装是同一种形状。米白底上的等高线是浅灰色（#CBCBB9），深绿底上的是更深一点的绿（#363B25），所以等高线只增加一点质感，不会抢走文字和照片的注意力。

Lando Norris 的标题都把两种字体拼在一起。一种是笔画细、带衬线（笔画末端带小装饰的字体）的 Brier，另一种是又粗又紧的无衬线字 Mona Sans，开场的标志上 LANDO 用前者，NORRIS 用后者，宣言里的 REDEFINING、WINS 和 LEGACY 也换成荧光绿的 Brier。Mona Sans 是一款可变字体，网站在一些地方把它的字宽压到 93%，排出更紧凑的字，所以全站只靠这两款字就能从优雅排到紧凑。两种字体一软一硬，放在同一行里，读起来像一个人的两面，正好对应网站要讲的赛道上和赛道外。

这个站的整套版面按屏幕宽度连续缩放。网站以 1728 像素宽的设计稿为准，根字号等于屏幕宽度除以 1728 再乘以 16，在 992 到 1920 像素之间连续变化，所以在 1920 像素宽的屏幕上正文约 22 像素，到 1366 像素宽缩成约 16 像素，比例不变。平板和手机各换一套基准，手机上的基准放大到三倍，正文因此在小屏幕上仍然读得清。各段在滚动时停留多长，则按屏幕高度来定。

网站的卡片、按钮和页脚都切掉一个角，再接一小段斜线，像一张标签的折角，开场左下角的 NEXT RACE 卡片、头盔名人堂的每一格和日历页的赛道框都是这个形状。界面部件的状态都靠荧光绿来提示。右上角的 STORE 是一块荧光绿的按钮，菜单按钮打开后变成一个关闭的叉。菜单里当前所在的页面会被一道荧光绿的手绘线划掉，键盘的焦点框也是一圈荧光绿的细线。

Lando Norris 的照片很少按原来的颜色出现。访客滚动到签名那一段时，开场的头像会褪成带一点绿的灰色，照片带里只有少数几张是彩色的，其余的都偏灰，菜单里的照片也全是黑白的。这样处理之后，照片和深绿、米白的底色融成一片，荧光绿的签名和标题就成了画面上最亮的东西。签名、ON 的手写字和合作品牌那段的 collabs 涂鸦都是荧光绿的手写笔迹，看起来像车手亲手在页面上画的。

到了手机上，网站把版面排成一栏，页头只剩 STORE 和菜单按钮，标志挪到头像上方。开场头像右下角多了一个荧光绿的手形按钮，写着 TAP TO LOCK，因为手机上手指既要滚动页面，又要在脸上划出头盔，这个按钮负责在两者之间切换。照片带改成竖着散落，头盔名人堂改成两列，手机上的菜单只留下链接，拿掉了桌面上那几张黑白照片。

Lando Norris 的开场先把标志变成一扇窗，打开网站时，屏幕是一片荧光绿，中间是 LN 标志，底下写着 LOAD NORRIS。约 1.5 秒后，LN 两个字母的轮廓变成一扇窗，窗里透出 Lando Norris 的一双眼睛，约 2.5 秒时头像在米白底上完整出现，头上罩着一顶半透明的线框头盔。

开场头像会回应光标，就像一池可以搅动的水。光标在脸上划过，划过的地方留下几道像液体一样的轨迹，轨迹里露出头盔的涂装，光标也把背景的等高线搅成一团团灰色，一两秒后轨迹才慢慢散去。光标移动时，头像本身也会跟着光标轻轻转一点角度，转得比光标慢，带一点延迟。访客如果两秒不动光标，网站会让一个看不见的光标沿 S 形路线在画面上扫一遍，用 2.5 秒从上扫到下，过一会儿再反方向扫回来，之后每隔几秒重复一次，所以头像即使没人操作也一直在动。

光标停在 NEXT RACE 卡片下方那一行 McLaren F1 since 2019 上时，整顶头盔会罩到头上。头盔从下往上抹过脸，抹过的边缘是一道向上拱起的弧线，用 1.5 秒先慢后快再慢地罩满，光标移开后用 1 秒退回。访客在键盘上打出 disco 这个词，头盔会在 2 秒内换成一顶镜面的迪斯科球头盔，四周亮起星芒光晕，再打一次就换回来。

访客往下滚动时，开场的头像会一边缩小一边变成一张卡片。背景同时从米白转成深橄榄绿，头像褪成带绿的灰色，两行大字从卡片后面朝相反的方向横向流过。大字本来就一直在慢慢流动，访客滚得越快，大字流得越快。荧光绿的签名跟着滚动的进度一笔一笔写出来，访客滚到这一段的后半截时，整个签名才写完。

Lando Norris 首页后面几段的出场各有一套做法，宣言和引语的每一行先被一块荧光绿的色块盖住，色块扫过之后文字才露出来。照片带是一段横向移动的区域，访客往下滚动，照片就横着走，背景同时从灰绿慢慢变成米白。ON TRACK 和 OFF TRACK 那一段，一张头盔特写从左边滑进来，一张车手的侧脸从右边滑进来，两张照片随后拼成一整张通栏大图，成了头盔名人堂的开头。头盔名人堂里，光标停在一格上，那一格的边框变成荧光绿，头盔图换成车手戴着这顶头盔在赛场上的照片。

网站的页面之间用一块荧光绿的面板衔接，访客从菜单点进另一个页面时，荧光绿的面板先盖满屏幕，中间的 LN 标志动一下，然后面板变成一条带切角的斜带，斜着滑出屏幕，约 1 秒后新的页面完整露出来。网站在样式里定了一条默认的过渡，0.75 秒，起步很慢，中段很快，收尾拖得很长，这样的动作显得干脆又稳。

日历页的赛道切换是全站第二个用心的动画。访客点赛道框右边的箭头，当前的赛道先沿着比赛方向被一点点擦掉，同时转开 45 度，弯道编号、DRS 区和起点的方格旗依次往上淡出，每个只错开很短的一点时间。新的赛道再从另一侧转回来，沿比赛方向一点点画出来，两段各用约 1 秒，前一段先慢后快，后一段先快后慢。

Lando Norris 的滚动带着一点惯性，访客停手之后，页面还会顺着惯性滑一小段才停住。画面从开场一路滚到页脚都保持在每秒 60 帧，开场头像静止时也稳定在每秒 60 帧左右。

Lando Norris 的页面在 Webflow 里搭成，三维和二维动画用属性挂在页面元素上。设计师在 Webflow 里给一个元素加上 data-gl 属性，它就会被一个 WebGL 场景接管，比如开场头像、横向流动的大字和日历页的赛道。开发者给一个元素加上 data-rive 属性，它就播放一个 Rive 动画，属性里写明用哪个文件、哪个状态机，以及动画挂在滚动的哪一段。开发者给一整段加上 data-gl-change 属性，WebGL 背景就会在滚到这一段时换成指定的颜色。网站用了八个 Rive 文件，签名、日历卡片上的小赛道图、LN 标志、菜单按钮、页面切换、手写的 ON 和 collabs、头盔小图标都在里面，由 Rive 的 canvas-lite 运行时画在各自的小画布上。

整个页面后面固定着一块铺满屏幕的 three.js r174 WebGL2 画布，各个场景都画在这块画布上，并对齐到各自的页面元素。开场头像、横向流动的大字这些场景只在各自的页面元素进入视口附近时才渲染，离开后就停下。负责这部分的创意开发者 Adrián Gubrica 在 Codrops 的专访里写到，最难的是优化，大部分三维元素都要反复调好几轮。手机上几个场景同时渲染时，每一帧的耗时会变长，WebGL 场景和对应的页面元素之间就会出现延迟，团队重新排了渲染循环里各项工作的先后，才让两者对齐。网站把 Lenis 的平滑滚动和 WebGL 的更新都挂在 GSAP 的同一个时钟上，所以页面和画布总是在同一帧里移动，Lenis 每一帧追上剩余距离的十分之一，手机的触屏滚动也做了同样的平滑。

开场头像是一张照片做成的“三维的头”。照片贴在一块细分成 128 乘 128 格的平面上，一张深度图把平面顶出脸的起伏，再配上透明度图、法线图和粗糙度图，所以光标一动，照片就能像一颗真的头那样微微转向，光线也跟着变化。头盔是一个用 Draco 压缩的 glb 模型，用金属度为 1、粗糙度只有 0.05 的物理材质和一张摄影棚 HDR 环境图做出镜面般的反光。头盔一共有几套涂装，平时是金色的 Lime 版，另外还有深色、网格、Google 和迪斯科球几种，迪斯科球那一版另配一个反光的球体模型和一组实例化绘制的光晕。

开场头像的画面由四张离屏画面合成，分别是头像、戴着头盔的样子、一个二维流体模拟和一层慢慢变化的分级噪声。流体模拟只按屏幕十分之一的分辨率计算，每一帧做一次平流，加入光标的推力，求散度，再用 4 次迭代解压力，速度每帧衰减到原来的 96%。合成着色器拿流体的速度当遮罩，速度超过阈值的地方就用头盔那张画面盖住头像，同时把那里的背景换成灰色，脸部贴图也换成一张预先修过的阴影版，看起来像被头盔的阴影罩住。这个着色器也画出了等高线，它把噪声分成几级，再检查每个像素和上下左右的邻居是不是同一级，不同就画成一条线。光标两秒不动时，一个按时间线在画面上走 S 形路线的假光标会代替真的光标推动流体。罩上整顶头盔的效果则只是让遮罩从下往上推，边缘用一条正弦曲线拱起来。

Adrián Gubrica 在专访里写到，开场头盔要管理好几层画面和离屏渲染目标，目前一共有四种版本外加一个彩蛋版本，日历页则要在 24 条赛道的可视化之间过渡，一共 490 个点。日历页的每条赛道来自同一个 glb 文件，网站把赛道的路径读成一串顶点，再由一条平面带沿着路径围成内外两层发光的赛道带，用 matcap 贴图上色。弯道编号、DRS 区和起点旗是普通的页面元素，网站每一帧把三维里的点投影到屏幕上，再把这些标签摆过去，所以它们能用页面上的文字和动画来做。

横向流动的两行大字也画在 WebGL 里，用的是 Brier 和 Mona Sans 的多通道有符号距离场（MSDF）字体图集。大字每一帧按固定的速度移动，再加上 Lenis 当前的滚动速度，所以访客滚得越快，大字流得越快。开场头像在滚动时缩成卡片，是因为渲染头像的那块平面跟着页面上一个固定尺寸的元素缩放和移动，同时一个滤镜参数把画面从彩色推到去色、压低对比、再叠上一层橄榄绿。

Lando Norris 的资源按设备分开准备，窗口宽于 991 像素时，网站下载 WebP 贴图，窄于这个宽度时改下 KTX2 格式，由 Basis 转码器转成显卡直接能用的压缩贴图，省下手机上的显存。首页第一次打开约 5.3 MB，滚到页尾约 6.4 MB，手机上约 8.8 MB。最大的单个文件是约 467 KB 的赛道模型，日历页的 24 条赛道都在里面，首页打开时就一起下载了，其次是约 379 KB 的摄影棚 HDR 环境图、约 362 KB 的主脚本和约 351 KB 的迪斯科球模型。主脚本解压后约 1.3 MB，three.js、GSAP、Lenis 和网站自己的代码都打包在里面。

网站的服务器在 0.02 秒左右就开始返回页面，荧光绿的加载画面在 0.22 到 0.32 秒出现，头像约 2.5 秒完整出现。加载期间页面有一次卡住约 0.9 秒，画面不跳动。首页底部的 partnerships 链接打开的是 404 页面，那一页是一顶在两个荧光绿的 4 之间旋转的金色头盔，写着 PAGE NOT FOUND 和 VEERED OFF TRACK。

这个网站用键盘也能浏览，空格、Page Down、方向键、Home 和 End 都能滚动页面，Tab 键依次经过页面上的每一个链接，焦点框是一圈荧光绿的细线，页面会自动滚到焦点所在的位置。左上角的标志链接和 ON TRACK、OFF TRACK 下面的两个箭头按钮没有名字，读屏软件读到这几处时只知道是一个链接。网站的代码里没有读取系统的减少动态效果设置，所以打开这个设置之后，假光标、流体和所有滚动动画都照常播放。

Lando Norris 是 Awwwards 2025 年的年度最佳，同一年访客投票的年度人气奖也是它。它在 FWA 拿到的是当日最佳，85 分，归入个人与作品集和体育休闲两个类别。

这个站在 Awwwards 的四项里，创意 Creativity 最高，为 8.71 分，用流体露出头盔的头像、打字触发的迪斯科球彩蛋和日历页的发光赛道，很可能是这一项高的原因。可用性 Usability 最低，为 7.90 分，开场要先等加载画面，加载时还会卡住近一秒，这些都可能拉低了这一项。开发奖的五位评委给出 7.58 分，动画 Animations 最高，为 8.60 分，无障碍 Accessibility 最低，为 7.00 分，和工程章里几个没有名字的链接、不理会减少动态效果的设置正好对应。

两个平台上的署名都只有 OFF+BRAND. 一家，网站用 Webflow 搭建，三维部分由这家公司的创意开发者 Adrián Gubrica 负责。Adrián Gubrica 在专访里写到，这是自己第一次和 OFF+BRAND. 合作，调整渲染循环时还得到了 Federico Valla 的帮助。到写报告时为止，OFF+BRAND. 在 Awwwards 上只拿过一次年度最佳和一次月度最佳，两次都来自这个站。