Warm & Fuzzy

创意公司的官网有个老难题。作品本身五花八门，硬凑在一起就成了一锅杂烩。这一家的解法是把版面做成一套固定的格子，让内容的杂乱变成一种节奏。

页面从上到下是一条接一条的满幅色带，每条色带只有一种底色。蓝色那条放公司的自我介绍，黑色那条放一句口号，白色那条放作品。色带之间没有过渡，没有渐变，硬切。

每条色带的左下角固定挂一句全大写的小标签，像杂志的栏目名。蓝色那条的标签是 FOUNDED BY ARTISTS WITH A HEALTHY RESISTANCE TO BORING，黑色那条是 SAMENESS IS EASY. DIFFERENCE IS OPPORTUNITY. 标签的位置永远一样，内容每条都不同。

这个格子最聪明的地方在于它能装下任何东西。顶上那块视频区就是证明，同一个位置，这一轮是一张挤满意大利辣香肠的披萨特写，被调成了粉紫色，下一轮换成网球场上凭空飞起来的几十件运动器材。两段画面在色调、题材、节奏上毫无关系，但因为它们占的是同一个格子、下面接的是同一条蓝带，看起来就是一套。

文案也按这套走。服务清单直接摊开八项，Direction、Production、Live Experiences、Design、Animation、Visual Effects、Editorial & Finishing、AI & Emerging Tech，每一项后面跟一个数字，写着这一项目前手上有多少个项目，设计 14 个、动画 22 个、视效 11 个、现场体验 2 个。

一家公司愿意把每条业务线的在手项目数写在官网上，这是很少见的。它同时交代了强项和弱项，现场体验只有 2 个这件事没有被藏起来。这可能也是 Content 这一项拿到四项里最高分的原因。

一款字，一个字重，从 14px 到 137px。

全站只加载了 Suisse Intl，一个 14 KB 的字体文件。页面上 2,135 个字符全部出自它，而它们铺开的面积超过八百万平方像素。标题和正文之间没有字体的区别，也没有粗细的区别，只有大小的区别。

这套做法的风险是层级会糊，而这个站用两件事把它撑住了。第一是字号跨度接近十倍，137px 和 14px 放在同一屏上，谁是标题一目了然。第二是每一块文字都有自己的底色，蓝底上的白字和黑底上的白字天然分属两段，不需要再用字重去区分。

颜色的规矩同样硬。文字只有白和黑两种，白用在 407 个元素上，黑 265 个。底色是电光蓝 rgb(25, 11, 182)、纯黑和纯白三种，另外有一档 5% 的白用在细分隔上。整页 693 个元素里只有 3 个带圆角。

最见功夫的是页脚。WARM & FUZZY 六个字母横贯整个页面宽度，用的不是正文那款 Suisse Intl，而是一款笔画极圆、几乎没有直角的粗黑体，字腔被压到很小。这套字形和正文那款冷静的瑞士无衬线正好相反，而它只在这一处出现。

更妙的是字母上那个东西。一个贴满贴纸的三维物件在页脚上方缓慢翻滚，落下来的时候正好卡进 FUZZY 的字母 Z 和 Y 中间，把那两个字母顶开一点。它不是一张静态图，它一直在动，所以每次滚到页脚，它卡进去的位置都不太一样。

这一手值得学。页脚通常是最省事的地方，而这里把全站唯一一款异形字和唯一一个三维物件都放在这儿，等于给整条浏览路径安排了一个结尾，而不是让它淡出。

滚动这一层有一个容易看漏的做法，文档本身不滚。

页面的高度永远等于一屏，真正在滚的是里面一个八千多像素高的容器，Lenis 驱动的是它。这么做的好处是滚动的缓动完全由脚本掌握，浏览器原生的滚动条和惯性不会插一脚。要还的债是所有依赖窗口滚动位置的东西都得自己重做，包括锚点跳转、浏览器的滚动恢复、以及大部分第三方脚本对滚动的监听。

顶上那些会动的形状用的是一批小的 2D 画布，而不是图片或者 SVG，装在一个叫 animated shape 的组件里，全站有十七个。用画布画简单形状的好处是可以逐帧改，不用为每一种状态准备一张图。

影片一共三段，全部静音自动播放并且循环。这是对的做法，静音自动播是浏览器允许的，而循环让顶上那个格子永远有东西在动，不需要访客做任何事。

系统里开了减少动态效果之后，站点有 22 条规则会接住它，覆盖得相当认真。

站点用 Next.js 构建，滚动交给 Lenis。

首字节只用了 170 毫秒，首屏内容 400 毫秒到位，load 405 毫秒。最大内容绘制和首次内容绘制同时发生，都在 400 毫秒，落在首屏那行大标题上。累计布局偏移是 0，一次位移都没有。加载过程里只有一个长任务，194 毫秒。

对一个满屏都是视频和动画的站来说，零位移这件事不常见。原因在版面上。这个站的每一块内容都被固定在一条色带里，色带的高度是先定好的，视频和形状都是填进已有的框，不会因为加载完成而把周围推开。

字体也是省的。整站只有一个 14 KB 的字体文件，因为只用一款字一个字重，不需要为粗体再下一个文件。

无障碍上做对的很多。页面声明了语言，页眉、导航、主内容、页脚四个地标齐全，四十多个可交互控件全部有名字，二十多张图片没有一张漏掉替代文字，还用上了状态和提示区域的角色标记。

但焦点是完全看不见的。样式表里 :focus 规则的数量是零，链接的轮廓样式被设成了 none。用键盘浏览这个站，你能在链接之间移动，却始终不知道自己停在哪一个上。开发奖里无障碍 7.20 是六项里第二低的，荷兰那位评委在这一项上给了 6 分。

这里有个值得注意的反差：这个站在语义、标记、替代文字这些能被自动工具检查出来的项目上做得很完整，偏偏在焦点可见这个同样基础、但自动工具不一定会报的项目上是空的。

四项分数里 Content 7.40 最高，这在获奖站里少见，内容通常是最弱的一环。而这个站的内容确实实在，服务清单摊到八项，每一项还带着在手项目数。

Usability 7.03 最低，和键盘焦点看不见这件事对得上。

五位评委给了 7.00、7.00、7.00、7.00、7.40，四张一模一样的七分，是一个很齐的分布。这种分布通常意味着站点没有明显短板，也没有让人惊到的地方。

开发奖 7.52 反而比站点总分高。六项里语义、动画、标记都是 7.60，性能和无障碍并列最低 7.20。性能这一项打得偏低有点意外，实测的首屏是 400 毫秒、零位移。

页脚最后一行写着 BY NEUTRAL，制作方把自己的署名放进了客户的页脚里，这在代理商做的站上不算常见。

FWA 那边查不到这个站。