Cerebrium

这个站要回答的问题很实在。为什么不自己拿 EKS 跑，要用你。它给出的答案不是形容词，是四个数字并排放在一张图里。

那张图标着冷启动耗时。Cerebrium 开快照 3.8 秒，Cerebrium 不开快照 42 秒，Provider A 71 秒，EKS/GKE 156 秒。把自己不开快照的那一档也印出来，在厂商自制的对比图里很少见，而它恰恰让另外三个数字可信了——愿意写出自己慢的那一版，说明这张表不是挑着列的。

首屏的做法同样直接。左边是一行 192px 的标题，Real-time AI infrastructure that scales with you，其中 scales 一个词染成洋红。右边是一段说明和两个按钮。背后是那条从右下角卷上来的洋红缎带，边缘有一道白光在慢慢爬。

首屏中间还有一个只有把光标移过去才看得到的提示。光标本身被换成一个空心圆，圆底下印着 CLICK AND HOLD。

按住之后画面整个变了。相机推进缎带表面，导航、标题、按钮全部消失，1920×945 的视口里只剩下洋红和黑的褶皱，光标缩成一个带两道横杠的小圆。松手再退回来。

这一下把产品的意思演了出来。整个页面讲的是算力可以瞬间放大再瞬间收回，而这个手势做的正是同一件事，按下去放大，松开就回去，没有加载，没有跳转。

再往下滚，那条缎带盘成了球。球外面罩着一层半透明的壳，壳上浮着零散的洋红方块，旁边写着 99.999% Uptime 和多区域故障转移。这是同一份几何体的第三种状态，先是背景里的一条带子，然后是可以钻进去的材质，最后是一颗代表全球分布的球。

这个站的字号体系有一个很干净的规矩，三款字各占一段完全不重叠的区间。

Suisse Int'l Mono 只在 13px 出现，一个字号，一千六百多个字符，全部是标签、按钮文案和小注。Suisse Int'l 铺开九档，从 15px 到 41px，正文、小标题、卡片文字都归它，光 16px 这一档就写了 1,960 个字符。ABC Favorit 从 53px 起步，往上到 70、88、105、192，只写 271 个字符。

三段之间没有一处重叠。看到 13px 的等宽就知道这是个标签，看到 53px 以上的就知道这是一节的开头，中间的一律是正文。这个分法比按粗细分要稳，因为字号是读者不用学就能分辨的信号，而粗细在深色背景上很容易被抹平。

不过有一处需要照实写出来。那款承担所有大标题的字，在 CSS 里的名字是 ABC Favorit Trial，文件是 ABCFavorit-Light.woff2。Trial 是这家字厂发给客户试用的版本，一般不上线。

颜色分成两半，而且是硬切的。深色那半是黑底加洋红，浅色那半是白底加海军蓝 #172B76，蓝色一个颜色就用在 3,482 个元素上。洋红 #FF488B 在浅色区只干一件事，标出按钮和图表里代表 Cerebrium 自己的那一条。

浅色区左侧那个索引值得单独说。四行字竖着排，2–4s Cold Starts、Elastic GPU Scaling、Your Code, Your Way、Observability，当前这一节的那行是深蓝，其余三行是浅蓝。它钉在原地不动，右边的内容一节节滚过去，颜色跟着换。读者因此始终知道自己在四件事里的第几件，而这个信息完全靠一个颜色差传达，没有进度条，没有编号，没有高亮块。

页面上的圆角也有讲究。4,210 个元素里 421 个带圆角，正好一成，而且集中在卡片、按钮和图表容器上。文字区块一个圆角都没有。

最见功夫的是那颗球的做法，因为它和首屏的缎带是同一份数据。

三维这一层加载了三个 glTF 模型，名字直接写着它们的来历：CEREBRIUM_part1_11_optimization.glb 196 KB、CEREBRIUM_part2_4_optimization.glb 592 KB、CEREBRIUM_circles_optimized.glb 39 KB。三个一起在第 371 毫秒开始下载，第 462 毫秒全部到齐。模型走 Draco 压缩，页面另外拉了一个 88 KB 的 draco_decoder.wasm 负责解。

模型的名字本身说明了流程。part1 和 part2 是同一个物体拆成两段导出的，circles 是那层力场。缎带、球、力场三个视觉状态共用这不到 830 KB 的几何体，剩下的差别全在相机、材质和滚动进度上。打包文件里 ShaderMaterial 出现 20 次、InstancedMesh 19 次、EffectComposer 2 次，说明材质是自己写的着色器，力场上那些浮动方块是实例化批量渲染的，最后还过了一道后期合成。

要照这个思路做的人得先接受一个前提，一份几何体要能撑起三种状态，它本身必须没有明确的正面和背面。缎带是螺旋，卷起来是球，展开是带子，从哪个角度看都成立。换成一个有正脸的物体，这套复用立刻失效。

按住不放那一下的实现能直接读出来。按下去之后 html 上多了一个 is-hero-hold-active，光标元素上多了一个 is-holding，其余靠 CSS 过渡和相机推进完成。松手两个类都摘掉。整套手势没有新建任何 DOM，也没有新的资源请求。

页面转场用的是 Swup，html 上挂着 swup-enabled。滚动是 Lenis，打包文件里出现 64 次。GSAP 出现 41 次，但 ScrollTrigger 只有 2 次——大部分进场动画是 IntersectionObserver 触发的，不是滚动位置驱动的，这也是为什么整页滚下来的帧率是平的。

有一个小地方和站点的技术定位对得上。html 上还挂着一个 webgpu-is-ready，说明代码里有 WebGPU 的检测分支，不过实测这块画布拿到的是 WebGL2 上下文，1920×945，没有超采样，也没有开多重采样。

浅色区那片会跟着鼠标反应的点阵反倒不是 WebGL。那个 c-interactive-dots 容器里装着 100 个 DOM 子元素，一个 canvas 都没有。同一个站在最重的场景里用 WebGL，在这个一百格的点阵上用 div，分寸拿捏得很清楚。

连续滚动实测平均 59 fps，p95 帧耗时 18 毫秒，卡顿帧占 0.5%，12,242px、13 屏走完基本是平的。

减弱动画这一项形同没有。样式表里确实能查到一条 prefers-reduced-motion 规则，但它属于 cookie 同意弹窗那个库，作用是把弹窗的过渡时长设成 0。站点自己写的动效——缎带、球、逐字标题、点阵——一条都没覆盖。

底层是 Astro，页面内容从 DatoCMS 取，图片走 datocms-assets.com，部署在 Vercel 上。交互组件是 React 19.2.4 的孤岛，页面实际下载了 55 个 JS 文件。

整站一次冷访问是 2.67 MB，分在 117 个文件里。脚本 963 KB，三维和 wasm 走 fetch 的那部分 928 KB，图片 511 KB，字体 108 KB，XHR 95 KB。对一个满屏三维的站来说这个体积算轻的。

字体只有三个文件共 108 KB，是这份清单里最省的一项。三款字各自一个字重，没有加载任何用不上的变体。

脚本那 963 KB 里，Google Tag Manager 连它拉起来的衡量库一共 315 KB，是三分之一。第三方只有这一家，没有像素、没有会话录制、没有第二套分析，这在一个 SaaS 站上相当克制。

速度这块要拆成两段看。首字节 189 毫秒，首次内容绘制 264 毫秒，DOM 可交互 209 毫秒，这一段非常快，因为 Astro 输出的是静态 HTML，首屏不等 JavaScript。累计布局偏移是 0，从头到尾一次抖动都没有。

慢的是另一段。最大内容绘制落在 4,064 毫秒，对应的元素是那行 H1 标题。它之所以这么晚，是因为标题被拆成单个字符逐个动画进场，动画走完之前浏览器一直认为这块内容还没画完。加载过程里还有 6 个长任务，最长的一个 1,997 毫秒，主线程在那两秒里点不动也按不动。

逐字动画标题是获奖站的标配，而它对最大内容绘制的伤害很少被提起。首屏那块最大的文字往往就是 LCP 元素，给它加一段两秒的入场，就等于把 LCP 往后推两秒。想两样都要的话，办法是让每个字符的透明度终值先写成 1，用 transform 做位移，这样文字在第一帧就算已绘制。

WPO 拿了 7.00，是开发奖六项里第二低的，这个分数对得上 4 秒的最大内容绘制和那个近两秒的长任务。

无障碍的问题集中在两处，而且都是很典型的那种。

第一处是客户 logo 那一条。页面上有 24 个链接包着一张 img，每张 img 的 alt 都写成了空字符串。空 alt 的意思是这张图纯装饰、请读屏器跳过，可它外面套着一个指向 livekit.io、deepgram.com、vapi.ai 的链接。结果是读屏器连着念出 24 个没有名字的链接。这类问题自动检查抓不到，因为 alt 属性确实存在。图片在链接里的时候，alt 写的不是图片内容，是这个链接要去哪里。

第二处是价格计算器。那一页有 4 个滑块和 1 个下拉框，全都没有 aria-label，也没有关联的 label。这是整个站唯一一处真正要输入的地方，也正是读屏器用户用不了的地方。

做对的部分也有不少：页面声明了语言，header、nav、main、footer 四个地标齐全，49 张图片全部带 alt 属性，没有一个正值 tabindex，标签页用了正确的 tablist 和 tabpanel 角色。

四维分挤得很紧，最高的 Content 7.55 和最低的 Design 7.33 只差 0.22。一个满屏三维的站设计分反而垫底，说明评委看的不是画面漂不漂亮，而是它有没有把该说的说清楚，而这个站的浅色区确实素得接近普通 SaaS 模板。五位评委给了 7.00、7.30、7.60、7.00、6.80，法国的 Etienne Pharabot 最高，塞尔维亚的 Artemii Lebedev 给 Creativity 打了 6。

开发奖这边的分差就大了。动效 8.20 最高，对得上那条能变三次形的缎带。Markup 6.60 最低，WPO 7.00 次低，两项加起来正好是这份报告里写的那些问题。越南的 mChanh 给出 8.35，巴西的 Nico Menezes 只给 7.15，而且他给 Markup 打了个 5，是这份票里的最低分。

Louis Paquet 那 52 件作品里有 41 个 SOTD 和一个年度最佳站点，而且列表里几乎每一件都同时挂着 DEV 徽章，是个设计和开发都拿得起来的人。他的 profile 上写着报价三万到五万美元、接远程。KOKI-KIKO 名下 9 件全部是和他合作的项目。

八个署名对一个 SaaS 首页来说是个不小的团队，这也解释了浅色区那些图表、终端、地图为什么每一个都是单独做的组件，而不是套模板。

FWA 上查不到这个站。