Pensatori Irrazionali

这是一家做品牌、网站、游戏和影片的创意公司给自己做的官网，客户名单上是 Mayweather、内马尔、MrBeast 和凯迪拉克。同行给这类名单配的通常是黑底大图和一句口号，这个站配的是雕版画。

站名是意大利语，意思是非理性的思考者，标志是一头狮子加意大利三色。整个站顺着这个身份往下做。Works 和 Disciplines 两个章节标题用 256px 的花体手写，旁边各站着一幅铜版画风格的插图，一个是持剑天使，一个是飞马。中段一句宣言把三种字混排在一起，THE IDEA 和 TO CREATE 是粗大的无衬线，IS NOT 是衬线斜体，to live forever 又换回花体，两个吹号的小天使从两边飞进来。页脚是一个 PENSATORI 的粗衬线字标，底下压着绿色和红色两条线，灰色的 Irrazionali 花体从字标后面穿过去。

但它没有停在复古上。四个学科各配一种荧光色，品牌是绿，网站是粉，游戏是玫红，影片是黄绿，每种颜色只出现在两处，学科标题前的圆点和一整幅宽的跑马灯色带。灰纸、铜版画、荧光条，三样东西放在同一页上，这就是它和其他代理商官网不一样的地方。

围绕这个概念还有三个独立页面。Universe 是一片黑色星空，作品图漂在里面，按住拖动可以在里面游荡，点一张会放大成带 CLOSE 和 VIEW 按钮的预览。Contact 是一对米开朗基罗式的白色浮雕手，中间一个问句 What brings you here today，选 Start a project 会进入一问一答的六步表单。404 页面是一个像素小游戏，品牌狮子在地上跑，吃披萨和红酒，躲罗马柱。

最见功夫的是字体分工。全站 6,632 个字符里有 6,334 个用的是 Helvetica Now 的 400 字重，字号从 12px 拉到 216px，层级几乎全靠字号。花体 Ballet 只有 111 个字符，渲染面积却接近那六千多个字符的三成，因为它只用在 256px 的章节标题、四个学科的大数字、Error 404 和案例标题上。衬线体 PP Editorial 只有 11 个字符，全在那句宣言里。等宽体 Sometype Mono 只出现在联系页的三个按钮上。一款字负责说话，一款字负责签名，一款字负责强调，一款字负责按钮，谁都不越界。

颜色纪律同样严。页面底色是 rgb(245, 245, 245)，文字是黑和几档深灰，整页没有别的颜色，除了那四条荧光色带。四种颜色的色值是 rgb(43, 255, 0)、rgb(246, 105, 228)、rgb(255, 0, 102) 和 rgb(173, 248, 0)，全页数下来每一种都只用在圆点和色带这两处。颜色不装饰，只做编号。

版面是表格式的。每个学科用一张两栏表交代五项服务，左边 Number 右边 Service，一条条细线隔开。Trusted by 一节是十个带细边框的空白方格，每格一个客户标志，下面接一段从洛杉矶到东京的地图，两座城市的海岸线剪影贴在左右两角，还标了经纬度。这种排法让页面读起来像一本印刷品的目录页，和花体标题、铜版画正好是同一个年代的东西。

图像分三层。铜版画插图是 PNG，持剑天使、飞马、两个吹号小天使和引言旁的天使。白色浮雕是三维渲染后烘焙的帧序列，它们没有线条，只有光影，看起来像纸上压出来的。第三层是客户案例的视频和照片，内马尔、Vodafone 的红衣老人、FaZe 的柠檬水，全彩，只出现在各学科的横向画廊和 Universe 里。前两层是这家公司自己的，第三层是客户的，分得很清楚。

把花体和铜版画拿掉，剩下的是一个排得整齐的灰色代理商官网，表格、色带、画廊。所以这个站的厚度就在那一层上。它借的是古典书籍装帧的语汇，荧光色带是自己加的那一笔。评委给的四个维度几乎持平，Creativity 7.33 略高于 Design 7.2，和这个判断是一致的。

页面在 Lenis 上滚动，推一次滚轮，滚动位置按 170、156、141、126 像素这样逐帧递减地往前走，三十帧走了 1,700 像素还没完全停稳。

菜单是整页的动作。点右上角的图标，当前页面缩小成一张卡片退到深色底上，右侧滑出一块面板，里面是四张新闻卡，Awwwards 的 SOTD、Forbes、Billboard 和一条 Stüssy 概念设计的报道。换页也是同一套，整页缩进深色框里，新页面再从框里放大回来，全程是 DOM 缩放，画布数量没有变。

作品列表的每一行里，同一个名字叠了四份，鼠标扫过时字母滚动打乱再复原，那一瞬间 DOM 里读到的是 Maywentatb 这样的半成品。这个效果配了声音，scramble-hover-2.mp3，音量 0.2。菜单开合放 menu-open-4.wav，导航项悬停放 hover.wav，音量 0.05。声音默认开着，右上角有一个关闭按钮。

Contact 一节的 BUILD 四个字母被拉出七层残影，那是七份同样的 SVG 叠在一起，每份五条路径。四条跑马灯色带各自循环着 LEARN MORE ABOUT 加学科名加 LET'S WORK。学科画廊里的视频进入视口就播，离开就停，实测游戏一节同时播三支时帧率从 60 掉到 30，滚走以后回到 60。

Universe 页面里光标是抓手，按住拖动整片星空跟着走，拖动期间保持 60 帧。点一张作品图，它放大到画面中央，上方出现 CLOSE 和 VIEW 两个按钮。联系页的两只手跟着光标动，光标换位置时手的姿态和清晰度都在变。案例页滚到底，NEXT WORK 四个大字下面有一条紫色进度条，从 8% 走到 40% 再继续推，页面就自己换成下一个项目，实测从 SOHub 直接落到了 David Beckham。

404 页面的小游戏用空格键起跳，狮子是一张 GIF，障碍物是三种 PNG，六次按键把分数从 21 推到 80，撞到东西就重来，最高分留在 HI 0080 里。

这个站跑在 Next.js 上，用 Turbopack 打包，三维部分是 three.js r182 的 WebGPURenderer，包里同时带着 WebGL 后端做退路。内容来自 Sanity，画廊用 Swiper，包里还有 GSAP、ScrollTrigger、SplitText 和 Matter.js。

首屏的旗子是一支 2,560 乘 1,440、5 秒循环的 mp4，视频元素本身的透明度是 0，画面由同一个容器里的 WebGPU 画布用 VideoTexture 逐帧画出来，容器设了 mix-blend-multiply，所以旗子的白底会融进灰纸里。视频和画布各带一组 300 毫秒的透明度过渡类名，画布起不来时视频可以顶上。视频还配了一条 VTT 字幕轨，内容只有一句 Decorative motion。

两尊天使浮雕和联系页的双手是烘焙的帧序列。代码里的 getBakeFrameUrls 给每个对象两种取法，要么一个 sequence.ktx2 的纹理数组，要么拆成 1 到 6 号六个文件，加载后走 basis_transcoder.wasm 转码成压缩数组纹理。两尊天使各 16.2 MB，双手六个文件各 10.7 MB，合计 64 MB。这些文件是 HTML 里的 link preload 以高优先级发出的，页面开始解析 222 毫秒后就在下载，而天使要滚到第 2.5 屏才看得见，双手根本不在首页上。

于是首页首次加载是 41 MB，其中纹理 32 MB，图片 6.8 MB，脚本 830 KB，字体 582 KB。滚完 15.6 屏是 125 到 132 MB。Universe 页面另外拉一支接近 200 MB 的 mp4。

即便如此首屏并不慢。服务器 139 到 192 毫秒回第一个字节，首次内容绘制 516 到 596 毫秒，最大内容绘制 696 到 832 毫秒，落在那支旗子视频上，布局位移 0.004，两个长任务最长 173 毫秒。用户看到的是开头两秒左右的深色加载屏，然后旗子直接出现。

连续滚动全程平均 59 帧，最差一段在游戏画廊，52 帧，p95 帧耗时 35 毫秒，原因就是三支同时解码的视频。Universe 页面用的是 WebGL2 而不是 WebGPU，画布 2,880 乘 1,417，比 1,920 的视口大 1.5 倍，是主动超采样。

可访问性方面，页面声明了英文，header、nav、main、footer 四个地标齐全，67 张图没有一张缺 alt。问题在标题和键盘。整页只有一个 H1，一个 H2 都没有，开发奖里 Semantics 只给了 6.60 分。Tab 键第一下落在声音按钮上，接着是六个作品行，要按三十多次才轮到菜单按钮，四个 Learn More 和一个 Contact us 把 outline 设成了 none，焦点走到那里看不见。减弱动画的设置只管两处，Universe 的狮子和 404 的小游戏，其余动效照跑。

四个维度落在 0.14 分的区间里，几乎是一条平线。页面上公开的五位评委里四位给的都是清一色的 7，只有 Denys Koloskov 给了 7、8、8、9，把 Creativity 和 Content 拉起来一点。

开发奖那边差距大得多。Animations 8.20 是七项里最高的，Semantics 6.60 最低，中间是 Accessibility 7.00、WPO 7.20 和 Markup 7.40。8.20 对应的是菜单缩放、花体标题和 WebGPU 旗子，6.60 对应的是那个只有一个 H1 的文档。

署名只到公司一级。Awwwards 档案里它的另一个 SOTD 是 2026 年 6 月 7 日的 SOHub，站上菜单里的第一条新闻就是这件事。案例页把 SOHub 的项目总监写成 Socrates 和 Themis，Billboard 报道过其中的 Themis "Reit" Chrysafidis。页脚地址是迪拜数字园区 A1 楼，版权归 Aeva，而首屏的自我介绍写的是 based in Europe。这个站没有在 FWA 拿奖。